forked from CUNYTechPrep/bootstrap-lab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (77 loc) · 3.75 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet" >
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400&display=swap" rel="stylesheet">
<title>Cookie Store</title>
</head>
<body>
<div class="container justify-content-center">
<div class="jumbotron background">
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="text-background">
<h1 class="display-4">Cookie Store</h1>
<p class="lead">Buy our awesome cookies. All proceeds go to charity!</p>
</div>
</div>
</div>
<h2 class="d-flex flex-column align-items-center">The Cookies</h2>
<div class="row shadow justify-content-center">
<div class="card flex-lg-column col-lg-3 col-md-12 flex-sm-row justify-content-center">
<div class="card-body">
<h3 class="card-title">Thin Mint Cookies <img id="new" src="img/new.png"/></h3>
<p class="card-text">Tasty mint chocolate cookies</p>
</div>
<img class="img-fluid" src="img/mint.png">
</div>
<div class="card flex-lg-column col-lg-3 col-md-12 flex-sm-row justify-content-center" >
<div class="card-body order-sm-2 order-sm-2">
<h3 class="card-title">Peanut Butter Cookies</h3>
<p class="card-text">Yummy peanut buttery goodness!</p>
</div>
<img class="img-fluid order-lg-2 order-sm-1" src="img/peanut.png">
</div>
<div class="card flex-lg-column col-lg-3 col-md-12 flex-sm-row justify-content-center" >
<div class="card-body">
<h3 class="card-title">Short Bread Cookies</h3>
<p class="card-text">Santa's favorite classic.</p>
</div>
<img class="img-fluid" src="img/shortbread.png">
</div>
<div class="card flex-lg-column col-lg-3 col-md-12 flex-sm-row justify-content-center">
<div class="card-body order-sm-2 order-sm-2">
<h3 class="card-title">Smore's Cookies</h3>
<p class="card-text">Camp fire favorite!</p>
</div>
<img class="img-fluid order-lg-2 order-sm-1" src="img/smores.png">
</div>
</div>
<div class="jumbotron shadow row d-flex about">
<div class="d-flex justify-content-center flex-column align-items-center">
<img class="img-fluid d-lg-block cm" src="img/cmonster.png" />
</div>
<div class="col p-5 d-flex justify-content-center flex-column align-items-center">
<h2 class="display-3">About us</h2>
<p class="align-items-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row shadow d-flex justify-content-center flex-column align-items-center contact">
<h2 class="display-3">Contact us</h2>
<p class="lead p-0">
100 Broadway Avenue,<br>
New York, NY 10001 <br>
(212) 555-1234
</p>
</div>
</div>
</body>
</html>