Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit88f7344

Browse files
committed
05 - Spacing and Position
1 parentbd877fb commit88f7344

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+
<htmllang="en">
2+
<head>
3+
<metacharset="UTF-8"/>
4+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
5+
<linkrel="stylesheet"href="./css/tailwind.css"/>
6+
<linkrel="shortcut icon"href="./img/favicon.ico"type="image/x-icon"/>
7+
<title>Boom</title>
8+
</head>
9+
<bodyclass="flex w-screen h-screen justify-center items-center bg-gray-400">
10+
<div>
11+
<aclass="btn bg-white text-black border-white mr-2"href="#">Learn More</a>
12+
<aclass="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+
<htmllang="en">
2+
<head>
3+
<metacharset="UTF-8"/>
4+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
5+
<linkrel="stylesheet"href="./css/tailwind.css"/>
6+
<linkrel="shortcut icon"href="./img/favicon.ico"type="image/x-icon"/>
7+
<title>Boom</title>
8+
</head>
9+
<body>
10+
<main>
11+
<sectionclass="bg-gray-200 pb-6">
12+
<!--card-->
13+
<divclass="pb-6">
14+
<!--card Image-->
15+
<div>
16+
<imgsrc="./img/boom-headphone-pro-black.jpg"alt="headphone black"/>
17+
</div>
18+
<!--card Copy-->
19+
<divclass="bg-white p-12 mx-4 -mt-5 relative rounded">
20+
<h2class="text-lg text-red-600 uppercase">Headphone Pro</h2>
21+
<h3class="text-2xl leading-none mb-2">Music to your ears</h3>
22+
<pclass="mb-10">Listen in style! Your everyday headphone in many assorted colours.</p>
23+
<div>
24+
<aclass="btn bg-white text-black border-white mr-2"href="#">Learn More</a>
25+
<aclass="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+
<imgsrc="./img/boom-wireless-pro.jpg"alt="Pods pro"/>
35+
</div>
36+
<!--card Copy-->
37+
<divclass="bg-white p-12 mx-4 -mt-5 relative rounded">
38+
<h2class="text-lg text-red-600 uppercase">Pods Pro</h2>
39+
<h3class="text-2xl leading-none mb-2">BOOM comes in small package</h3>
40+
<pclass="mb-10">Go anywhere and everywhere with your Pods. Listen all day long without worry.</p>
41+
<div>
42+
<aclass="btn bg-white text-black border-white mr-2"href="#">Learn More</a>
43+
<aclass="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+
<htmllang="en">
2+
<head>
3+
<metacharset="UTF-8"/>
4+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
5+
<linkrel="stylesheet"href="./css/tailwind.css"/>
6+
<linkrel="shortcut icon"href="./img/favicon.ico"type="image/x-icon"/>
7+
<title>Boom</title>
8+
</head>
9+
<body>
10+
<footerclass="bg-black text-gray-400 text-center p-12">
11+
<divclass="container mx-auto">
12+
<divclass="mb-12">
13+
<ul>
14+
<li>
15+
<h4class="text-2xl">
16+
<spanclass="hidden"> Boom</span>
17+
<svgxmlns="http://www.w3.org/2000/svg"version="1"class="h-8"viewBox="0 0 60 25">
18+
<gfill="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+
<h4class="text-2xl">Product</h4>
33+
</li>
34+
<li><ahref="#">Headphones</a></li>
35+
<li><ahref="#">Pods</a></li>
36+
</ul>
37+
<ul>
38+
<li>
39+
<h4class="text-2xl">Company</h4>
40+
</li>
41+
<li><ahref="#">About</a></li>
42+
<li><ahref="#">Careers</a></li>
43+
</ul>
44+
<ul>
45+
<li>
46+
<h4class="text-2xl">Locations</h4>
47+
</li>
48+
<li><ahref="#">Canada</a></li>
49+
<li><ahref="#">US</a></li>
50+
</ul>
51+
<ul>
52+
<li>
53+
<h4class="text-2xl">Contact</h4>
54+
</li>
55+
<li><ahref="#">Email</a></li>
56+
<li><ahref="#">Phone</a></li>
57+
</ul>
58+
<ul>
59+
<li>
60+
<h4class="text-2xl">Follow Us</h4>
61+
</li>
62+
<li>
63+
<ahref="#"target="_blank"title="follow"
64+
><spanclass="hidden">facebook</span>
65+
<svgversion="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+
<ahref="#"target="_blank"title="follow"
73+
><spanclass="hidden">instagram</span>
74+
<svgversion="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+
<ahref="#"target="_blank"title="follow"
82+
><spanclass="hidden">twitter</span>
83+
<svgversion="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+
<pclass="text-2xs">
94+
<span><ahref="#">Terms of Use</a> |<ahref="#">Privacy</a> |<ahref="#">Shipping</a> |</span>
95+
<span>Copyright &copy; 2020 BOOM | Design and Developed by<ahref="#"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+
<htmllang="en">
2+
<head>
3+
<metacharset="UTF-8"/>
4+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
5+
<linkrel="stylesheet"href="./css/tailwind.css"/>
6+
<linkrel="shortcut icon"href="./img/favicon.ico"type="image/x-icon"/>
7+
<title>Boom</title>
8+
</head>
9+
<body>
10+
<headerclass="bg-black text-white w-full">
11+
<navid="mainNav"class="px-8 py-2">
12+
<div>
13+
<h1>
14+
<ahref="#">
15+
<spanclass="hidden">Boom</span>
16+
<svgxmlns="http://www.w3.org/2000/svg"version="1"class="h-8"viewBox="0 0 60 25">
17+
<gfill="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+
<ahref="#">
29+
<spanclass="hidden">mobile menu</span>
30+
<svgclass="h-4"xmlns="http://www.w3.org/2000/svg"version="1"viewBox="0 0 24 24">
31+
<pathfill="currentColor"d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>
32+
</svg>
33+
<svgclass="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+
<ulclass="hidden uppercase">
42+
<li><ahref="#">Headphone</a></li>
43+
<li><ahref="#">Pods</a></li>
44+
<li><ahref="#">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+
<htmllang="en">
2+
<head>
3+
<metacharset="UTF-8"/>
4+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
5+
<linkrel="stylesheet"href="./css/tailwind.css"/>
6+
<linkrel="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+
<sectionclass="relative">
13+
<!--Hero Image-->
14+
<divclass="absolute">
15+
<span></span>
16+
<imgsrc="./img/boom-hero.jpg"alt="headphone hero"/>
17+
</div>
18+
<!--Hero Copy-->
19+
<divclass="relative text-white p-12">
20+
<h2class="text-3xl">Headphone</h2>
21+
<pclass="mb-10">Introducting the newest addition to the Boom Pro line-up</p>
22+
<div>
23+
<aclass="btn bg-white text-black border-white mr-2"href="#">Learn More</a>
24+
<aclass="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)
[8]ページ先頭
©2009-2025 Movatter.jp