forked from KansasCityWomeninTechnology/CSSCompilerPractice
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
86 lines (86 loc) · 4.95 KB
/
index.html
File metadata and controls
86 lines (86 loc) · 4.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LadyDev Floral</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<nav class="navbar">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">Produts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="main">
<div class="hero" id="about">
<div class="head">
<h1>LadyDev Flower Shop</h1>
<h2>Making development more beautiful every day!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, similique, in eaque, repellendus expedita quod quasi cupiditate assumenda id, doloribus iste neque impedit dolore! Sunt ipsum dolorem voluptates error quos?</p>
</div>
</div>
<div class="flexbox">
<div class="products col-1">
<h2>Products</h2>
<ul class="products">
<li class="item">
<a href="#"><img src="assets/images/stock_flowers.jpg" alt=""></a>
<h3 class="head">Iris</h3>
<p>This is a description about the flower. It gives some floral information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda placeat delectus similique saepe, reiciendis aperiam eligendi distinctio atque a, repellendus recusandae expedita. Nisi odio laudantium numquam veritatis, tempora, rem quibusdam?</p>
</li>
<li class="item">
<a href="#"><img src="assets/images/peony.jpeg" alt=""></a>
<h3 class="head">Peony</h3>
<p>This is a description about the flower. It gives some floral information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda placeat delectus similique saepe, reiciendis aperiam eligendi distinctio atque a, repellendus recusandae expedita. Nisi odio laudantium numquam veritatis, tempora, rem quibusdam?</p>
</li>
<li class="item">
<a href="#"><img src="assets/images/tulip.jpg" alt=""></a>
<h3 class="head">Tulip</h3>
<p>This is a description about the flower. It gives some floral information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda placeat delectus similique saepe, reiciendis aperiam eligendi distinctio atque a, repellendus recusandae expedita. Nisi odio laudantium numquam veritatis, tempora, rem quibusdam?</p>
</li>
<li class="item">
<a href="#"><img src="assets/images/stock_flowers.jpg" alt=""></a>
<h3 class="head">Anemone</h3>
<p>This is a description about the flower. It gives some floral information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda placeat delectus similique saepe, reiciendis aperiam eligendi distinctio atque a, repellendus recusandae expedita. Nisi odio laudantium numquam veritatis, tempora, rem quibusdam?</p>
</li>
<li class="item">
<a href="#"><img src="assets/images/stock_flowers.jpg" alt=""></a>
<h3 class="head">Hydrangea</h3>
<p>This is a description about the flower. It gives some floral information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda placeat delectus similique saepe, reiciendis aperiam eligendi distinctio atque a, repellendus recusandae expedita. Nisi odio laudantium numquam veritatis, tempora, rem quibusdam?</p>
</li>
<li class="item">
<a href="#"><img src="assets/images/dahlia.jpg" alt=""></a>
<h3 class="head">Dahlia</h3>
<p>This is a description about the flower. It gives some floral information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda placeat delectus similique saepe, reiciendis aperiam eligendi distinctio atque a, repellendus recusandae expedita. Nisi odio laudantium numquam veritatis, tempora, rem quibusdam?</p>
</li>
<li class="item">
<a href="#"><img src="assets/images/stock_flowers.jpg" alt=""></a>
<h3 class="head">Ranunculus</h3>
<p>This is a description about the flower. It gives some floral information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda placeat delectus similique saepe, reiciendis aperiam eligendi distinctio atque a, repellendus recusandae expedita. Nisi odio laudantium numquam veritatis, tempora, rem quibusdam?</p>
</li>
</ul>
</div>
<div class="sidebar col-2">
<h2>Customer Favorites</h2>
<ol>
<li>Peony</li>
<li>Anemone</li>
<li>Tulip</li>
</ol>
</div>
</div>
</div>
<footer id="contact">
<p>© 2016 LadyDev Flower Shop</p>
<ul>
<li><a href="http://facebook.com/ladydevfloral"><img src="assets/images/fb.png" alt=""></a></li>
<li><a href="http://twitter.com/ladydevfloral"><img src="assets/images/twitter.png" alt=""></a></li>
<li><a href="http://instagram.com/ladydevfloral"><img src="assets/images/instagram.png" alt=""></a></li>
<li><a href="mailto:ladydevfloral@example.com"><img src="assets/images/email.png" alt=""></a></li>
</ul>
</footer>
</body>
</html>