-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (139 loc) · 8.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/style.css">
<title>CatBox Landing Site</title>
</head>
<body>
<div class="navbar">
<div class="container flex">
<a href="index.html">
<div class="flex logo gap-4">
<img src="./images/cat.svg"/>
<h1>
CoolCat Box
</h1>
</div>
</a>
<nav class="nav-links">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="subscribe.html">Subscribe</a></li>
</ul>
</nav>
</div>
</div>
<main class="content">
<section class="showcase">
<div class="container flex gap-8">
<div class="showcase-text">
<h1 class="text-cap text-center">A monthly cat subscription box filled with fun unique toys and goodies</h1>
<div class="mt-8 text-center flex gap-4">
<button class="btn btn-outline hover-expand">Get Started</button>
<button class="btn btn-outline hover-expand">Give As Gift</button>
</div>
</div>
<div class="flex">
<img class="w-50" src="./images/box-open-heart.svg"/>
<img class="w-50" src="./images/black-cat.svg" />
</div>
</div>
</section>
<section class="quick-info">
<div class="container">
<h3 class="info-header text-center">What's in a CoolCat Box?</h3>
<p class="text-center lead">CoolCat Box is a subscription box just for cats, shipping fun toys and yummy treats to your doorstep every month, or bi-monthly. Each item is thoughtfully selected or designed to win over the most finicky feline.</p>
<div class="grid grid-3 text-center my-4">
<div>
<img src="./images/toy.svg"/>
<h3 class="text-dark mt-4">Cat Toys</h3>
<p>
Our whole team of cat lovers lends a paw in our creative process, brainstorming adorable monthly box themes and one-of-a-kind toy ideas with customer feedback in mind. Past meowbox goodies have included silvervine, catnip, crinkle, feathers, strings and bells.
</p>
</div>
<div>
<img src="./images/cat-food.svg"/>
<h3 class="text-dark mt-4">Cat Treats</h3>
<p>
All edible items in your meowbox are tasty, healthy, and made in the US or Canada. Some of our treats are even made exclusively for meowbox subscribers. As doting cat <span class="line-through">owners</span> servants ourselves, we would only give your kitties what we would give ours.
</p>
</div>
<div>
<img src="./images/box.svg"/>
<h3 class="text-dark mt-4">A Box!</h3>
<p>
Despite all the fun toys and treats, the box itself may become your cat's favourite part! In a month or two, kitty will come to recognize and love—even expect—this special box. Rumours suggest that this behaviour is spurred by a magical kitty potion that we spray on the box. We neither confirm nor deny.
</p>
</div>
</div>
</div>
</section>
<section class="charity">
<div class="container text-center">
<h3 class="md">One Box Can Make The Difference</h3>
<p class="lead">
We believe that if we have the opportunity to give, then we should share what we have. This philosophy comes packaged neatly within the heart of every meowbox. For every meowbox you buy, we give a can of food (or monetary equivalent) to a shelter cat on your behalf.
</p>
</div>
</section>
<section class="cat-customers">
<div class="container text-center">
<h3 class="md">See Who's Hooked On CoolCat Box</h3>
<span>We have the cutest customers around. Here's puurroof.</span>
<div class="grid grid-3 mt-8 photo-grid">
<a class="hover-expand" href="https://unsplash.com/photos/PU08MmIr6Bk" target="_blank"><img alt="-" itemprop="image" src="https://images.unsplash.com/photo-1601060519512-71d250f75767?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=675&q=80"></a>
<a class="hover-expand" href="https://unsplash.com/photos/USOrs07uyfM" target="_blank"><img alt="-" itemprop="image" src="https://images.unsplash.com/photo-1585126222394-4b131ac29f10?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=634&q=80"></a>
<a class="hover-expand" href="https://unsplash.com/photos/5WTqrImsEg4" target="_blank"><img alt="-" itemprop="image" src="https://images.unsplash.com/photo-1605463999658-af2a040672a1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80"></a>
<a class="hover-expand" href="https://unsplash.com/photos/5dvyy89AXdg" target="_blank"><img alt="-" itemprop="image" src="https://images.unsplash.com/photo-1581848069322-2af0bc2deab8?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80"></a>
<a class="hover-expand" href="https://unsplash.com/photos/AtYvCtDcwn0" target="_blank"><img alt="-" itemprop="image" src="https://images.unsplash.com/photo-1576120634744-ee3b635e950e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80"></a>
<a class="hover-expand" href="https://unsplash.com/photos/ZiSiCLW_SpM" target="_blank"><img alt="-" itemprop="image" src="https://images.unsplash.com/photo-1603691602859-e778258aaefb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80"></a>
</div>
</div>
</section>
<section class="subscribe-now">
<div class="container text-center flex gap-8">
<h3>With plans as low as $19.99 per month, what are you waiting for?</h3>
<button class="btn btn-outline lead hover-opacity">Subscribe Now</button>
</div>
</section>
<section class="newsletter">
<div class="container text-center">
<h2 class="lg">Join Our Newsletter</h2>
<p>Sign up for news, discounts, & more!</p>
<form class="flex gap-4 mt-8">
<input class="text-input sm" type="email" placeholder="Email..." required/>
<button class="btn sm hover-opacity">Subscribe</button>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="flex space-between">
<div class="flex flex-col">
<h3>CoolCat Box</h3>
<h4>Copyright © 2020</h4>
</div>
<div class="flex gap-4">
<a class="underline" href="index.html">Home</a>
<a class="underline" href="subscribe.html">Subscribe</a>
</div>
<div class="flex gap-4">
<a class="hover-expand" href="#"><i class="fab fa-facebook fa-2x"></i></a>
<a class="hover-expand" href="#"><i class="fab fa-twitter fa-2x"></i></a>
<a class="hover-expand" href="#"><i class="fab fa-instagram fa-2x"></i></a>
<a class="hover-expand" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
<a class="hover-expand" href="#"><i class="fab fa-youtube fa-2x"></i></a>
</div>
</div>
<p class="sm opacity-50">
Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</p>
</div>
</footer>
</body>
</html>