StoreFrontProject/storefront.html at main · ekkaiden/StoreFrontProject · GitHub

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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BBB.com</title>
    <link rel="stylesheet" href="storefront.css">
</head>
<body>
    <header>
        <div class="Wrapper">
            <!--Top Help Bar-->
            <nav id="helpbar">
                <ul>
                    <li><a href="#"><img src="img/google-icon-20 x 20.png" alt="Cart" border="0" class="topicon"/></a></li>
                    <li><a href="#"><img src="img/facebook-icon-20 x 20.png" alt="facebook" border="0" class="topicon"/></a></li>
                    <li class="acctNav"><a href="#" class="active">Login</a></li>
                    <li><input type="search" id="search" placeholder="Search"></li>
                    <li><a href="#"><img src="img/Add-Cart-icon-20 x 20.png" alt="Cart" border="0" class="topicon"/></a></li>
                </ul>
            </nav>
            <div class="title">
            <h1>Bob's</h1>
            <h2>Bouquet Bonanza</h2>
            </div>
        </div>
    </header>
    <section id="infodump">
        <!--Middle Column-->
        <div class="Wrapper">
            <p>Aenean nulla magna, porta non bibendum eu, faucibus eget elit. In hac habitasse platea dictumst. Nunc vitae augue non dolor euismod euismod nec id magna. Proin quam mi, rutrum non diam sit amet, fermentum malesuada nisi. Cras condimentum ligula ligula, eget vestibulum eros facilisis at. Nunc urna massa, dignissim id tristique eu, volutpat quis magna. Quisque rutrum mauris non erat pulvinar sodales. Fusce quis finibus neque, vitae finibus odio. Suspendisse potenti.</p>
            <p>Aenean nulla magna, porta non bibendum eu, faucibus eget elit. In hac habitasse platea dictumst. Nunc vitae augue non dolor euismod euismod nec id magna. Proin quam mi, rutrum non diam sit amet, fermentum malesuada nisi. Cras condimentum ligula ligula, eget vestibulum eros facilisis at. Nunc urna massa, dignissim id tristique eu, volutpat quis magna. Quisque rutrum mauris non erat pulvinar sodales. Fusce quis finibus neque, vitae finibus odio. Suspendisse potenti.</p>
            <p>Aenean nulla magna, porta non bibendum eu, faucibus eget elit. In hac habitasse platea dictumst. Nunc vitae augue non dolor euismod euismod nec id magna. Proin quam mi, rutrum non diam sit amet, fermentum malesuada nisi. Cras condimentum ligula ligula, eget vestibulum eros facilisis at. Nunc urna massa, dignissim id tristique eu, volutpat quis magna. Quisque rutrum mauris non erat pulvinar sodales. Fusce quis finibus neque, vitae finibus odio. Suspendisse potenti.</p>
            <p>Aenean nulla magna, porta non bibendum eu, faucibus eget elit. In hac habitasse platea dictumst. Nunc vitae augue non dolor euismod euismod nec id magna. Proin quam mi, rutrum non diam sit amet, fermentum malesuada nisi. Cras condimentum ligula ligula, eget vestibulum eros facilisis at. Nunc urna massa, dignissim id tristique eu, volutpat quis magna. Quisque rutrum mauris non erat pulvinar sodales. Fusce quis finibus neque, vitae finibus odio. Suspendisse potenti.</p>
        </div>
    </section>
    <!--Available Flowers-->
    <section id="flowerimgs" class="Wrapper">
        <h3>Available Bouquets</h3>
    <div class="portfolio">
        <img src="img/pinkrose-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>Pink Rose Bouquet</h4>
        <p>A hand-picked bouquet of pink roses.</p>
        <button>Add to Cart</button>
    </div>
    <div class="portfolio">
        <img src="img/lilacbasket-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>Lilac Basket</h4>
        <p>A basket of beautiful lilacs.</p>
        <button>Add to Cart</button>
    </div>
    <div class="portfolio">
        <img src="img/poppy-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>Poppy Bouquet</h4>
        <p>A bouquet of poppies.</p>
        <button>Add to Cart</button>
    </div>
    <div class="portfolio">
        <img src="img/purpletulip-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>Purple Tulip Bouquet</h4>
        <p>A bouquet of stunning purple tulips.</p>
        <button>Add to Cart</button>
    </div>
    <div class="portfolio">
        <img src="img/RedFlowerBouquet-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>Red Rose Bouquet</h4>
        <p>A bouquet of rich red roses.</p>
        <button>Add to Cart</button>
    </div>
    <div class="portfolio">
        <img src="img/yellowrose-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>Yellow Rose Bouquet</h4>
        <p>A bouquet of yellow and red roses.</p>
        <button>Add to Cart</button>
    </div>
    <div class="portfolio">
        <img src="img/redandwhiterose-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>White and Red Rose Bouquet</h4>
        <p>A bouquet containing both red and white roses.</p>
        <button>Add to Cart</button>
    </div>
    <div class="portfolio">
        <img src="img/roseandlily-200 x 200.jpg" class="flowertype" alt="flower"/>
        <h4>Rose and Lily Bouquet</h4>
        <p>A bouquet of yellow lillies and red roses.</p>
        <button>Add to Cart</button>
    </div>
    </section>
    <footer>
        <!--Footer-->
        <ul id="Footer">
            <li><a href="#">Problems? Contact Us</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </footer>
</body>
</html>