x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-14 08:35:31 +03:00 committed by GitHub
parent 040511e16e
commit 57a56910f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 154 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
100_projects/82-explore-developer-website/imgs/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
100_projects/82-explore-developer-website/imgs/girl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
100_projects/82-explore-developer-website/imgs/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 KiB

BIN
100_projects/82-explore-developer-website/imgs/right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

BIN
100_projects/82-explore-developer-website/imgs/rock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 KiB

49
100_projects/82-explore-developer-website/index.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>document</title>
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/css?family=Oswald:700|Poppins"rel="stylesheet"/>
</head>
<body>
<section>
<nav>
<h3>Developer</h3>
<a class="button">Sign Up</a>
</nav>
<div class="container">
<h2 class="main-title">Explore.</h2>
<img src="imgs/bg.png" class="bg1" alt="bg"/>
<img src="imgs/girl.png" class="girl" alt="girl"/>
<img src="imgs/rock.png" class="rock" alt="rock"/>
</div>
<div class="content">
<div class="content-images">
<div>
<img src="imgs/left.png" alt="1"/>
<h4>lorem</h4>
<h3>Mountains of lorem</h3>
</div>
<div>
<img src="imgs/right.png" alt="2"/>
<h4>lorem</h4>
<h3>Mountains of lorem</h3>
</div>
</div>
<div class="text">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere neque
consequuntur a nisi, illo quia cupiditate fuga et eos minima
</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
<script src="script.js"></script>
</body>
</html>

19
100_projects/82-explore-developer-website/script.js Normal file
View File

@ -0,0 +1,19 @@
let controller = new ScrollMagic.Controller();
let timeline = new TimelineMax();
timeline
.to(".rock", 10, { y: -300 })
.to(".girl", 10, { y: -200 }, "-=10")
.fromTo(".bg1", { y: -50 }, { y: 0, duration: 10 }, "-=10")
.to(".content", 10, { top: "0%" }, "-=10")
.fromTo(".content-images", { opacity: 0 }, { opacity: 1, duration: 3 })
.fromTo(".text", { opacity: 0 }, { opacity: 1, duration: 3 });
let scene = new ScrollMagic.Scene({
triggerElement: "section",
duration: "300%",
triggerHook: 0,
})
.setTween(timeline)
.setPin("section")
.addTo(controller);

86
100_projects/82-explore-developer-website/style.css Normal file
View File

@ -0,0 +1,86 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
font-family: "Poppins", sans-serif;
}
nav {
position: absolute;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 30px;
}
nav h3{
font-size: 23px;
}
nav .button{
border: 3px double rgba(255, 255, 255, .5);
padding: 7px 15px;
transition: .3s;
cursor: pointer;
}
nav .button:hover{
background-color: #fff;
color: black;
}
.container {
height: 100vh;
}
.container img {
width: 100%;
position: absolute;
height: 110vh;
object-fit: cover;
z-index: -1;
}
.main-title {
position: absolute;
top: 35%;
left: 50%;
font-size: 5.5rem;
transform: translate(-50%, -30%);
}
.content {
width: 100%;
background: rgb(24, 24, 24);
min-height: 100vh;
z-index: 2;
position: absolute;
}
.content-images {
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
text-align: center;
min-height: 60vh;
}
.content-images div img{
max-width: 100%;
border: 3px double rgba(255, 255, 255, .3);
}
.text{
display: flex;
justify-content: center;
align-items: center;
}
.text p {
text-align: center;
padding: 1rem 5rem;
font-size: 1.1rem;
}
@media(max-width:767px){
.content-images{
flex-direction: column;
gap: 25px;
}
.text{
flex-direction: column;
}
.content-images div img{
width: 320px;
}
}