StoreFront/StoreApp.html at main · jcchildr/StoreFront · 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
<!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>STOREFRONT</title>
    <link rel="stylesheet" type="text/css" href="StoreApp.css">
</head>
<body>
    <header>
        <div class="contentWrapper">
        <!--Login menu-->
        <nav id="utilityMenu">
            <ul>
                <li><a href="#"><img src="img/facebook_20.png" alt="Facebook" class="socialIcon" /></a></li>
                <li><a href="#"><img src="img/twitter_20.png" alt="Twitter" class="socialIcon" /></a></li>
                <li><a href="#"><img src="img/google_plus_20.png" alt="Google Plus" class="socialIcon" /></a></li>
                <li><a href="#" class="active">Sign In</a></li>
                <li><a href="#">My Cart</a></li>
                <li><input type="search" id="search" placeholder="Search"></li>
            </ul>
        </nav>
        <!--Navigation Menu-->
        <h1>Roots and Blooms</h1>
    <h2>Seed Market</h2>
    <nav>
        <ul>
            <li><a href="#">Shop Seeds</a></li>
            <li><a href="#">Growing Tips</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    </div>
    </header>
    <!-- Intro Bar-->
    <section id="topBar">
        <h1>Your Garden Will Thank You</h1>
    </section>
    <section id="main">
        <!--Main Section-->
        <div class="panel">
            <img src="img/FOXGLOVE.jpg" class="flowerType" alt="flower" width="230" height="170"/>
            <h2>Foxglove</h2>
            <p>Tall and stately foxglove plants (Digitalis purpurea) have long been included in garden areas where vertical interest and lovely flowers are desired.
                 Foxglove flowers grow on stems which may reach 6 feet in height, depending on variety.</p>
            <button>Add To Cart</button>
        </div>
        <div class="panel">
            <img src="img/COSMOS.jpg" class="flowerType" alt="flower" width="230" height="170" />
            <h2>Cosmo</h2>
            <p>“Cosmos” is the Greek word for harmony or ordered universe and is directly opposite of “chaos,” which is how one might describe the riotous explosion
                of color these attractive flowers bring to the home landscape.</p>
            <button>Add To Cart</button>
        </div>
        <div class="panel">
            <img src="img/ASTERS.jpg" class="flowerType" alt="flower" width="230" height="170" />
            <h2>Aster</h2>
            <p>The name Aster comes from the Ancient Greek word ἀστήρ (astḗr), meaning "star", referring to the shape of the flower head. Many species and a variety of hybrids and varieties
                are popular as garden plants because of their attractive and colourful flowers.</p>
            <button>Add To Cart</button>
        </div>
        <div class="panel">
            <img src="img/DAHLIA.jpg" class="flowerType" alt="flower" width="230" height="170"/>
            <h2>Dahlia</h2>
            <p> Dahlia is a genus of bushy, tuberous, herbaceous perennial plants native to Mexico and Central America.
                Its garden relatives thus include the sunflower, daisy, chrysanthemum, and zinnia. </p>
            <button>Add To Cart</button>
        </div>
        <div class="panel">
            <img src="img/LILY.jpg"  class="flowerType" alt="flower" width="230" height="170"/>
            <h2>Lily</h2>
            <p>Lilium (members of which are true lilies) is a genus of herbaceous flowering plants growing from bulbs, all with large prominent flowers. Lilies are a group of
                flowering plants which are important in culture and literature in much of the world.</p>
            <button>Add To Cart</button>
        </div>
    </section>
    <div class="clear"></div>
    <footer>
        <!--Legal items, navigational items-->
        <span>&copy;2021</span>
     <ul id="menuFooter">
         <li><a href="#">Sitemap</a></li>
         <li><a href="#">Privacy Policy</a></li>
         <li><a href="#">Terms of Use</a></li>
         <li>Website by Jacob</li>
     </ul>
    </footer>
</body>
</html>