Skip to content

Commit 88f7344

Browse files
codewithchucodewithchu
committed
05 - Spacing and Position
1 parent bd877fb commit 88f7344

File tree

8 files changed

+281
-25
lines changed

8 files changed

+281
-25
lines changed

‎public/btn.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<link rel="stylesheet" href="./css/tailwind.css" />
6+
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
7+
<title>Boom</title>
8+
</head>
9+
<body class="flex w-screen h-screen justify-center items-center bg-gray-400">
10+
<div>
11+
<a class="btn bg-white text-black border-white mr-2" href="#">Learn More</a>
12+
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
13+
</div>
14+
</body>
15+
</html>

‎public/card.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<link rel="stylesheet" href="./css/tailwind.css" />
6+
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
7+
<title>Boom</title>
8+
</head>
9+
<body>
10+
<main>
11+
<section class="bg-gray-200 pb-6">
12+
<!--card-->
13+
<div class="pb-6">
14+
<!--card Image-->
15+
<div>
16+
<img src="./img/boom-headphone-pro-black.jpg" alt="headphone black" />
17+
</div>
18+
<!--card Copy-->
19+
<div class="bg-white p-12 mx-4 -mt-5 relative rounded">
20+
<h2 class="text-lg text-red-600 uppercase">Headphone Pro</h2>
21+
<h3 class="text-2xl leading-none mb-2">Music to your ears</h3>
22+
<p class="mb-10">Listen in style! Your everyday headphone in many assorted colours.</p>
23+
<div>
24+
<a class="btn bg-white text-black border-white mr-2" href="#">Learn More</a>
25+
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
26+
</div>
27+
</div>
28+
</div>
29+
30+
<!--card-->
31+
<div>
32+
<!--card Image-->
33+
<div>
34+
<img src="./img/boom-wireless-pro.jpg" alt="Pods pro" />
35+
</div>
36+
<!--card Copy-->
37+
<div class="bg-white p-12 mx-4 -mt-5 relative rounded">
38+
<h2 class="text-lg text-red-600 uppercase">Pods Pro</h2>
39+
<h3 class="text-2xl leading-none mb-2">BOOM comes in small package</h3>
40+
<p class="mb-10">Go anywhere and everywhere with your Pods. Listen all day long without worry.</p>
41+
<div>
42+
<a class="btn bg-white text-black border-white mr-2" href="#">Learn More</a>
43+
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
44+
</div>
45+
</div>
46+
</div>
47+
</section>
48+
</main>
49+
</body>
50+
</html>

‎public/css/tailwind.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21268,6 +21268,12 @@ a {
2126821268
.btn {
2126921269
text-transform: uppercase;
2127021270
font-size: 0.875rem;
21271+
padding-left: 1rem;
21272+
padding-right: 1rem;
21273+
padding-top: 0.5rem;
21274+
padding-bottom: 0.5rem;
21275+
border-radius: 9999px;
21276+
border-width: 1px;
2127121277
}
2127221278

2127321279
@media (min-width: 640px){

‎public/footer.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<link rel="stylesheet" href="./css/tailwind.css" />
6+
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
7+
<title>Boom</title>
8+
</head>
9+
<body>
10+
<footer class="bg-black text-gray-400 text-center p-12">
11+
<div class="container mx-auto">
12+
<div class="mb-12">
13+
<ul>
14+
<li>
15+
<h4 class="text-2xl">
16+
<span class="hidden"> Boom </span>
17+
<svg xmlns="http://www.w3.org/2000/svg" version="1" class="h-8" viewBox="0 0 60 25">
18+
<g fill="currentColor">
19+
<path
20+
d="M29.18 7.5c-2.76 0-4.99 2.1-4.99 5s2.22 5 4.99 5 5-2.1 5-5-2.24-5-5-5zm0 7.72c-1.55 0-2.58-1.11-2.58-2.72 0-1.62 1.03-2.72 2.58-2.72 1.57 0 2.6 1.1 2.6 2.72 0 1.61-1.03 2.72-2.6 2.72zM40.94 7.5c-2.76 0-4.99 2.1-4.99 5s2.22 5 4.99 5 5-2.1 5-5-2.24-5-5-5zm0 7.72c-1.55 0-2.58-1.11-2.58-2.72 0-1.62 1.03-2.72 2.58-2.72 1.57 0 2.6 1.1 2.6 2.72-.01 1.61-1.04 2.72-2.6 2.72zM55.33 7.69l-1.8 2.91c-.7 1.14-.81 1.39-.82 1.39h-.01c-.01 0-.12-.25-.82-1.39l-1.8-2.91H47.9v9.62h2.27v-2.35c0-2.28-.08-3.41-.07-3.41h.01c.01 0 .78 1.32.87 1.46l1.12 1.92h1.2l1.13-1.92c.08-.14.85-1.46.86-1.46h.01c.01 0-.07 1.13-.07 3.41v2.35h2.27V7.69h-2.17zM14.68 12.36c0-1.29-.57-1.39-1.39-1.39-.77 0-1.92.82-2.78 1.75v4.34c4.03-2.9 4.17-4.5 4.17-4.7zM2.5 12.5a10 10 0 005.23 8.79V3.71C4.61 5.4 2.5 8.71 2.5 12.5z"
21+
/>
22+
<path
23+
d="M12.5 2.5c-.68 0-1.35.07-1.99.2v6.42c.85-.54 1.81-.93 2.78-.93 3.18 0 4.17 2.21 4.17 4.17 0 2.55-2.76 5.67-8.98 9.3 1.23.54 2.59.85 4.02.85 5.52 0 10-4.48 10-10 0-5.53-4.48-10.01-10-10.01z"
24+
/>
25+
</g>
26+
</svg>
27+
</h4>
28+
</li>
29+
</ul>
30+
<ul>
31+
<li>
32+
<h4 class="text-2xl">Product</h4>
33+
</li>
34+
<li><a href="#">Headphones</a></li>
35+
<li><a href="#">Pods</a></li>
36+
</ul>
37+
<ul>
38+
<li>
39+
<h4 class="text-2xl">Company</h4>
40+
</li>
41+
<li><a href="#">About</a></li>
42+
<li><a href="#">Careers</a></li>
43+
</ul>
44+
<ul>
45+
<li>
46+
<h4 class="text-2xl">Locations</h4>
47+
</li>
48+
<li><a href="#">Canada</a></li>
49+
<li><a href="#">US</a></li>
50+
</ul>
51+
<ul>
52+
<li>
53+
<h4 class="text-2xl">Contact</h4>
54+
</li>
55+
<li><a href="#">Email</a></li>
56+
<li><a href="#">Phone</a></li>
57+
</ul>
58+
<ul>
59+
<li>
60+
<h4 class="text-2xl">Follow Us</h4>
61+
</li>
62+
<li>
63+
<a href="#" target="_blank" title="follow"
64+
><span class="hidden">facebook</span>
65+
<svg version="1" class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
66+
<path
67+
fill="currentColor"
68+
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
69+
></path>
70+
</svg>
71+
</a>
72+
<a href="#" target="_blank" title="follow"
73+
><span class="hidden">instagram</span>
74+
<svg version="1" class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
75+
<path
76+
fill="currentColor"
77+
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
78+
></path>
79+
</svg>
80+
</a>
81+
<a href="#" target="_blank" title="follow"
82+
><span class="hidden">twitter</span>
83+
<svg version="1" class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
84+
<path
85+
fill="currentColor"
86+
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
87+
></path>
88+
</svg>
89+
</a>
90+
</li>
91+
</ul>
92+
</div>
93+
<p class="text-2xs">
94+
<span> <a href="#">Terms of Use</a> | <a href="#">Privacy</a> | <a href="#">Shipping</a> | </span>
95+
<span>Copyright &copy; 2020 BOOM | Design and Developed by <a href="#" target="_blank" title="CodeWithChu">CodeWithChu</a> </span>
96+
</p>
97+
</div>
98+
</footer>
99+
</body>
100+
</html>

‎public/header.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<link rel="stylesheet" href="./css/tailwind.css" />
6+
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
7+
<title>Boom</title>
8+
</head>
9+
<body>
10+
<header class="bg-black text-white w-full">
11+
<nav id="mainNav" class="px-8 py-2">
12+
<div>
13+
<h1>
14+
<a href="#">
15+
<span class="hidden">Boom</span>
16+
<svg xmlns="http://www.w3.org/2000/svg" version="1" class="h-8" viewBox="0 0 60 25">
17+
<g fill="currentColor">
18+
<path
19+
d="M29.18 7.5c-2.76 0-4.99 2.1-4.99 5s2.22 5 4.99 5 5-2.1 5-5-2.24-5-5-5zm0 7.72c-1.55 0-2.58-1.11-2.58-2.72 0-1.62 1.03-2.72 2.58-2.72 1.57 0 2.6 1.1 2.6 2.72 0 1.61-1.03 2.72-2.6 2.72zM40.94 7.5c-2.76 0-4.99 2.1-4.99 5s2.22 5 4.99 5 5-2.1 5-5-2.24-5-5-5zm0 7.72c-1.55 0-2.58-1.11-2.58-2.72 0-1.62 1.03-2.72 2.58-2.72 1.57 0 2.6 1.1 2.6 2.72-.01 1.61-1.04 2.72-2.6 2.72zM55.33 7.69l-1.8 2.91c-.7 1.14-.81 1.39-.82 1.39h-.01c-.01 0-.12-.25-.82-1.39l-1.8-2.91H47.9v9.62h2.27v-2.35c0-2.28-.08-3.41-.07-3.41h.01c.01 0 .78 1.32.87 1.46l1.12 1.92h1.2l1.13-1.92c.08-.14.85-1.46.86-1.46h.01c.01 0-.07 1.13-.07 3.41v2.35h2.27V7.69h-2.17zM14.68 12.36c0-1.29-.57-1.39-1.39-1.39-.77 0-1.92.82-2.78 1.75v4.34c4.03-2.9 4.17-4.5 4.17-4.7zM2.5 12.5a10 10 0 005.23 8.79V3.71C4.61 5.4 2.5 8.71 2.5 12.5z"
20+
/>
21+
<path
22+
d="M12.5 2.5c-.68 0-1.35.07-1.99.2v6.42c.85-.54 1.81-.93 2.78-.93 3.18 0 4.17 2.21 4.17 4.17 0 2.55-2.76 5.67-8.98 9.3 1.23.54 2.59.85 4.02.85 5.52 0 10-4.48 10-10 0-5.53-4.48-10.01-10-10.01z"
23+
/>
24+
</g>
25+
</svg>
26+
</a>
27+
</h1>
28+
<a href="#">
29+
<span class="hidden">mobile menu</span>
30+
<svg class="h-4" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
31+
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
32+
</svg>
33+
<svg class="h-4" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
34+
<path
35+
fill="currentColor"
36+
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
37+
/>
38+
</svg>
39+
</a>
40+
</div>
41+
<ul class="hidden uppercase">
42+
<li><a href="#">Headphone</a></li>
43+
<li><a href="#">Pods</a></li>
44+
<li><a href="#">Support</a></li>
45+
</ul>
46+
</nav>
47+
</header>
48+
</body>
49+
</html>

‎public/hero.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<link rel="stylesheet" href="./css/tailwind.css" />
6+
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
7+
<title>Boom</title>
8+
</head>
9+
<body>
10+
<main>
11+
<!--Landing page Full Product Hero-->
12+
<section class="relative">
13+
<!--Hero Image-->
14+
<div class="absolute">
15+
<span></span>
16+
<img src="./img/boom-hero.jpg" alt="headphone hero" />
17+
</div>
18+
<!--Hero Copy-->
19+
<div class="relative text-white p-12">
20+
<h2 class="text-3xl">Headphone</h2>
21+
<p class="mb-10">Introducting the newest addition to the Boom Pro line-up</p>
22+
<div>
23+
<a class="btn bg-white text-black border-white mr-2" href="#">Learn More</a>
24+
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
25+
</div>
26+
</div>
27+
</section>
28+
</main>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)