-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (133 loc) · 5.93 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="media/logo-upscaled-transparent.png">
<title>Sweet Shoppe</title>
</head>
<body>
<div class="navbar-container">
<div class="navbar">
<div class="link-container">
<a href="#landing">Home</a>
<a href="#about">About Us</a>
<a href="#sweets">Flavors</a>
<a href="#contact">Contact</a>
</div>
</div>
</div>
<section id="landing">
<div class="text-container">
<h1>Sweet Shoppe</h1>
<p>3146 Mission Blvd San Diego, CA 92109</p>
</div>
<a class="scroll-down" href="#sweets">
<h3>See our flavors!</h3>
<img class="scroll-down-icon" src="media/down-long-solid.svg">
</a>
</section>
<section id="about">
<div class="left-side">
<img src="media/cone-in-hand.jpg">
</div>
<div class="right-side">
<h1>About Us:</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, molestiae iure maxime cum nemo reprehenderit sed vitae architecto. Voluptatum nihil hic molestiae quas magnam laboriosam, est atque tempora quam reprehenderit! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident dignissimos saepe est vero soluta quos! Illum, quod dicta, amet modi veniam quia delectus eum velit rem voluptatem harum, culpa doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque accusamus animi alias delectus odit obcaecati, consequuntur, nisi sint quidem, totam ducimus aut perspiciatis. Numquam obcaecati reprehenderit assumenda expedita aliquam itaque? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio aliquid similique voluptate perferendis, minus laboriosam ipsam, illum quisquam porro ullam suscipit neque, tenetur aliquam quia distinctio doloremque iste architecto dolorum.</p>
</div>
</section>
<section id="sweets">
<h1>Ice Cream:</h1>
<div class="flavor-container">
<div class="flavor">
<img src="media/birthday-cake.jpg">
<p>Birthday Cake</p>
</div>
<div class="flavor">
<img src="media/butter-pecan.jpg">
<p>Butter Pecan</p>
</div>
<div class="flavor">
<img src="media/chocolate.jpg">
<p>Chocolate</p>
</div>
<div class="flavor">
<img src="media/chocolate-chip.jpg">
<p>Chocolate Chip</p>
</div>
<div class="flavor">
<img src="media/chocolate-chip-cookie-dough.jpg">
<p>Chocolate Chip Cookie Dough</p>
</div>
<div class="flavor">
<img src="media/chocolate-malted-crunch.jpg">
<p>Chocolate Malted Crunch</p>
</div>
<div class="flavor">
<img src="media/cookies-n-cream.jpg">
<p>Cookies 'n' Cream</p>
</div>
<div class="flavor">
<img src="media/mint-chocolate-chip.jpg">
<p>Mint Chocolate Chip</p>
</div>
<div class="flavor">
<img src="media/mocha-almond-fudge.jpg">
<p>Mocha Almond Fudge</p>
</div>
<div class="flavor">
<img src="media/pistachio-almond.jpg">
<p>Pistachio Almond</p>
</div>
<div class="flavor">
<img src="media/pralines-and-cream.jpg">
<p>Pralines & Cream</p>
</div>
<div class="flavor">
<img src="media/rainbow-sherbet.jpg">
<p>Rainbow Sherbet</p>
</div>
<div class="flavor">
<img src="media/rocky-road.jpg">
<p>Rocky Road</p>
</div>
<div class="flavor">
<img src="media/strawberry-cheesecake.jpg">
<p>Strawberry Cheesecake</p>
</div>
<div class="flavor">
<img src="media/strawberry.jpg">
<p>Strawberry</p>
</div>
<div class="flavor">
<img src="media/vanilla.jpg">
<p>Vanilla</p>
</div>
</div>
</section>
<section id="contact">
<div class="contact-container">
<h3>Contact Form:</h3>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Your Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Send</button>
</div>
</section>
<footer>
<div class="left-side-footer">
<a href="https://www.facebook.com/SweetShoppeBP">Facebook</a>
<a href="https://www.yelp.com/biz/sweet-shoppe-san-diego">Yelp</a>
</div>
<div class="middle-footer">
<img src="media/logo-upscaled-transparent.png">
</div>
<div class="right-side-footer">
<p>3146 Mission Blvd <br> San Diego, CA 92109</p>
<p>(858) 488-1549</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>