forked from CodeYourFuture/HTML-CSS-Coursework-Week3
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
99 lines (91 loc) · 3.66 KB
/
index.html
File metadata and controls
99 lines (91 loc) · 3.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Add your markup here -->
<header class="header">
<div class="header_con">
<img class="header-logo" src="images/logo-cake.svg" alt="logo-cake">
<a id="menu" class="header_menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
</svg>
</a>
<div class="titel">
<h1 class="header_title">
The best cakes in town delivered to your door
</h1>
</div>
</div>
</header>
<nav id="drawer" class="nav">
<ul class="nav_list">
<li><a href="#">HOME</a></li>
<li><a href="#">CAKES</a></li>
<li><a href="#">ORDERIN</a></li>
<li><a href="#">LESSONS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</nav>
<main>
<section class="intro container">
<article class="article">
<h2>Welcome</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel erat commodo, rhoncus ipsum in, pulvinar odio. Quisque nec lectus magna. Ut a molestie magna. Aenean rutrum tortor eget dolor cursus tincidunt. Phasellus quam eros, interdum eget mi in,
eleifend congue felis. Cras id gravida felis, vitae mattis turpis. Sed sollicitudin hendrerit ipsum, eget viverra ex laoreet sed. Morbi eros ligula, feugiat at ullamcorper eget, placerat sed dolor. Sed porttitor, odio rutrum viverra
auctor, ligula quam elementum diam, pharetra vulputate orci nibh in sapien. Nam laoreet mauris a magna mollis mattis. Integer vestibulum et dui nec tincidunt. Morbi dolor nibh, blandit nec neque at, porttitor laoreet diam. Suspendisse
id lectus vitae ex ultrices maximus. Morbi mauris eros, sagittis vitae augue vel, fermentum commodo tellus. </p>
</article>
<div class="intro-image">
<img src="images/cake1.jpg" alt="welcome-intro" />
</div>
</section>
<section class="cakes container">
<div class="responsive">
<div class="gallery">
<img src="./images/cake2.jpg" alt="cake-img" />
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="./images/cake2.jpg" alt="cake-img" />
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="./images/cake2.jpg" alt="cake-img" />
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="./images/cake2.jpg" alt="cake-img" />
</div>
</div>
</section>
</main>
<footer class="container">
<div class="footer-divs">
<div class="foter-button">
First button
</div>
<div class="foter-button">
Second button
</div>
<div class="foter-button">
Third button
</div>
</div>
<div class="copyright">
©Ibrahim ISLEEM
</div>
</footer>
</body>
</html>