GSAP PROJECT
HTML CODE-->
<!DOCTYPE html>
<html>
<head>
<title>Pratice</title>
<link rel="stylesheet"href="basic.css">
</head>
<body>
<div id="main">
<div id="nav">
<div id="nav-part1">
<h3>Francesco Gioia</h3>
</div>
<div id="nav-part2">
<h3>Instagram</h3>
<h3>Gallery</h3>
<h3 id="content">Content</h3>
</div>
</div>
<h1>hello,i'm</h1>
<h1>francesco</h1>
<h1>gioia</h1>
<img id="img1" src="https://images.unsplash.com/photo-1524504388940-
b1c1722653e1?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bW9kZWx8ZW58MHx8MHx8fDA%3D" alt="model">
<img id="img2" src="https://images.unsplash.com/photo-1529626455594-
4ff0802cfb7e?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bW9kZWx8ZW58MHx8MHx8fDA%3D" alt="">
<img id="img3" src="https://images.unsplash.com/photo-1524504388940-
b1c1722653e1?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bW9kZWx8ZW58MHx8MHx8fDA%3D" alt="">
<div id="footer">
<h3>francesco gioia</h3>
<h3>a street photo grapger <br>based in India</h3>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf+
+eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="Basic.js"></script>
</body>
</html>
CSS CODE-->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html,body{
height: 100%;
width: 100%;
}
#main{
height: 100%;
width: 100%;
background-color:black;
color: white;
}
#nav{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-part1 h3{
text-transform: uppercase;
margin-left: 55px;
font-size: 20px;
margin-top: 10px;
font-weight: 500;
}
#nav-part2 {
display: flex;
gap:35px;
}
#nav-part2 h3{
font-weight: 500;
font-size: 20px;
text-transform: uppercase;
margin-top: 10px;
}
#content{
margin-right: 60px;
}
#main h1{
/* background-color: red; */
text-transform: uppercase;
font-size: 130px;
font-weight: 400;
/* margin-top: 50px; */
line-height: 120px;
width: 80%;
margin-left: 15%;
position: relative;
z-index: 9;
}
#main h1:nth-child(2){
margin-top: 7%;
/* background-color: tomato; */
}
#main h1:nth-child(3){
text-align: center;
}
#main h1:nth-child(4){
text-align: center;
}
#main img{
height: 400px;
position: absolute;
top:10%;
left: 40%;
object-fit: cover;
}
#img1{
rotate: 20deg;
}
#img2{
rotate: 10deg;
}
#footer{
background-color: gray;
display: flex;
position: absolute;
bottom: .2%;
width: 100%;
height: 50px;
gap: 35%;
}
#footer h3{
text-transform: uppercase;
line-height: 16px;
text-align: center;
font-weight: 500;
letter-spacing: -1px;
font-size: 15px;
}
#footer h3:nth-child(1){
padding-left: 30px;
padding-top: 15px;
}
#footer h3:nth-child(2){
padding-right: 30px;
padding-top: 11px;
}
JAVA SCRIPT CODE-->
var tl=gsap.timeline()
tl.from("#nav h3",{
y:-50,
opacity:0,
delay:0.1,
duration:.2,
stagger:.3
})
tl.from("#main h1",{
x:-500,
opacity:0,
delay:0.1,
duration:.2,
stagger:0.3
})
tl.from("img",{
x:100,
opacity:0,
rotate:45,
duration:.2,
stagger:0.5
})
