-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (187 loc) · 7.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image"
content="https://github.com/monacodelisa/Kalob-The-Ultimate-2022-Fullstack-Web-Dev-Bootcamp/blob/main/2-CSS-201/images/featured-img.jpg?raw=true" />
<title>CSS 201 Project by Esther White</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/att1glw.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/kalob-ultimate-fullstack-logo.png">
<script src="https://kit.fontawesome.com/1f707df0d7.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<img class="logo" src="./images/Leon-logo.png" alt="logo">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">info</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li class="contact"><a href="#">contact</a></li>
</ul>
</nav>
<main>
<section class="header">
<!-- <svg></svg> -->
<img src="./images/Home2+(Leon).png" alt="">
<div class="pink-circle"></div>
<h1>Welcome to our corner of the world, explore more below.</h1>
</section>
<section class="explore">
<h2>Explore</h2>
<ul>
<li><a href="#">services</a></li>
<li><a href="">about us</a></li>
<li><a href="">portfolio</a></li>
</ul>
</section>
<section class="article">
<div class="article-left">
<div class="paragraph">
<h3>Nunc condimentum, magna vel sodales mollis, nisl nibh ornare eros.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero ex, tristique sed dignissim vel,
cursus ut magna. Aenean lacinia mi eget orci aliquet pharetra. Duis ut ultricies felis. Nulla vitae mi
dictum, scelerisque nibh eget, sagittis ligula. Nulla tortor quam, feugiat id laoreet ac, pellentesque sed
tellus. Nunc condimentum, magna vel sodales mollis, nisl nibh ornare eros, vel malesuada nunc metus at
elit.
Aenean vitae arcu auctor, imperdiet nisl quis, interdum lacus.</p>
<p><a href="#"><i>learn more →</i></a></p>
</div>
</div>
<div class="article-right">
<img src="./images/Home4.jpg" alt="">
</div>
</section>
<section class="featured-work">
<section class="featured-work-left">
<section class="content">
<img src="./images/Project1.jpg" alt="">
<div class="view-work">
<a href="#">view all work</a>
</div>
</section>
</section>
<section class="featured-work-right">
<h2>Featured Work</h2>
<div class="image1">
<img src="./images/Project2.jpg" alt="">
</div>
<div class="image2">
<img src="./images/image-asset.jpeg" alt="">
</div>
</section>
</section>
<section class="testimonial">
<img src="./images/image-asset.png" alt="">
<h3>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor interdum ipsum, non finibus libero.
Lorem
ipsum
dolor sit amet, consectetur adipiscing elit. Sed nec ex et leo ullamcorper consequat. Vivamus augue enim,
egestas id
mollis vel, efficitur eu mi. Vestibulum ac ligula a tellus aliquam mattis eu id est.”</h3>
<p><i>client name here</i></p>
</section>
<section class="article-two">
<div class="article-two-left">
<div class="paragraph-two">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor interdum ipsum, non finibus libero.
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Sed nec ex et leo ullamcorper consequat. Vivamus augue enim,
egestas
id mollis
vel, efficitur eu mi. Vestibulum ac ligula a tellus aliquam mattis eu id est. Ut vel dolor vitae orci
varius
pharetra
sed vel ligula. Nulla facilisi. Donec egestas mauris arcu, eu rutrum neque tempus sit amet. Curabitur ac
neque
convallis, malesuada arcu ac, facilisis sapien. Etiam molestie ullamcorper dolor scelerisque cursus. Duis
ultrices dolor
nunc, nec iaculis felis luctus et. Morbi odio ante.</p>
<div class="learn-more">
<a href="#">learn more</a>
</div>
</div>
</div>
<div class="article-two-right">
<div>
<img src="./images/Home6.png" alt="">
<div class="orange-circle"></div>
</div>
</div>
</section>
<!-- <div class="orange-circle">
<img src="./images/orange-circle.png" alt="">
</div> -->
<section class="recent-posts">
<h3>Recent Posts</h3>
<div class="images-wrap">
<div class="img-frame">
<img src="./images/daniel-monteiro-4w79vITaWK4-unsplash.jpg" alt="">
<p>Example Post 1</p>
</div>
<div class="img-frame">
<img src="./images/dmitriy-ZG3AlXw9FB0-unsplash.jpg" alt="">
<p>Example Post 1</p>
</div>
<div class="img-frame">
<img src="./images/lucas-mendes-x-uBdVCcWQM-unsplash.jpg" alt="">
<p>Example Post 1</p>
</div>
</div>
</section>
<section class="footer-logo">
<img src="./images/Leon-footer-logo.png" alt="">
</section>
<footer>
<div class="footer-top">
<div class="footer-nav">
<h3>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Ut tempor.</h3>
<ul>
<li><a href=""><i>home</i></a></li>
<li><a href=""><i>about</i></a></li>
<li><a href=""><i>services</i></a></li>
</ul>
<ul>
<li><a href=""><i>portfolio</i></a></li>
<li><a href=""><i>info</i></a></li>
<li><a href=""><i>contact</i></a></li>
</ul>
</div>
<div class="insta">
<img src="./images/instagram1.jpg" alt="">
</div>
<div class="links">
<div class="social">
<a href="https://github.com/monacodelisa-yt/CSS-201" target="_blank" rel="noopener noreferrer" title="github"><i class="fa fa-github" ></i></a>
<a href="#" target="_blank" rel="noopener noreferrer"><i
class="fa fa-instagram"></i></a>
<a href="#" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a>
</div>
<ul>
<li>© Your Website</li>
<li>Template replica by Esther White</li>
<li>Images by Unsplash.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="sign-up">
<h3>Psst... sign up for freebies below!</h3>
<form action="">
<input type="text" name="" id="" placeholder="First Name">
<input type="text" name="" id="" placeholder="Last Name">
<input type="email" name="" id="" placeholder="Email">
<input class="btn" type="button" value="sign up">
</form>
</div>
</div>
</footer>
</main>
</body>
<!-- this website was created sometime between 2020 and 2022 when I was still suing pure CSS and not SCSS and non-relative measuirements -->
</html>