Skip to content

Commit

Permalink
added animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@bilecky
bilecky committed Aug 16, 2023
1 parent d12f894 commit 41cfa3f
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 27 deletions.
63 changes: 36 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Oswald:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://cdn.tailwindcss.com"></script>
<script>

Expand All @@ -38,9 +40,9 @@


<header>
<nav class=" py-8 flex items-center justify-between px-8 ">
<h1 class="text-white text-2xl"><a href="#"><img src="icons/logo-icon.svg" alt="giard design logo"></a></h1>
<div class="lg:hidden fixed right-8 z-50">
<nav class=" py-8 flex items-center justify-between px-8 " >
<h1 data-aos="zoom-in" data-aos-duration="1200" class="text-white text-2xl"><a href="#"><img src="icons/logo-icon.svg" alt="giard design logo"></a></h1>
<div data-aos="zoom-in" data-aos-duration="1200" class="lg:hidden fixed right-8 z-50">
<button id="mobile-menu-button" class="text-themeBlack transition hover:text-gray-500 focus:outline-none">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -106,17 +108,18 @@ <h1 class="text-white text-2xl"><a href="#"><img src="icons/logo-icon.svg" alt="
</div>
</div>
<section class="heeader_hero-section md:flex mx-auto ">
<div class="md:w-1/2 bg-themeBeigeBgc flex flex-col justify-center items-start p-8 relative overflow-hidden">
<div class=" md:w-1/2 bg-themeBeigeBgc flex flex-col justify-center items-start p-8 relative overflow-hidden">
<img src="images/hero-photo.png" alt="giard design hero image"
class="h-full w-full object-cover absolute top-0 left-0 opacity-20 md:hidden">

<div class="relative ">
<div class="lg:pr-28">
<h2
<div class="lg:pr-28 " data-aos="fade-right" data-aos-duration="1200">
<h2
class="header-heading text-4xl font-medium md:text-5xl lg:text-6xl text-primary mb-4 tracking-wide ">
Nowoczesna
aranżacja Twojego ogrodu</h2>
<p class="tracking-wide font-medium md:text-base text-themeBlack mb-6 text-left mt-11 ">Marka
<p
class="tracking-wide font-medium md:text-base text-themeBlack mb-6 text-left mt-11 ">Marka
GiardDesign to
wieloletnie
doświadczenie i
Expand All @@ -125,8 +128,8 @@ <h1 class="text-white text-2xl"><a href="#"><img src="icons/logo-icon.svg" alt="
projektu.</p>
</div>

<div class="flex flex-col lg:flex-row gap-4 mt-16">
<a href="#contact"
<div class="flex flex-col lg:flex-row gap-4 mt-16" >
<a href="#contact"
class="text-themeGrey bg-themeGreenBgc rounded-full px-5 py-3 text-center sm:w-3/5 md:w-4/5 lg:w-auto transition hover:scale-105">Skontaktuj
się z nami</a>
<div
Expand All @@ -149,10 +152,10 @@ <h1 class="text-white text-2xl"><a href="#"><img src="icons/logo-icon.svg" alt="

<main>
<section id="offer" class=" offer-section max-w-7xl pt-28 pb-40 mx-auto px-8">
<div class="lg:w-4/6 lg:px-24 pb-20">
<div class="lg:w-4/6 lg:px-24 pb-20" data-aos="fade-right" data-aos-duration="1100">
<h2 class="text-sm mb-4 text-themeGreenBgc">Oferta</h2>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeBlack tracking-wide">Działamy <span
class="italic font-semibold ">kompleksowo</span></h3>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeBlack tracking-wide">
Działamy <span class="italic font-semibold ">kompleksowo</span></h3>
<p class="text-themeBlack">Oferujemy kompletną obsługę inwestycji terenów zielonych. Projektujemy
nowoczesne
ogrody przydomowe oraz
Expand Down Expand Up @@ -235,10 +238,10 @@ <h4 class="text-2xl font-medium mb-2">
<img src="images/about-img.png" alt="giard design hero image"
class="h-full w-full object-cover absolute top-0 left-0 opacity-20 md:hidden -z-10">

<div class="lg:p-20">
<div class="lg:p-20 " data-aos="fade-right" data-aos-duration="1100">
<h2 class="text-sm mb-4 text-themeGrey">O firmie</h2>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeGrey tracking-wide">Tworzymy <span
class="italic font-semibold block">z pasją</span> </h3>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeGrey tracking-wide">
Tworzymy <span class="italic font-semibold block">z pasją</span> </h3>
<p class="text-themeGrey">Każdy projekt to nowe wyzwanie. Dlatego nasz zespół tworzą wykwalifikowani
projektanci oraz architekci, których zadaniem jest rozpoznanie i realizacja potrzeb każdego Klienta.
Nasza specjalizacja to przestrzenie nowoczesne, które charakteryzuje minimalizm, geometria i elegancka
Expand All @@ -259,10 +262,10 @@ <h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-th
</div>
</section>
<section id="projects" class="projects pt-28 mx-auto bg-themeBeigeBgc">
<div class="lg:w-4/6 px-8 lg:px-30 pb-20 mx-auto max-w-7xl">
<div data-aos="fade-right" data-aos-duration="1100" class="lg:w-4/6 px-8 lg:px-30 pb-20 mx-auto max-w-7xl">
<h2 class="text-sm mb-4 text-themeGreenBgc">Oferta</h2>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-semibold mb-8 text-themeBlack tracking-wide">Działamy <span
class="italic font-semibold ">kompleksowo</span></h3>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeBlack tracking-wide">
Działamy <span class="italic font-semibold ">kompleksowo</span></h3>
</div>
<div class="masonry relative gap-8 ">
<div class="item cursor-pointer transform overflow-hidden ">
Expand Down Expand Up @@ -315,10 +318,10 @@ <h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-semibold mb-8 text
<section class="instagram-section py-16 max-w-7xl mx-auto px-8 ">


<div class="bg-themeGreenBgc py-28 px-4 md:px-10 lg:px-20 md:flex justify-between text-center md:text-left">
<div data-aos="fade-right" data-aos-duration="1100" class="bg-themeGreenBgc py-28 px-4 md:px-10 lg:px-20 md:flex justify-between text-center md:text-left">

<h3 class="md:w-3/5 lg:w-3/4 mb-6 md:mb-0 text-themeGrey text-2xl md:text-3xl lg:text-4xl xl:text-5xl ">Zostańmy w kontakcie! Znajdziesz nas na <span
class="italic font-semibold">Instagramie.</span></h3>
<h3 class="md:w-3/5 lg:w-3/4 mb-6 md:mb-0 text-themeGrey text-2xl md:text-3xl lg:text-4xl xl:text-5xl ">
Zostańmy w kontakcie! Znajdziesz nas na <span class="italic font-semibold">Instagramie.</span></h3>
<div class="ml-4">
<span class="block mb-6 text-themeGrey md:w-2/3">Śledź nasze najnowsze realizacje</span>
<button
Expand All @@ -343,12 +346,16 @@ <h5 class=" flex items-center justify-center"><a href="#"><img src="icons/logo-i
<div class="text-white mx-8 pt-8">
<div class="md:flex md:justify-between items-center">
<div class="text-center flex justify-evenly lg:justify-between flex-wrap md:w-1/3">
<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75" href="#">Kontakt</a>
<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75" href="#">Instagram</a>
<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75" href="#">Facebook</a>
<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75" href="#">LinkedIn</a>
</div>

<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">Kontakt</a>
<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">Instagram</a>
<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">Facebook</a>
<a class="text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">LinkedIn</a>
</div>


<div class="text-center p-4 px-0 ">
<span class="md:inline-block mr-2 md:mr-12">000-000-000</span>
Expand All @@ -367,7 +374,9 @@ <h5 class=" flex items-center justify-center"><a href="#"><img src="icons/logo-i
</div>
</footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="main.js"></script>

</body>

</html>
4 changes: 4 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,7 @@ popup.addEventListener('click', event => {
popup.style.display = 'none'
}
})


AOS.init();

0 comments on commit 41cfa3f

Please sign in to comment.