-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (146 loc) · 8.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link statico per Animations on Scroll-->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!-- Link per google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
<!-- Link per bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<!-- Inizio navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-light fixed-top navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="#">Flip</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03"
aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home
<span class="visually-hidden">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Fine navbar -->
<!-- Inizio container dell'header -->
<div class="container-fluid top-container">
<div class="row">
<div class="header col-lg-6">
<h1 data-aos="fade-down" class="title-home">Lo strumento migliore per creare grafici e questionari</h1>
<div class="row">
<div data-aos="fade-down" class="col-lg-5"><button class="btn btn-lg btn-outline-light"
style="margin: 0.5rem !important;">Get started</button>
</div>
<div data-aos="fade-down" class="col-lg-5"><button class="btn btn-lg btn-outline-light"
style="margin: 0.5rem !important;">Form del mese</button>
</div>
</div>
</div>
<div data-aos="fade-down" class="col-lg-6">
<img class="img-fluid header-image" src="images/dashboard.jpg" alt="">
</div>
</div>
</div>
<!-- Fine container dell'header -->
<!-- Inizio container del primo set di informazioni -->
<div class="container-fluid secondo-container">
<div class="row">
<div data-aos="fade-down" class="col-lg-6">
<img class="img-fluid image-info-1" src="images/people_technology.jpg" alt="">
</div>
<div data-aos="fade-up" class="col-lg-6 text-center" style="margin: auto;">
<h2 class="text-info-1">Come sviluppare un bellissimo sito</h2>
<hr class="line-break">
<p class="paragraph-info-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- Fine container del primo set di informazioni -->
<!-- Inizio container del secondo set di informazioni -->
<div class="container-fluid terzo-container">
<div class="row">
<div data-aos="fade-up" class="col-lg-6 text-center" style="margin: auto;">
<h2 class="text-info-2">Come sviluppare un bellissimo sito</h2>
<hr class="line-break">
<p class="paragraph-info-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div data-aos="fade-down" class="col-lg-6">
<img class="img-fluid image-info-2" src="images/people_technology.jpg" alt="">
</div>
</div>
</div>
<!-- Fine container del secondo set di informazioni -->
<!-- Inizio container del terzo set di informazioni -->
<div class="container-fluid quarto-container">
<div class="row">
<div data-aos="fade-down" class="col-lg-6">
<img class="img-fluid image-info-3" src="images/people_technology.jpg" alt="">
</div>
<div data-aos="fade-up" class="col-lg-6 text-center" style="margin: auto;">
<h2 class="text-info-3">Come sviluppare un bellissimo sito</h2>
<hr class="line-break">
<p class="paragraph-info-3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- Fine container del terzo set di informazioni -->
<!-- Link statico del JS per Animations on Scroll-->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
// You can also pass an optional settings object
// below listed default settings
AOS.init ({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 200, // values from 0 to 3000, with step 50ms
duration: 1000, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
</script>
</body>
</html>