forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
206 lines (205 loc) · 9.51 KB
/
index.html
File metadata and controls
206 lines (205 loc) · 9.51 KB
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>HTML/CSS Week-1 task</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<body>
<header class="header">
<img class="logo" src="./download(1).png" alt="" />
<nav class="topnav" aria-label="Main Site Links.">
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="#videos">Videos</a>
<a class="nav-link" href="#gallery">Gallery</a>
<a id="active" class="nav-link" href="index.html">Home</a>
</nav>
</header>
<main class="main">
<section>
<h1>Lorem, ipsum dolor.</h1>
<img src="./jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="" />
<h1>Lorem ipsum dolor sit amet consectetur.</h1>
<div class="main-container">
<article class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
quas esse officia aliquam illo suscipit nisi ducimus, velit iste
porro aspernatur fugiat optio, laborum explicabo exercitationem
eaque. Natus error laudantium tempore, quia repellendus unde odio
vitae veniam cum quod corporis consectetur eum iste. Accusamus a,
veritatis sequi fugiat culpa perferendis ipsam. Esse dicta
aspernatur neque amet non sint iure voluptate ullam minima sed,
tenetur atque, quo id at qui ipsum consectetur ut aperiam,
assumenda laudantium. Quidem ipsa voluptatibus repudiandae
blanditiis vitae? Delectus officiis aperiam excepturi fuga ullam
maiores vitae, tempore placeat quis sunt nesciunt, est atque nulla
quaerat <a class="link" href="#">magnam repudiandae</a>.
</p>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</article>
<img src="./jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="" style="width: 300px; height: 550px; margin-top: 35px;"0px">
<article class="article-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Temporibus reprehenderit veritatis, iusto qui porro molestiae.
Natus vero corrupti cupiditate quisquam eum fugit dolore deleniti
veniam iste fuga laborum omnis, tempora nobis hic et?
<a class="link" href="#">Blanditiis</a> rem minus modi doloribus
architecto assumenda accusantium iste ducimus sunt laboriosam quod
ipsum harum, magnam similique nihil sed aspernatur reprehenderit
eligendi molestias? Delectus a expedita mollitia quas amet
sapiente unde esse laudantium corporis voluptatibus magni
voluptates at, molestiae inventore est neque veritatis iste
molestias, a alias dolor dicta voluptatem. Placeat illo illum nam
provident quasi incidunt,
<a class="link" href="#">aliquid saepe</a> eaque dignissimos
accusantium necessitatibus distinctio pariatur. Recusandae,
quibusdam quasi.
</p>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</article>
</div>
</section>
<section>
<h2>Lorem ipsum dolor sit amet.</h2>
<div class="main-container-2">
<article class="article-2">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia,
hic illo. Temporibus, reprehenderit consequuntur quis quam tempora
perferendis est quo minus dolores officiis id fugiat enim aliquam
eligendi. Odit voluptas eligendi quis itaque culpa expedita et
repudiandae voluptate, neque voluptates modi veritatis dolore
quibusdam pariatur? Enim accusantium eaque nulla inventore quia
laboriosam et ea maxime necessitatibus? Id pariatur recusandae
consequatur dolorum sed. Cumque itaque accusantium ut, placeat
quibusdam illo commodi molestiae magnam impedit similique dolores
inventore nesciunt mollitia eaque? Quam inventore similique fugit
deserunt, quia quasi<br /><br />
tempora ullam totam dolores ex voluptate maiores tempore, beatae
maxime sapiente, reiciendis odit eos voluptas labore et laboriosam
obcaecati. Sit quam quis itaque nesciunt sint eum autem,
repudiandae omnis dolor tempora excepturi perferendis dicta totam
dignissimos eos quibusdam eligendi minus temporibus perspiciatis
aspernatur soluta fugiat repellat natus! Facere temporibus
recusandae aliquid cupiditate repellendus beatae laborum in eius.
Quam, quia. Eos quisquam quaerat aperiam nisi est deserunt ullam
maiores natus omnis quae mollitia iure ipsam assumenda accusantium
laborum ipsum, labore, doloremque consectetur ab! Quibusdam aut,
voluptate amet eveniet corporis vero alias voluptates nisi
commodi, distinctio ipsum ex! Ipsam pariatur et modi voluptatem
natus quisquam, quidem veniam numquam blanditiis nisi
<a class="link" href="#">tenetur repudiandae</a> amet omnis ut
maxime?
</p>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</article>
<aside>
<h3>Lorem, ipsum dolor.</h3>
<div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Numquam deserunt amet dicta molestias recusandae sapiente iste
itaque nisi, omnis beatae, molestiae reprehenderit quasi id,
minima exercitationem velit? Quas molestias, fugit tempore,
atque id reprehenderit, veniam ut quia nihil aut eum corrupti
soluta tenetur.<br /><br />
Dicta reprehenderit impedit quam labore illum, incidunt
cupiditate laborum nisi modi eligendi quis similique laboriosam
deserunt quia distinctio eius minus quae saepe nihil aut ut
debitis! Veritatis ipsam voluptate voluptatum, praesentium
fugiat facilis architecto distinctio optio pariatur assumenda?
Quas quo harum autem ea molestiae similique aspernatur, ducimus
dignissimos repellat iste magni sed odit a quasi architecto
consequuntur?
</p>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</div>
</aside>
</div>
</section>
<section>
<h4>About.</h4>
<div class="about">
<p>
<strong
>Making origami is fun for me. Japanese paper crafts include
origami. Making origami is my go-to hobby in my free time, and I
learned how to do it on YouTube. In order to become a Fullstack
Web Developer at CodeYourFuture, I am now learning to code, thus I
spend the most of my everyday time studying computer
programming.</strong
><br /><br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nam
iste laudantium facere placeat fugit in aperiam quo veritatis
tempora omnis et beatae facilis quibusdam fuga provident saepe,
laborum porro iusto natus tenetur rem. Consectetur quo itaque nobis
repudiandae corrupti nesciunt eaque ipsum dolor ea magnam minus
eveniet rem iure reiciendis explicabo similique eligendi velit
deserunt ex, temporibus labore accusamus doloribus quia quis. Earum
rerum obcaecati numquam dicta veritatis ab?
</p>
</div>
</section>
</main>
<footer class="footer">
<div class="go">
<a href="#top">Home</a>
</div>
<div>
<a href="https://github.com/"><i class="fa fa-github" style="font-size: 48px"></i></a>
</div>
<div>
<a href="https://www.linkedin.com/feed"><i class="fa fa-linkedin-square" style="font-size: 48px"></i></a>
</div>
<div class="h5">
<h5>Created by Dawit Abraha</h5>
</div>
</footer>
</body>
</html>