xxxxxxxxxx1
<header>2
3
<nav class="navbar navbar-expand-lg fixed-top shadow-0">4
<div class="container-fluid">5
<a class="navbar-brand" href="#">MDB</a>6
<button7
class="navbar-toggler ps-0"8
type="button"9
data-mdb-toggle="collapse"10
data-mdb-target="#navbarExample01"11
aria-controls="navbarExample01"12
aria-expanded="false"13
aria-label="Toggle navigation"14
>15
<span16
class="navbar-toggler-icon d-flex justify-content-start align-items-center"17
>18
<i class="fas fa-bars"></i>19
</span>20
</button>21
<div class="collapse navbar-collapse menu-links" id="navbarExample01">22
<ul class="navbar-nav me-auto mb-2 mb-lg-0">23
<li class="nav-item ms-4">24
<a class="nav-link" aria-current="page" href="#arte">L'arte</a>25
</li>26
<li class="nav-item ms-4">27
<a class="nav-link" aria-current="musica" href="#musica">La musica</a>28
</li>29
<li class="nav-item ms-4">30
<a class="nav-link" aria-current="cucina" href="#cucina">La cucina</a>31
</li>32
</ul>33
34
<ul class="navbar-nav flex-row socials">35
<!-- Icons -->36
<li class="nav-item">37
<a class="nav-link me-4" href="#!">38
<i class="fab fa-youtube"></i>39
</a>40
</li>41
<li class="nav-item">42
<a class="nav-link me-4" href="#!">43
<i class="fab fa-facebook-f"></i>44
</a>45
</li>46
<li class="nav-item">47
<a class="nav-link me-4" href="#!">48
<i class="fab fa-instagram"></i>49
</a>50
</li>51
<li class="nav-item">52
<a class="nav-link" href="#!">53
<i class="fab fa-tiktok"></i>54
</a>55
</li>56
</ul>57
</div>58
</div>59
</nav>60
61
<div class="overlay first"></div>62
<div class="overlay second"></div>63
<div class="overlay third"></div>64
65
<hr class="border-bottom">66
67
<div class="content">68
69
<div class="text">70
<p class="subtitle text-uppercase">Soggettivamente su Roma</p>71
<h1 class="title">72
<span>La Dolce <br>Vita<br> A Roma</span>73
</h1>74
<p class="desc">Blog sulle cose più interessanti di Roma. E ce n'è molto. <br> L'arte, la musica, la cucina e molto altro in stile italiano.</p>75
<a href="#!" class="readmore text-uppercase text-white">Scroll For More</a>76
</div>77
78
<div class="img-1"></div>79
80
<div class="icons">81
<ul class="list-unstyled d-flex flex-row">82
<li><i class="fas fa-wine-glass-alt fa-lg mx-4" style="color: #008d44;"></i></li>83
<li><i class="fas fa-pizza-slice fa-lg mx-4" style="color: #fff;"></i></li>84
<li><i class="fas fa-coffee fa-lg mx-4" style="color: #ce2b37;"></i></li>85
</ul>86
</div>87
88
<div class="img-2"></div>89
90
<div class="img-3"></div>91
92
</div>93
94
</header>xxxxxxxxxx1
.navbar .nav-link,2
.navbar .navbar-toggler-icon,3
.navbar .navbar-brand {4
color: #fff;5
}6
7
.navbar {8
background-color: transparent;9
}10
11
.navbar-brand {12
font-weight: 900;13
}14
15
html16
body {17
width: 100%;18
height: 100vh;19
background: #000;20
color: #fff;21
overflow: hidden;22
}23
24
img {25
width: 100%;26
height: auto;27
z-index: -1;28
}29
30
.border-bottom {31
position: absolute;32
top: 100px;33
width: 0%;34
z-index: 1;35
border-color: rgba(255, 255, 255, .2);36
border-width: .5px;37
}38
39
@media (min-width: 1340px) {40
.text {41
left: 450px !important;42
}43
}44
45
.text {46
position: absolute;47
top: 520px;48
left: 285px;49
transform: translate(-50%, -50%);50
z-index: 1;51
}52
53
.subtitle {54
text-transform: uppercase;55
font-size: 14px;56
}57
58
.subtitle::before {59
display: inline-block;60
content: "";61
border: 1px solid #fff;62
width: 80px;63
margin: 0 10px 0 0;64
transform: translateY(-4px);65
}66
67
.title {68
font-size: 120px;69
text-transform: uppercase;70
width: 0%;71
overflow: hidden;72
white-space: nowrap;73
font-weight: 900;74
}75
76
.desc {77
color: rgba(255, 255, 255, .5);78
margin-top: 40px;79
line-height: 2;80
}81
82
.readmore {83
display: inline-block;84
margin-top: 80px;85
border-bottom: 1px solid #fff;86
text-decoration: none;87
padding-bottom: 3px;88
font-weight: 700;89
}90
91
.icons {92
position: absolute;93
bottom: 100px;94
right: 320px;95
width: 450px;96
opacity: 0;97
}98
99
.img-1 {100
position: absolute;101
top: 300px;102
right: 320px;103
transform: translateY(-50%);104
background: url('https://mdbootstrap.com/img/Photos/new-templates/landing-page-italia/5.jpg') no-repeat;105
background-position: center;106
background-size: cover;107
width: 0;108
height: 600px;109
}110
111
.img-2 {112
position: absolute;113
top: 320px;114
right: 0;115
transform: translateY(-50%);116
background: url('https://mdbootstrap.com/img/Photos/new-templates/landing-page-italia/3.jpg') no-repeat;117
background-position: top;118
background-size: cover;119
width: 0;120
height: 350px;121
margin-bottom: 30px;122
}123
124
.img-3 {125
position: absolute;126
top: 820px;127
right: 0;128
transform: translateY(-50%);129
background: url('https://mdbootstrap.com/img/Photos/new-templates/landing-page-italia/8.jpg') no-repeat;130
background-position: top;131
background-size: cover;132
width: 0;133
height: 600px;134
}135
136
.overlay {137
position: absolute;138
width: 100%;139
height: 100%;140
left: 0%;141
z-index: 2;142
background: #d7ae94;143
}144
145
.first {146
top: 0;147
}148
149
.second {150
top: 33.3%151
}152
153
.third {154
top: 66.6%;155
}156
157
@media(max-height: 720px) {158
.text {159
top: 360px;160
left: 360px;161
}162
163
.title {164
font-size: 100px;165
}166
167
.desc {168
margin-top: 30px;169
}170
171
.readmore {172
margin-top: 60px;173
}174
175
.img-1 {176
top: 240px;177
right: 330px;178
height: 480px;179
}180
181
.icons {182
right: 330px;183
}184
185
.img-2 {186
top: 270px;187
height: 280px;188
}189
190
.img-3 {191
top: 740px;192
}193
}xxxxxxxxxx1
TweenMax.from('.navbar-brand', 1, {2
delay: 1.2,3
opacity: 0,4
x: -20,5
ease: Expo.easeInOut6
})7
8
TweenMax.staggerFrom('.menu-links ul li', 1, {9
delay: 1.2,10
opacity: 0,11
x: -20,12
ease: Power4.easeInOut13
}, 0.08)14
15
TweenMax.from('.socials', 1, {16
delay: 1.6,17
opacity: 0,18
x: -20,19
ease: Expo.easeInOut20
})21
22
TweenMax.to('.border-bottom', 1, {23
delay: 1.4,24
width: '100%',25
ease: Expo.easeInOut26
})27
28
TweenMax.from('.subtitle', 1, {29
delay: 2.8,30
opacity: 0,31
x: -20,32
ease: Expo.easeInOut33
})34
35
TweenMax.to('.title', 1, {36
delay: 2.2,37
width: '100%',38
ease: Expo.easeInOut39
})40
41
TweenMax.from('.desc', 1, {42
delay: 2.8,43
opacity: 0,44
x: -20,45
ease: Expo.easeInOut46
})47
48
TweenMax.from('.readmore', 1, {49
delay: 2.8,50
opacity: 0,51
x: -20,52
ease: Expo.easeInOut53
})54
55
TweenMax.to('.icons', 1, {56
delay: 3,57
opacity: 1,58
ease: Expo.easeInOut59
})60
61
TweenMax.to('.img-1', 1, {62
delay: 2.2,63
width: '450px',64
ease: Expo.easeInOut65
})66
67
TweenMax.to('.img-2', 1, {68
delay: 2.2,69
width: '300px',70
ease: Expo.easeInOut71
})72
73
TweenMax.to('.img-3', 1, {74
delay: 2.2,75
width: '300px',76
ease: Expo.easeInOut77
})78
79
TweenMax.to('.first', 1.5, {80
delay: .2,81
left: '-100%',82
ease: Expo.easeInOut83
})84
85
TweenMax.to('.second', 1.5, {86
delay: .4,87
left: '-100%',88
ease: Expo.easeInOut89
})90
91
TweenMax.to('.third', 1.5, {92
delay: .6,93
left: '-100%',94
ease: Expo.easeInOut95
}) Console errors: 0