Skip to content

Commit 0e214f1

Browse files
codewithchucodewithchu
committed
08-Responsive
1 parent 7fbeb49 commit 0e214f1

File tree

7 files changed

+178
-75
lines changed

7 files changed

+178
-75
lines changed

‎public/card.html‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,54 @@
88
</head>
99
<body>
1010
<main>
11-
<section class="bg-gray-200 pb-6">
11+
<section class="bg-gray-200 pb-6 md:p-12 lg:p-0">
1212
<!--card-->
13-
<div class="pb-6 grid">
13+
<div class="pb-6 md:pb-12 lg:pb-0 grid lg:grid-cols-2">
1414
<!--card Image-->
15-
<div class="grid grid-cols-4 py-10 bg-boom-100">
15+
<div class="grid grid-cols-4 lg:grid-cols-2 py-10 bg-boom-100 lg:h-full lg:min-h-screen-2/3 xl:min-h-screen">
1616
<img src="./img/boom-headphone-pro-black.jpg" alt="headphone black" />
1717
<img src="./img/boom-headphone-pro-blue.jpg" alt="headphone blue" />
1818
<img src="./img/boom-headphone-pro-red.jpg" alt="headphone red" />
1919
<img src="./img/boom-headphone-pro-white.jpg" alt="headphone white" />
2020
</div>
2121
<!--card Copy-->
22-
<div class="bg-white p-12 mx-4 -mt-5 relative rounded">
23-
<h2 class="text-lg text-red-600 uppercase">Headphone Pro</h2>
24-
<h3 class="text-2xl leading-none mb-2">Music to your ears</h3>
25-
<p class="mb-10">Listen in style! Your everyday headphone in many assorted colours.</p>
26-
<div class="flex justify-center">
27-
<a class="btn bg-white text-black border-gray-200 mr-2" href="#">Learn More</a>
28-
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
22+
<div
23+
class="bg-white p-12 lg:p-20 mx-4 -mt-5 relative rounded lg:mx-0 lg:mt-0 lg:rounded-none lg:flex lg:justify-center lg:items-center"
24+
>
25+
<div class="xl:w-9/12">
26+
<h2 class="text-lg lg:text-xl xl:text-2xl text-red-600 uppercase">Headphone Pro</h2>
27+
<h3 class="text-2xl lg:text-4xl xl:text-6xl leading-none mb-2">Music to your ears</h3>
28+
<p class="mb-10">Listen in style! Your everyday headphone in many assorted colours.</p>
29+
<div class="flex justify-center lg:justify-start">
30+
<a class="btn bg-white text-black border-gray-200 mr-2" href="#">Learn More</a>
31+
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
32+
</div>
2933
</div>
3034
</div>
3135
</div>
3236

3337
<!--card-->
34-
<div class="grid">
38+
<div class="grid lg:grid-cols-2">
3539
<!--card Image-->
36-
<div>
37-
<img src="./img/boom-wireless-pro.jpg" alt="Pods pro" />
40+
<div class="lg:order-last">
41+
<img
42+
class="w-full h-auto lg:h-full lg:min-h-screen-2/3 xl:min-h-screen object-cover"
43+
src="./img/boom-wireless-pro.jpg"
44+
alt="Pods pro"
45+
/>
3846
</div>
3947
<!--card Copy-->
40-
<div class="bg-white p-12 mx-4 -mt-5 relative rounded">
41-
<h2 class="text-lg text-red-600 uppercase">Pods Pro</h2>
42-
<h3 class="text-2xl leading-none mb-2">BOOM comes in small package</h3>
43-
<p class="mb-10">Go anywhere and everywhere with your Pods. Listen all day long without worry.</p>
44-
<div class="flex justify-center">
45-
<a class="btn bg-white text-black border-gray-200 mr-2" href="#">Learn More</a>
46-
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
48+
<div
49+
class="bg-white p-12 lg:p-20 mx-4 -mt-5 relative rounded lg:mx-0 lg:mt-0 lg:rounded-none lg:flex lg:justify-center lg:items-center"
50+
>
51+
<div class="xl:w-9/12">
52+
<h2 class="text-lg lg:text-xl xl:text-2xl text-red-600 uppercase">Pods Pro</h2>
53+
<h3 class="text-2xl lg:text-4xl xl:text-6xl leading-none mb-2">BOOM comes in small package</h3>
54+
<p class="mb-10">Go anywhere and everywhere with your Pods. Listen all day long without worry.</p>
55+
<div class="flex justify-center lg:justify-start">
56+
<a class="btn bg-white text-black border-gray-200 mr-2" href="#">Learn More</a>
57+
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
58+
</div>
4759
</div>
4860
</div>
4961
</div>

‎public/css/tailwind.css‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21450,7 +21450,7 @@ a {
2145021450

2145121451
.btn {
2145221452
text-transform: uppercase;
21453-
font-size: 0.875rem;
21453+
font-size: 0.8rem;
2145421454
padding-left: 1rem;
2145521455
padding-right: 1rem;
2145621456
padding-top: 0.5rem;
@@ -21459,12 +21459,50 @@ a {
2145921459
border-width: 1px;
2146021460
}
2146121461

21462+
@media (min-width: 640px) {
21463+
.btn {
21464+
font-size: 0.875rem;
21465+
padding-left: 2.5rem;
21466+
padding-right: 2.5rem;
21467+
padding-top: 0.75rem;
21468+
padding-bottom: 0.75rem;
21469+
}
21470+
}
21471+
21472+
@media (min-width: 768px) {
21473+
.btn {
21474+
padding-left: 4rem;
21475+
padding-right: 4rem;
21476+
}
21477+
}
21478+
21479+
@media (min-width: 1024px) {
21480+
.btn {
21481+
padding-left: 2.5rem;
21482+
padding-right: 2.5rem;
21483+
}
21484+
}
21485+
2146221486
/*Header Nav*/
2146321487

2146421488
#mainMenu li a {
2146521489
padding-top: 1rem;
2146621490
padding-bottom: 1rem;
21467-
margin-right: 1rem;
21491+
}
21492+
21493+
@media (min-width: 768px) {
21494+
#mainMenu li a {
21495+
padding-top: 0;
21496+
padding-bottom: 0;
21497+
}
21498+
21499+
#mainMenu li {
21500+
margin-right: 1rem;
21501+
}
21502+
21503+
#mainMenu li:last-child {
21504+
margin-right: 0;
21505+
}
2146821506
}
2146921507

2147021508
/*footer*/
@@ -21475,6 +21513,12 @@ footer ul li h4 {
2147521513
line-height: 1;
2147621514
}
2147721515

21516+
@media (min-width: 1024px) {
21517+
footer ul li h4 {
21518+
font-size: 1.125rem;
21519+
}
21520+
}
21521+
2147821522
@media (min-width: 640px){
2147921523
.sm\:container{
2148021524
width: 100%;

‎public/footer.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
<title>Boom</title>
88
</head>
99
<body>
10-
<footer class="bg-black text-gray-400 text-center p-12">
11-
<div class="container mx-auto">
12-
<div class="grid grid-cols-2 gap-4 mb-12">
13-
<ul class="col-span-2 justify-self-center">
10+
<footer class="bg-black text-gray-400 p-12">
11+
<div class="container mx-auto text-center">
12+
<div class="grid grid-cols-2 lg:grid-cols-6 gap-4 mb-12 lg:text-left lg:text-sm">
13+
<ul class="col-span-2 lg:col-span-1 justify-self-center lg:justify-self-start">
1414
<li>
1515
<h4>
1616
<span class="hidden"> Boom </span>
17-
<svg xmlns="http://www.w3.org/2000/svg" version="1" class="h-12" viewBox="0 0 60 25">
17+
<svg xmlns="http://www.w3.org/2000/svg" version="1" class="h-12 lg:h-8" viewBox="0 0 60 25">
1818
<g fill="currentColor">
1919
<path
2020
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"
@@ -55,11 +55,11 @@ <h4>Contact</h4>
5555
<li><a href="#">Email</a></li>
5656
<li><a href="#">Phone</a></li>
5757
</ul>
58-
<ul class="col-span-2 justify-self-center">
58+
<ul class="col-span-2 lg:col-span-1 justify-self-center lg:justify-self-start">
5959
<li>
6060
<h4>Follow Us</h4>
6161
</li>
62-
<li class="grid grid-cols-3 gap-20">
62+
<li class="grid grid-cols-3 gap-20 lg:gap-2">
6363
<a href="#" target="_blank" title="follow"
6464
><span class="hidden">facebook</span>
6565
<svg version="1" class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

‎public/header.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@
66
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
77
<title>Boom</title>
88
</head>
9-
<body>
10-
<header class="bg-black text-white w-full">
11-
<nav id="mainNav" class="px-8 py-2 flex flex-wrap justify-between items-center">
9+
<body class="bg-gray-500">
10+
<header class="w-full fixed z-30">
11+
<nav
12+
id="mainNav"
13+
class="bg-black md:bg-transparent text-white px-8 xl:px-24 py-2 md:py-6 flex flex-wrap md:flex-no-wrap justify-between items-center"
14+
>
1215
<div class="flex justify-between items-center w-full">
1316
<h1>
1417
<a href="#">
@@ -25,7 +28,7 @@ <h1>
2528
</svg>
2629
</a>
2730
</h1>
28-
<a href="#" class="">
31+
<a href="#" class="md:hidden">
2932
<span class="hidden">mobile menu</span>
3033
<svg class="h-8" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
3134
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
@@ -38,7 +41,7 @@ <h1>
3841
</svg>
3942
</a>
4043
</div>
41-
<ul id="mainMenu" class="hidden uppercase py-6 text-2xl">
44+
<ul id="mainMenu" class="hidden uppercase py-6 text-2xl md:text-base md:py-0 md:flex">
4245
<li><a href="#">Headphone</a></li>
4346
<li><a href="#">Pods</a></li>
4447
<li><a href="#">Support</a></li>

‎public/hero.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
<body>
1010
<main>
1111
<!--Landing page Full Product Hero-->
12-
<section class="relative h-screen-2/3 flex flex-col justify-end">
12+
<section class="relative h-screen-2/3 lg:h-screen flex flex-col justify-end lg:flex-row lg:items-center">
1313
<!--Hero Image-->
1414
<div class="cwc-full absolute">
1515
<span class="cwc-full absolute bg-black bg-opacity-25 bg-gradient-to-b from-transparent via-transparent to-black"></span>
1616
<img class="cwc-full object-cover" src="./img/boom-hero.jpg" alt="headphone hero" />
1717
</div>
1818
<!--Hero Copy-->
19-
<div class="relative text-white p-12">
20-
<h2 class="text-3xl">Headphone</h2>
19+
<div class="relative text-white p-12 lg:w-1/2 lg:p-20">
20+
<h2 class="text-3xl md:text-5xl lg:text-6xl">Headphone</h2>
2121
<p class="mb-10">Introducting the newest addition to the Boom Pro line-up</p>
2222
<div>
2323
<a class="btn bg-white text-black border-white mr-2" href="#">Learn More</a>

0 commit comments

Comments
 (0)