-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
142 lines (121 loc) · 6.33 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ruby's Cupcakes</title>
<link rel="stylesheet" href="style.css">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fonts -->
<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=Bitter:wght@900&family=Roboto&display=swap" rel="stylesheet">
<!-- favicon -->
<link rel="icon" href="images/Ruby's-favicon.ico">
</head>
<body>
<!-- NAV -->
<nav>
<span><a class="logo" href="index.html">Ruby's</a></span>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="cup-cakes.html">Cupcakes</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- NAV ENDS -->
<div class="container">
<!-- HEADER -->
<header class= "container1">
<div class= "left-header">
<h1 class="hollow-h1">Ruby's</h1>
<h1>Cupcakes</h1>
<p class ="p-description1">World famous and locally owned. We make the cupcakes of your dreams with the flavours of your childhood. Specializing in vegan cupcakes made with consciously sourced ingredients.</p>
<button class="header-button"><a class="white-text" href="about.html">About Us</a></button>
</div>
<div class="header-image">
<img class="oneRoundCupCake" src="./images/sara-cervera-bbyREWgpmnA-unsplash.jpg" alt="cupcakes with pink icing on white ceramic plate">
</div>
</header>
<!-- HEADER ENDS -->
<!-- MAIN -->
<main>
<!-- NEW FALL FLAVOUR -->
<div class ="container2">
<h2>New Fall Flavour</h2>
<div id="bigPreview">
<img class="roundedCupCake" src="./images/MapleChocolateDream.jpg"
alt="Bacon Chocolate Cupcake on white surface, with Maple Butter Frosting and caramel drizzle in brown capcake holder">
<h3>Maple
<br>
Chocolate
<br>
Dream
</h3>
<p class ="p-description2">Decadent chocolate cake, topped with a fluffy maple frosting, and drizzled in so much maple syrup goodness that it will make your pancakes jealous. Seriously.</p>
</div>
</div>
<!-- NEW FALL FLAVOUR ENDS -->
<!-- CROWD PLEASING TREATS -->
<div class="cupCakeContainer">
<header>
<h2 class="cupcakes-h2">Crowd Pleasing Treats</h2>
</header>
<!-- CUPCAKE CARDS -->
<div class="cupCakes">
<!-- CARD -->
<div class="cupCakeCard">
<img src="./images/ChocolateCaramelHi-Top.jpg" alt="Chocolate cupcake with caramel buttercream and Chocolate Shavings, on round white ceramic plate">
<div class="cupCakeCardDesc">
<p>Chocolate Caramel Hi-Top</p>
</div>
<div class="cupcake-shadow">
<p>This rich cake makes an impressive centrepiece for any summer tea party.</p>
</div>
</div>
<!-- CARD ENDS -->
<!-- CARD -->
<div class="cupCakeCard">
<img src="./images/ChocolateButterbeer.jpg" alt="Bacon Chocolate Cupcake with Maple Butter Frosting and caramel drizzle">
<div class="cupCakeCardDesc">
<p>Chocolate Butterbeer</p>
</div>
<div class="cupcake-shadow">
<p>Makes for a perfect snack after a long and busy day.</p>
</div>
</div>
<!-- CARD ENDS -->
<!-- CARD -->
<div class="cupCakeCard">
<img src="./images/MintChocolateMajesty.jpg" alt="Chocolate Cupcake with mint frosting and dark round chocolate chip in black capcake holder">
<div class="cupCakeCardDesc">
<p>Mint Chocolate Majesty</p>
</div>
<div class="cupcake-shadow">
<p>A very delicious gift for your significant other.</p>
</div>
</div>
<!-- CARD ENDS -->
</div>
<!-- CUPCAKE CARDS ENDS -->
<button><a class="white-text" href="cup-cakes.html">More Cupcakes</a></button>
</div>
<!-- CROWD PLEASING TREATS ENDS -->
</main>
</div>
<!-- MAIN ENDS -->
<!-- FOOTER -->
<div class="footer">
<a class="footer-img-fb" href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-square fa-3x"></i></a>
<a class="footer-img-insta" href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram-square fa-3x"></i></a>
<a class="footer-img-twitter" href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter-square fa-3x"></i></a>
<span class="copyright">©
<script type="text/javascript">
document.write(new Date().getFullYear());
</script>
, Ruby's Cupcakes</span>
</div>
<!-- FOOTER ENDS -->
</body>
</html>