Skip to content

Commit

Permalink
An animated website using HTML, CSS and Javascript and for animations…
Browse files Browse the repository at this point in the history 
…, GSAP is used and Locomotive JS is used for smooth scrolling.
  • Loading branch information
@ankiiitagupta
ankiiitagupta committed Dec 5, 2023
1 parent 650d61d commit 862ac3e
Show file tree
Hide file tree
Showing 24 changed files with 612 additions and 612 deletions.
0 ...ramPangram-FreeForPersonalUse-MAY2021.pdf → ...ramPangram-FreeForPersonalUse-MAY2021.pdf
View file
File renamed without changes.
0 ...r Personal Use v1.0/PPMori-Extralight.otf → ...r Personal Use v1.0/PPMori-Extralight.otf
View file
File renamed without changes.
0 ...onal Use v1.0/PPMori-ExtralightItalic.otf → ...onal Use v1.0/PPMori-ExtralightItalic.otf
View file
File renamed without changes.
0 ... for Personal Use v1.0/PPMori-Regular.otf → ... for Personal Use v1.0/PPMori-Regular.otf
View file
File renamed without changes.
0 ...ersonal Use v1.0/PPMori-RegularItalic.otf → ...ersonal Use v1.0/PPMori-RegularItalic.otf
View file
File renamed without changes.
0 ...for Personal Use v1.0/PPMori-SemiBold.otf → ...for Personal Use v1.0/PPMori-SemiBold.otf
View file
File renamed without changes.
0 ...rsonal Use v1.0/PPMori-SemiBoldItalic.otf → ...rsonal Use v1.0/PPMori-SemiBoldItalic.otf
View file
File renamed without changes.
0 duo_website/images/download.jpeg → images/download.jpeg
View file
File renamed without changes
0 duo_website/images/duostudio_logo.jpeg → images/duostudio_logo.jpeg
View file
File renamed without changes
0 duo_website/images/exp1.jpg → images/exp1.jpg
View file
File renamed without changes
0 duo_website/images/exp2.jpg → images/exp2.jpg
View file
File renamed without changes
0 duo_website/images/iden1.jpg → images/iden1.jpg
View file
File renamed without changes
0 duo_website/images/iden2.jpg → images/iden2.jpg
View file
File renamed without changes
0 duo_website/images/img1.avif → images/img1.avif
View file
File renamed without changes.
0 duo_website/images/img2.avif → images/img2.avif
View file
File renamed without changes.
0 duo_website/images/img3.avif → images/img3.avif
View file
File renamed without changes.
0 duo_website/images/img4.avif → images/img4.avif
View file
File renamed without changes.
0 duo_website/images/img5.avif → images/img5.avif
View file
File renamed without changes.
0 duo_website/images/strategy1.jpg → images/strategy1.jpg
View file
File renamed without changes
0 duo_website/images/strategy2.jpg → images/strategy2.jpg
View file
File renamed without changes
252 changes: 126 additions & 126 deletions duo_website/index.html → index.html
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cursor"></div>
<div id="nav">
<img src="images/duostudio_logo.jpeg" alt="" srcset="">
<div id="navbar2">
<h4>Home</h4>
<h4>Work</h4>
<h4>Studio</h4>
<h4>Contact</h4>
</div>
<div id="navbar3">
<div id="circle">

</div>
</div>
</div>
<div id="main">
<div class="page1">
<h1>Digitally crafted</h1>
<h2>brand experiences</h2>
<video autoplay muted loop src="https://static.videezy.com/system/resources/previews/000/050/697/original/383A0012-20191222_delivery_concept.mp4"></video>
</div>
<div id="page2">
<h1>We are DUO Studio,</h1>
<div id="page2-container">
<div id="page2-left">
<h2>A CREATIVE
COLLECTIVE
MADE TO UNLOCK
YOUR BRAND'S
POTENTIAL
</h2>
</div>
<div id="page2-right">
<P>We weave together bold strategy and creative execution to produce thought-provoking digital experiences. We take a highly personalized approach to delivering brand, web design and content marketing solutions. Born in the DC area- now serving client worldwide.</P>
<button>About Us</button>
</div>
</div>
</div>
<div id="page3">
<h1>Selected Works</h1>
<div id="page3-1">
<img src="images/download.jpeg" alt="">
<video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
</div>
<div id="page3-1">
<img src="images/download.jpeg" alt="">
<video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
</div>
<div id="page3-2">
<h1>view all projects</h1>
<div id="circle2">
<h4>discover</h4>
</div>
</div>
</div>
<div id="page4">
<div class="elem">
<img src="images/strategy1.jpg" alt="">
<div id="text-div">
<h1>Strategy</h1>
<h1>Strategy</h1>
</div>
<img src="images/strategy2.jpg" alt="">
</div>
<div class="elem">
<img src="images/iden1.jpg" alt="">
<div id="text-div">
<h1>Identity</h1>
<h1>Identity</h1>
</div>
<img src="images/iden2.jpg" alt="">
</div>
<div class="elem">
<img src="images/exp1.jpg" alt="">
<div id="text-div">
<h1>Experience</h1>
<h1>Experience</h1>
</div>
<img src="images/exp2.jpg" alt="">
</div>

</div>
<div id="page5">
<h2>mentions clients</h2>
<div id="box" data-image="images/img1.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img2.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img3.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img4.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
</div>
<footer>
<div id="last">
<h1>Start a project</h1>
<div id="circle3">
<h2>GET IN TOUCH</h2>
</div>
</div>
<h3>Create an experience that's as remarkableas your business.</h3>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cursor"></div>
<div id="nav">
<img src="images/duostudio_logo.jpeg" alt="" srcset="">
<div id="navbar2">
<h4>Home</h4>
<h4>Work</h4>
<h4>Studio</h4>
<h4>Contact</h4>
</div>
<div id="navbar3">
<div id="circle">

</div>
</div>
</div>
<div id="main">
<div class="page1">
<h1>Digitally crafted</h1>
<h2>brand experiences</h2>
<video autoplay muted loop src="https://static.videezy.com/system/resources/previews/000/050/697/original/383A0012-20191222_delivery_concept.mp4"></video>
</div>
<div id="page2">
<h1>We are DUO Studio,</h1>
<div id="page2-container">
<div id="page2-left">
<h2>A CREATIVE
COLLECTIVE
MADE TO UNLOCK
YOUR BRAND'S
POTENTIAL
</h2>
</div>
<div id="page2-right">
<P>We weave together bold strategy and creative execution to produce thought-provoking digital experiences. We take a highly personalized approach to delivering brand, web design and content marketing solutions. Born in the DC area- now serving client worldwide.</P>
<button>About Us</button>
</div>
</div>
</div>
<div id="page3">
<h1>Selected Works</h1>
<div id="page3-1">
<img src="images/download.jpeg" alt="">
<video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
</div>
<div id="page3-1">
<img src="images/download.jpeg" alt="">
<video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
</div>
<div id="page3-2">
<h1>view all projects</h1>
<div id="circle2">
<h4>discover</h4>
</div>
</div>
</div>
<div id="page4">
<div class="elem">
<img src="images/strategy1.jpg" alt="">
<div id="text-div">
<h1>Strategy</h1>
<h1>Strategy</h1>
</div>
<img src="images/strategy2.jpg" alt="">
</div>
<div class="elem">
<img src="images/iden1.jpg" alt="">
<div id="text-div">
<h1>Identity</h1>
<h1>Identity</h1>
</div>
<img src="images/iden2.jpg" alt="">
</div>
<div class="elem">
<img src="images/exp1.jpg" alt="">
<div id="text-div">
<h1>Experience</h1>
<h1>Experience</h1>
</div>
<img src="images/exp2.jpg" alt="">
</div>

</div>
<div id="page5">
<h2>mentions clients</h2>
<div id="box" data-image="images/img1.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img2.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img3.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img4.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
</div>
<footer>
<div id="last">
<h1>Start a project</h1>
<div id="circle3">
<h2>GET IN TOUCH</h2>
</div>
</div>
<h3>Create an experience that's as remarkableas your business.</h3>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>
Loading

0 comments on commit 862ac3e

Please sign in to comment.