Skip to content

Instantly share code, notes, and snippets.

@kouameYao

kouameYao/4section.html

Last active December 7, 2024 11:49
Show Gist options
  • Save kouameYao/109160186c0e4fedda18aacdfa5dd0e1 to your computer and use it in GitHub Desktop.
Save kouameYao/109160186c0e4fedda18aacdfa5dd0e1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
4section.html
<div class="grid sm:grid-cols-2 md:grid-cols-4">
<picture>
<source
srcset="./images/mobile/image-gallery-milkbottles.jpg"
media="(max-width: 767px)"
/>
<source
srcset="./images/desktop/image-gallery-milkbottles.jpg"
media="(min-width: 768px)"
/>
<img
src="./images/desktop/image-gallery-milkbottles.jpg"
alt="Image 1"
class="w-full h-auto object-cover"
/>
</picture>
<picture>
<source
srcset="./images/mobile/image-gallery-orange.jpg"
media="(max-width: 767px)"
/>
<source
srcset="./images/desktop/image-gallery-orange.jpg"
media="(min-width: 768px)"
/>
<img
src="./images/desktop/image-gallery-orange.jpg"
alt="Image 2"
class="w-full h-auto object-cover"
/>
</picture>
<picture>
<source
srcset="./images/mobile/image-gallery-cone.jpg"
media="(max-width: 767px)"
/>
<source
srcset="./images/desktop/image-gallery-cone.jpg"
media="(min-width: 768px)"
/>
<img
src="./images/desktop/image-gallery-cone.jpg"
alt="Image 3"
class="w-full h-auto object-cover"
/>
</picture>
<picture>
<source
srcset="./images/mobile/image-gallery-sugar-cubes.jpg"
media="(max-width: 767px)"
/>
<source
srcset="./images/desktop/image-gallery-sugarcubes.jpg"
media="(min-width: 768px)"
/>
<img
src="./images/desktop/image-gallery-sugarcubes.jpg"
alt="Image 4"
class="w-full h-auto object-cover"
/>
</picture>
</div>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<!-- Fonts -->
<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bricolage+Grotesque:opsz,[email protected],200..800&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Kumbh+Sans:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
softRed: "hsl(7, 99%, 70%)",
yellow: "hsl(51, 100%, 49%)",
darkDesaturatedCyan: "hsl(167, 40%, 24%)",
darkBlue: "hsl(198, 62%, 26%)",
darkModerateCyan: "hsl(168, 34%, 41%)",
veryDarkDesaturatedBlue: "hsl(212, 27%, 19%)",
veryDarkGrayishBlue: "hsl(213, 9%, 39%)",
darkGrayishBlue: "hsl(232, 10%, 55%)",
grayishBlue: "hsl(210, 4%, 67%)",
white: "hsl(0, 0%, 100%)",
},
fontFamily: {
barlow: ["Barlow", "sans-serif"],
fraunces: ["Fraunces", "serif"],
},
fontSize: {
body: "18px",
},
screens: {
sm: "375px",
lg: "1440px",
},
backgroundImage: {
"d-image-header": "url('/images/desktop/image-header.jpg')",
"m-image-header": "url('/images/mobile/image-header.jpg')",
},
},
},
};
</script>
</head>
<body class="font-barlow">
<header
class="min-h-screen w-full bg-cover bg-center bg-m-image-header md:bg-d-image-header"
>
<nav class="flex justify-between items-center px-8 py-6">
<!-- Logo -->
<img src="./images/logo.svg" alt="Logo" class="h-8" />
<!-- Menu Hamburger pour mobile -->
<button class="flex items-center lg:hidden" id="menu-toggle">
<img src="./images/icon-hamburger.svg" alt="Menu" class="w-6 h-6" />
</button>
<!-- Menu principal -->
<div
class="flex items-center gap-10 lg:flex-row flex-col lg:gap-10 absolute lg:relative bg-black lg:bg-transparent inset-0 lg:inset-auto p-8 lg:p-0 gap-6 lg:flex lg:items-center hidden"
id="menu"
>
<ul class="flex items-center gap-10 text-white lg:flex-row flex-col">
<li class="hover:underline">
<a href="#">Home</a>
</li>
<li class="hover:underline">
<a href="#">About</a>
</li>
<li class="hover:underline">
<a href="#">Services</a>
</li>
</ul>
<button
type="button"
class="py-3 px-7 bg-white rounded-full uppercase font-semibold text-black"
>
Contact
</button>
</div>
</nav>
<h1
class="text-center text-white text-4xl mt-32 font-[600] tracking-[0.5rem] font-fraunces"
>
WE ARE CREATIVE
</h1>
<div class="flex justify-center mt-32">
<img
src="./images/icon-arrow-down.svg"
class="h-[160px]"
alt="arrow down"
/>
</div>
</header>
</body>
</html>
Raw
toggle.html
<script>
const menuToggle = document.getElementById("menu-toggle");
const menu = document.getElementById("menu");
menuToggle.addEventListener("click", () => {
menu.classList.toggle("hidden");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment