Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

header and image positioning #1

Open
wants to merge 1 commit into
base: feature/sneakers
Choose a base branch
from
+37 −17
Open

header and image positioning #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 37 additions & 17 deletions tailwind.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,65 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="w-full h-screen space-y-20">
<div class="w-full md:flex flex-row min-h-[33%]">
<div class="w-full md:w-1/2 flex flex-col items-center justify-center p-12">
<body class="w-full h-screen relative">
<div class="h-24 w-full lg:absolute lg:top-0 lg:left-0 lg:right-0 flex flex-row items-center">
<div class="w-full flex flex-row">
<div class="flex-1">
<div class="px-4 lg:px-24 text-2xl">Logo</div>
</div>
<div class="flex flex-row items-center space-x-20 px-4 lg:px-24">
<div class="">
<div class="text-lg text-black lg:text-white uppercase">Home</div>
</div>
<div class="">
<div class="text-lg text-black lg:text-white uppercase">Sneakers</div>
</div>
<div class="">
<div class="text-lg text-black lg:text-white uppercase">Players</div>
</div>
</div>
</div>
</div>
<div class="w-full lg:flex flex-row min-h-[33%]">
<div class="w-full lg:w-1/2 flex flex-col items-center justify-center px-12">
<div class="w-full">
<h1 class="text-3xl font-bold pb-4">Regain confidence on your court.</h1>
<p class="text-sm text-gray-400">A shoe built with purpose and to take your game to the next level.</p>
</div>
</div>
<div class="w-full h-[250px] md:h-auto md:w-1/2 bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXN8ZW58MHx8MHx8&w=1000&q=80);"></div>
<div class="w-full h-[250px] lg:h-auto lg:w-1/2 bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXN8ZW58MHx8MHx8&w=1000&q=80);"></div>
</div>

<div class="w-full md:flex flex-row-reverse min-h-[20%]">
<div class="w-full md:w-1/2 flex flex-col items-center justify-center p-12">
<div class="w-full p-12">
<h1 class="text-md font-bold pb-4">Lightweight</h1>
<p class="text-xs text-gray-400">Upper mesh material provides proper ventilation and reduction in the weight of the shoes.</p>
<div class="w-full lg:flex flex-row-reverse min-h-[20%] mt-20">
<div class="w-full lg:w-1/2 flex flex-col items-start justify-center p-12">
<div class="w-full p-12 max-w-sm">
<h1 class="text-2xl font-bold pb-4">Lightweight</h1>
<p class="text-base text-gray-400">Upper mesh material provides proper ventilation and reduction in the weight of the shoes.</p>
</div>
</div>
<div class="w-full h-[150px] md:w-1/3 bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://s3-alpha-sig.figma.com/img/c173/3b32/46f0a3e381cbecbdcbe39a8babf499a1?Expires=1656288000&Signature=IYdJ7OxsouRshZ12ao-wKDFk9zgVCd4g2KGzsI-D1FgFry7BkUmmf4PYWFGOkXrutKUdEbZdxy-TjKLoNPdiUh4hpfDXp8w2UIZMNhcgCp0BOW-8w1dCpgnsMvHQKbP-9ragS2eKwiY9JDuwcqTOCabc~anZgvmvvbfZuEjq0Jv2oaji5IA0~98EzhxitNaybbsbYXv9rTvsh-zjRMFu5Wg3MzxVRrOUV8TeF-7GuSkqJgNZE~ymhClGjoluI9-ymx-wQGhR3lLIR4xnQqsRdKIX3RcWaNbE6uqGQUoMU3D9h6yYnXsfSHve8YegxgUD7l3EXZUQAt0YAP6hXhpi~w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA);"></div>
<div class="w-full lg:w-1/2 h-auto flex items-center justify-end">
<div class="w-2/3 aspect-[4/3] bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://s3-alpha-sig.figma.com/img/c173/3b32/46f0a3e381cbecbdcbe39a8babf499a1?Expires=1656288000&Signature=IYdJ7OxsouRshZ12ao-wKDFk9zgVCd4g2KGzsI-D1FgFry7BkUmmf4PYWFGOkXrutKUdEbZdxy-TjKLoNPdiUh4hpfDXp8w2UIZMNhcgCp0BOW-8w1dCpgnsMvHQKbP-9ragS2eKwiY9JDuwcqTOCabc~anZgvmvvbfZuEjq0Jv2oaji5IA0~98EzhxitNaybbsbYXv9rTvsh-zjRMFu5Wg3MzxVRrOUV8TeF-7GuSkqJgNZE~ymhClGjoluI9-ymx-wQGhR3lLIR4xnQqsRdKIX3RcWaNbE6uqGQUoMU3D9h6yYnXsfSHve8YegxgUD7l3EXZUQAt0YAP6hXhpi~w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA);"></div>
</div>
</div>

<div class="w-full md:flex flex-row min-h-[20%]">
<div class="w-full md:w-1/2 flex flex-col items-center justify-center p-12">
<div class="w-full lg:flex flex-row min-h-[20%]">
<div class="w-full lg:w-1/2 flex flex-col items-center justify-center p-12">
<div class="w-full p-12">
<h1 class="text-md font-bold pb-4">Flexibility</h1>
<h1 class="text-md font-bold pb-4 text-right">Flexibility</h1>
<p class="text-xs text-gray-400">Soft, flexible soles will allow the walker to push off easly with each step.</p>
</div>
</div>
<div class="w-full h-[250px] md:h-auto md:w-1/3 bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/cc763817-06f5-4d38-927e-0404d1e9198b/air-max-270-womens-shoes-Pgb94t.png);"></div>
<div class="w-full h-[250px] lg:h-auto lg:w-1/4 bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/cc763817-06f5-4d38-927e-0404d1e9198b/air-max-270-womens-shoes-Pgb94t.png);"></div>
</div>

<div class="w-full md:flex flex-row-reverse min-h-[20%]">
<div class="w-full md:w-1/2 flex flex-col items-center justify-center p-12">
<div class="w-full lg:flex flex-row-reverse min-h-[20%]">
<div class="w-full lg:w-1/2 flex flex-col items-center justify-center p-12">
<div class="w-full p-12">
<h1 class="text-md font-bold pb-4"> Durability </h1>
<p class="text-xs text-gray-400">Lightweight, woven material is durable and provide structure and support.</p>
</div>
</div>
<div class="w-full h-[250px] md:h-auto md:w-1/3 bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/e8e530a3-2317-4783-819b-40860281daaf/zoomx-streakfly-road-racing-shoes-V17qZm.png);"></div>
<div class="w-full h-[250px] lg:h-auto lg:w-1/4 bg-red-500 bg-no-repeat bg-center bg-cover" style="background-image: url(https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/e8e530a3-2317-4783-819b-40860281daaf/zoomx-streakfly-road-racing-shoes-V17qZm.png);"></div>
</div>

</body>
Expand Down