Skip to content

Commit

Permalink
Update blog-post.html (#226)
Browse files Browse the repository at this point in the history 
Looking good :)
  • Loading branch information
@LauraBLei
LauraBLei authored Apr 2, 2024
1 parent b93883f commit ce7141d
Showing 1 changed file with 186 additions and 66 deletions.
252 changes: 186 additions & 66 deletions pages/blog-post.html
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,196 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog Post</title>
<meta name="description" content="Discover insightful articles and heartfelt stories on Mozika Manova Fiainana (MMF), a music school in Antsirabe, Madagascar, nurturing hope and talent in underprivileged youth. Explore the transformative power of music education, the impact on local communities, and the inspiring journeys of students. Join us in celebrating the resilience, empowerment, and positive change fostered by MMF."/>
<link rel="stylesheet" href="../css/styles.css">
<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=Just+Another+Hand&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<meta
name="description"
content="Discover insightful articles and heartfelt stories on Mozika Manova Fiainana (MMF), a music school in Antsirabe, Madagascar, nurturing hope and talent in underprivileged youth. Explore the transformative power of music education, the impact on local communities, and the inspiring journeys of students. Join us in celebrating the resilience, empowerment, and positive change fostered by MMF."
/>
<link rel="stylesheet" href="../css/styles.css" />
<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=Just+Another+Hand&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header class="flex h-24 items-center justify-between px-10 mt-6">
<div class="flex flex-row items-center gap-10 text-base">
<a href="#">
<img src="../images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
<div class="flex flex-row items-center gap-10 text-base">
<a href="#">
<img
src="../images/SVGs/headerLogo.svg"
aria-label="Header Logo"
alt="Header Logo"
class="cursor-pointer w-20 h-20"
/>
</a>
</div>
<nav class="flex flex-row items-center gap-10">
<button
id="openSearchBarDrawer"
class="flex gap-4 items-center cursor-pointer hover:scale-105 transition-transform"
>
<!-- JS intention: On click, remove -translate-y-full from section id="search-drawer-from-header", and add translate-y-0 -->
<img
src="../images/SVGs/Search.svg"
class="w-5 h-5 -mr-1"
aria-label="Search Button"
alt="Search Button"
/>
<span class="text-2xl font-medium">Search</span>
</button>
<a
href="#"
class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform"
>News</a
>
<a
href="#"
class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform"
>About Us</a
>
<div
class="relative cursor-pointer hover:scale-105 transition-transform"
>
<div class="flex items-center">
<span class="text-2xl font-medium">Projects</span>
<img
src="../images/SVGs/chevron-down.svg"
aria-label="Projects Dropdown Menu"
alt="Projects Dropdown Menu"
class="ml-3"
/>
</div>
<!-- Dropdown projects menu, hidden, toggle visibility with JS -->
<div class="absolute hidden mt-2 bg-white">
<a
href="#"
class="block p-2 border-t border-b border-black hover:bg-gray-100"
>Project 1</a
>
<a
href="#"
class="block p-2 border-b border-black hover:bg-gray-100"
>Project 2</a
>
</div>
</div>
<button
class="alt-button cursor-pointer text-white transition-transform hover:scale-110 w-[148px] h-[49px] text-2xl font-normal"
>
DONATE
</button>
<div
class="relative flex w-5 h-5 items-center group"
id="language-selector"
>
<img
src="../images/SVGs/globe-solid.svg"
aria-label="Globe Icon For Language Selection"
alt="Language Selection"
class="cursor-pointer object-contain h-5 w-5"
/>
<div class="absolute left-0 w-full bg-white" id="language-options">
<a href="#" class="block">
<img
src="../images/SVGs/norway.svg"
aria-label="Norwegian Flag Language Selection"
alt="Norwegian Flag"
class="inline h-6 w-8"
/>
</a>
<a href="#" class="block">
<img
src="../images/SVGs/unitedKingdom.svg"
aria-label="English Flag Language Selection"
alt="English Flag"
class="inline h-6 w-8"
/>
</a>
<a href="#" class="block">
<img
src="../images/SVGs/madagascar.svg"
aria-label="Malagasy Flag Language Selection"
alt="Malagasy Flag"
class="inline h-6 w-8"
/>
</a>
</div>
</div>
<nav class="flex flex-row items-center gap-10">
<button id="openSearchBarDrawer" class="flex gap-4 items-center cursor-pointer hover:scale-105 transition-transform"> <!-- JS intention: On click, remove -translate-y-full from section id="search-drawer-from-header", and add translate-y-0 -->
<img src="../images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
<span class="text-2xl font-medium">Search</span>
</button>
<a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">News</a>
<a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">About Us</a>
<div class="relative cursor-pointer hover:scale-105 transition-transform">
<div class="flex items-center">
<span class="text-2xl font-medium">Projects</span>
<img src="../images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
</div>
<!-- Dropdown projects menu, hidden, toggle visibility with JS -->
<div class="absolute hidden mt-2 bg-white">
<a href="#" class="block p-2 border-t border-b border-black hover:bg-gray-100">Project 1</a>
<a href="#" class="block p-2 border-b border-black hover:bg-gray-100">Project 2</a>
</div>
</div>
<button class="alt-button cursor-pointer text-white transition-transform hover:scale-110 w-[148px] h-[49px] text-2xl font-normal">
DONATE
</button>
<div class="relative flex w-5 h-5 items-center group" id="language-selector">
<img src="../images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
<div class="absolute left-0 w-full bg-white" id="language-options">
<a href="#" class="block">
<img src="../images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8">
</a>
<a href="#" class="block">
<img src="../images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8">
</a>
<a href="#" class="block">
<img src="../images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8">
</a>
</div>
</div>
</nav>
</nav>
</header>
<!-- Search Bar Overlay, hidden initially. -->
<section id="search-drawer-from-header" class="fixed border border-black inset-x-0 top-0 w-full h-16 bg-white hidden transform -translate-y-full transition-transform duration-500 ease-out z-50" aria-label="search-bar">
<h2 id="search-label" class="sr-only">Search Bar</h2>
<div class="flex justify-center items-center pt-3">
<div class="w-full max-w-lg mx-auto border border-black bg-gray-100 flex items-center">
<form class="flex flex-grow">
<label for="Search-Drawer" class="sr-only">Search Site</label>
<input type="search" class="search-drawer_input flex-grow bg-transparent focus:outline-none p-2 text-sm" id="Search-Drawer" placeholder="Search..." autocomplete="off">
<button type="submit" class="search-drawer_submit p-2 text-gray-500 flex items-center justify-center">
<img src="../images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
</button>
</form>
</div>
<!-- Close button ready for JS. Should also close on outside-click, not just by close button itself -->
<button id="closeSearchBarDrawer" class="search-drawer_close text-sm pr-5">Close</button> <!-- JS intention: On click, add -translate-y-full to section id="search-drawer-from-header" and remove translate-y-0 -->
<section
id="search-drawer-from-header"
class="fixed border border-black inset-x-0 top-0 w-full h-16 bg-white hidden transform -translate-y-full transition-transform duration-500 ease-out z-50"
aria-label="search-bar"
>
<h2 id="search-label" class="sr-only">Search Bar</h2>
<div class="flex justify-center items-center pt-3">
<div
class="w-full max-w-lg mx-auto border border-black bg-gray-100 flex items-center"
>
<form class="flex flex-grow">
<label for="Search-Drawer" class="sr-only">Search Site</label>
<input
type="search"
class="search-drawer_input flex-grow bg-transparent focus:outline-none p-2 text-sm"
id="Search-Drawer"
placeholder="Search..."
autocomplete="off"
/>
<button
type="submit"
class="search-drawer_submit p-2 text-gray-500 flex items-center justify-center"
>
<img
src="../images/SVGs/Search.svg"
class="w-4 h-4"
aria-label="Search Now Button"
alt="Search Now Button"
/>
</button>
</form>
</div>
<!-- Close button ready for JS. Should also close on outside-click, not just by close button itself -->
<button
id="closeSearchBarDrawer"
class="search-drawer_close text-sm pr-5"
>
Close
</button>
<!-- JS intention: On click, add -translate-y-full to section id="search-drawer-from-header" and remove translate-y-0 -->
</div>
</section>

</body>
</html>
<main>
<!--Main Content Section 1-->
<section class="flex justify-center">
<div class="max-w-[1200px] size-full">
<h2 class="text-4xl font-semibold">Headliner</h2>
<p class="my-[26px] text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<div class=" bg-[url('/assets/placeholder-images/IMG_5351.webp')] bg-no-repeat h-[413px] w-full bg-cover overflow-hidden mb-[85px] bg-center shadow-[20px_20px_0px_5px_rgba(91,142,125)]">
</div>
</div>
</section>
<!--End Main Content Section 1-->
</main>
</body>
</html>

0 comments on commit ce7141d

Please sign in to comment.