Skip to content

Commit afc8e6a

Browse files
codewithchucodewithchu
committed
06 -Flex Box
1 parent 88f7344 commit afc8e6a

File tree

8 files changed

+266
-29
lines changed

8 files changed

+266
-29
lines changed

‎public/btn.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body class="flex w-screen h-screen justify-center items-center bg-gray-400">
1010
<div>
11-
<a class="btn bg-white text-black border-white mr-2" href="#">Learn More</a>
11+
<a class="btn bg-white text-black border-gray-200 mr-2" href="#">Learn More</a>
1212
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
1313
</div>
1414
</body>

‎public/card.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
<h2 class="text-lg text-red-600 uppercase">Headphone Pro</h2>
2121
<h3 class="text-2xl leading-none mb-2">Music to your ears</h3>
2222
<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>
23+
<div class="flex justify-center">
24+
<a class="btn bg-white text-black border-gray-200 mr-2" href="#">Learn More</a>
2525
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
2626
</div>
2727
</div>
@@ -38,8 +38,8 @@ <h3 class="text-2xl leading-none mb-2">Music to your ears</h3>
3838
<h2 class="text-lg text-red-600 uppercase">Pods Pro</h2>
3939
<h3 class="text-2xl leading-none mb-2">BOOM comes in small package</h3>
4040
<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>
41+
<div class="flex justify-center">
42+
<a class="btn bg-white text-black border-gray-200 mr-2" href="#">Learn More</a>
4343
<a class="btn bg-red-600 text-white border-red-600" href="#">Shop Now</a>
4444
</div>
4545
</div>

‎public/css/tailwind.css‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10395,6 +10395,26 @@ video {
1039510395
height: 100vh;
1039610396
}
1039710397

10398+
.h-screen-1\/3{
10399+
height: 33vh;
10400+
}
10401+
10402+
.h-screen-1\/2{
10403+
height: 50vh;
10404+
}
10405+
10406+
.h-screen-2\/3{
10407+
height: 66vh;
10408+
}
10409+
10410+
.h-screen-3\/4{
10411+
height: 75vh;
10412+
}
10413+
10414+
.h-screen-4\/5{
10415+
height: 80vh;
10416+
}
10417+
1039810418
.text-xs{
1039910419
font-size: 0.8rem;
1040010420
}
@@ -11743,6 +11763,26 @@ video {
1174311763
min-height: 100vh;
1174411764
}
1174511765

11766+
.min-h-screen-1\/3{
11767+
min-height: 33vh;
11768+
}
11769+
11770+
.min-h-screen-1\/2{
11771+
min-height: 50vh;
11772+
}
11773+
11774+
.min-h-screen-2\/3{
11775+
min-height: 66vh;
11776+
}
11777+
11778+
.min-h-screen-3\/4{
11779+
min-height: 75vh;
11780+
}
11781+
11782+
.min-h-screen-4\/5{
11783+
min-height: 80vh;
11784+
}
11785+
1174611786
.min-w-0{
1174711787
min-width: 0;
1174811788
}
@@ -21248,6 +21288,11 @@ video {
2124821288
animation: bounce 1s infinite;
2124921289
}
2125021290

21291+
.cwc-full {
21292+
width: 100%;
21293+
height: 100%;
21294+
}
21295+
2125121296
h1,
2125221297
h2,
2125321298
h3,
@@ -21276,6 +21321,14 @@ a {
2127621321
border-width: 1px;
2127721322
}
2127821323

21324+
/*Header Nav*/
21325+
21326+
#mainMenu li a {
21327+
padding-top: 1rem;
21328+
padding-bottom: 1rem;
21329+
margin-right: 1rem;
21330+
}
21331+
2127921332
@media (min-width: 640px){
2128021333
.sm\:container{
2128121334
width: 100%;
@@ -31084,6 +31137,26 @@ a {
3108431137
height: 100vh;
3108531138
}
3108631139

31140+
.sm\:h-screen-1\/3{
31141+
height: 33vh;
31142+
}
31143+
31144+
.sm\:h-screen-1\/2{
31145+
height: 50vh;
31146+
}
31147+
31148+
.sm\:h-screen-2\/3{
31149+
height: 66vh;
31150+
}
31151+
31152+
.sm\:h-screen-3\/4{
31153+
height: 75vh;
31154+
}
31155+
31156+
.sm\:h-screen-4\/5{
31157+
height: 80vh;
31158+
}
31159+
3108731160
.sm\:text-xs{
3108831161
font-size: 0.8rem;
3108931162
}
@@ -32432,6 +32505,26 @@ a {
3243232505
min-height: 100vh;
3243332506
}
3243432507

32508+
.sm\:min-h-screen-1\/3{
32509+
min-height: 33vh;
32510+
}
32511+
32512+
.sm\:min-h-screen-1\/2{
32513+
min-height: 50vh;
32514+
}
32515+
32516+
.sm\:min-h-screen-2\/3{
32517+
min-height: 66vh;
32518+
}
32519+
32520+
.sm\:min-h-screen-3\/4{
32521+
min-height: 75vh;
32522+
}
32523+
32524+
.sm\:min-h-screen-4\/5{
32525+
min-height: 80vh;
32526+
}
32527+
3243532528
.sm\:min-w-0{
3243632529
min-width: 0;
3243732530
}
@@ -51680,6 +51773,26 @@ a {
5168051773
height: 100vh;
5168151774
}
5168251775

51776+
.md\:h-screen-1\/3{
51777+
height: 33vh;
51778+
}
51779+
51780+
.md\:h-screen-1\/2{
51781+
height: 50vh;
51782+
}
51783+
51784+
.md\:h-screen-2\/3{
51785+
height: 66vh;
51786+
}
51787+
51788+
.md\:h-screen-3\/4{
51789+
height: 75vh;
51790+
}
51791+
51792+
.md\:h-screen-4\/5{
51793+
height: 80vh;
51794+
}
51795+
5168351796
.md\:text-xs{
5168451797
font-size: 0.8rem;
5168551798
}
@@ -53028,6 +53141,26 @@ a {
5302853141
min-height: 100vh;
5302953142
}
5303053143

53144+
.md\:min-h-screen-1\/3{
53145+
min-height: 33vh;
53146+
}
53147+
53148+
.md\:min-h-screen-1\/2{
53149+
min-height: 50vh;
53150+
}
53151+
53152+
.md\:min-h-screen-2\/3{
53153+
min-height: 66vh;
53154+
}
53155+
53156+
.md\:min-h-screen-3\/4{
53157+
min-height: 75vh;
53158+
}
53159+
53160+
.md\:min-h-screen-4\/5{
53161+
min-height: 80vh;
53162+
}
53163+
5303153164
.md\:min-w-0{
5303253165
min-width: 0;
5303353166
}
@@ -72276,6 +72409,26 @@ a {
7227672409
height: 100vh;
7227772410
}
7227872411

72412+
.lg\:h-screen-1\/3{
72413+
height: 33vh;
72414+
}
72415+
72416+
.lg\:h-screen-1\/2{
72417+
height: 50vh;
72418+
}
72419+
72420+
.lg\:h-screen-2\/3{
72421+
height: 66vh;
72422+
}
72423+
72424+
.lg\:h-screen-3\/4{
72425+
height: 75vh;
72426+
}
72427+
72428+
.lg\:h-screen-4\/5{
72429+
height: 80vh;
72430+
}
72431+
7227972432
.lg\:text-xs{
7228072433
font-size: 0.8rem;
7228172434
}
@@ -73624,6 +73777,26 @@ a {
7362473777
min-height: 100vh;
7362573778
}
7362673779

73780+
.lg\:min-h-screen-1\/3{
73781+
min-height: 33vh;
73782+
}
73783+
73784+
.lg\:min-h-screen-1\/2{
73785+
min-height: 50vh;
73786+
}
73787+
73788+
.lg\:min-h-screen-2\/3{
73789+
min-height: 66vh;
73790+
}
73791+
73792+
.lg\:min-h-screen-3\/4{
73793+
min-height: 75vh;
73794+
}
73795+
73796+
.lg\:min-h-screen-4\/5{
73797+
min-height: 80vh;
73798+
}
73799+
7362773800
.lg\:min-w-0{
7362873801
min-width: 0;
7362973802
}
@@ -92872,6 +93045,26 @@ a {
9287293045
height: 100vh;
9287393046
}
9287493047

93048+
.xl\:h-screen-1\/3{
93049+
height: 33vh;
93050+
}
93051+
93052+
.xl\:h-screen-1\/2{
93053+
height: 50vh;
93054+
}
93055+
93056+
.xl\:h-screen-2\/3{
93057+
height: 66vh;
93058+
}
93059+
93060+
.xl\:h-screen-3\/4{
93061+
height: 75vh;
93062+
}
93063+
93064+
.xl\:h-screen-4\/5{
93065+
height: 80vh;
93066+
}
93067+
9287593068
.xl\:text-xs{
9287693069
font-size: 0.8rem;
9287793070
}
@@ -94220,6 +94413,26 @@ a {
9422094413
min-height: 100vh;
9422194414
}
9422294415

94416+
.xl\:min-h-screen-1\/3{
94417+
min-height: 33vh;
94418+
}
94419+
94420+
.xl\:min-h-screen-1\/2{
94421+
min-height: 50vh;
94422+
}
94423+
94424+
.xl\:min-h-screen-2\/3{
94425+
min-height: 66vh;
94426+
}
94427+
94428+
.xl\:min-h-screen-3\/4{
94429+
min-height: 75vh;
94430+
}
94431+
94432+
.xl\:min-h-screen-4\/5{
94433+
min-height: 80vh;
94434+
}
94435+
9422394436
.xl\:min-w-0{
9422494437
min-width: 0;
9422594438
}

‎public/header.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
</head>
99
<body>
1010
<header class="bg-black text-white w-full">
11-
<nav id="mainNav" class="px-8 py-2">
12-
<div>
11+
<nav id="mainNav" class="px-8 py-2 flex flex-wrap justify-between items-center">
12+
<div class="flex justify-between items-center w-full">
1313
<h1>
1414
<a href="#">
1515
<span class="hidden">Boom</span>
@@ -25,20 +25,20 @@ <h1>
2525
</svg>
2626
</a>
2727
</h1>
28-
<a href="#">
28+
<a href="#" class="">
2929
<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">
30+
<svg class="h-8" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
3131
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
3232
</svg>
33-
<svg class="h-4" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
33+
<svg class="h-8 hidden" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
3434
<path
3535
fill="currentColor"
3636
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"
3737
/>
3838
</svg>
3939
</a>
4040
</div>
41-
<ul class="hidden uppercase">
41+
<ul id="mainMenu" class="hidden uppercase py-6 text-2xl">
4242
<li><a href="#">Headphone</a></li>
4343
<li><a href="#">Pods</a></li>
4444
<li><a href="#">Support</a></li>

‎public/hero.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
<body>
1010
<main>
1111
<!--Landing page Full Product Hero-->
12-
<section class="relative">
12+
<section class="relative h-screen-2/3 flex flex-col justify-end">
1313
<!--Hero Image-->
14-
<div class="absolute">
15-
<span></span>
16-
<img src="./img/boom-hero.jpg" alt="headphone hero" />
14+
<div class="cwc-full absolute">
15+
<span class="cwc-full absolute bg-black bg-opacity-25 bg-gradient-to-b from-transparent via-transparent to-black"></span>
16+
<img class="cwc-full object-cover" src="./img/boom-hero.jpg" alt="headphone hero" />
1717
</div>
1818
<!--Hero Copy-->
1919
<div class="relative text-white p-12">

0 commit comments

Comments
 (0)