-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
114 lines (100 loc) · 4.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Site web simple</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home </a></li>
<li><a href="about.html">Témoignage d'étudiants</a></li>
<li><a href="#">Devenir étudiant</a></li>
</ul>
</nav>
<div class="hero">
<div class="hero-content">
<div class="hero-title">
<h1><strong>Campus Numérique</strong><br/> In The Alps</h1>
<h2>Nous formons des talents</h2>
</div>
<div class="hero-subtitle">
<p>
Société coopérative d’intérêt collectif, liée à une réalité économique, dans une zone géographique.
</p>
<button>Devenir étudiant</button>
</div>
</div>
<div class="hero-illustration">
<svg class="rectangle geometry" width="148" height="148" viewBox="0 -4 148 154" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="148" height="148" rx="40" stroke="#8A7B7B" stroke-width="3"/>
</svg>
<svg class="triangle geometry" width="135" height="122" viewBox="0 -4 135 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path stroke="#8A7B7B" stroke-width="3" d="M51.8018 9.00001C58.73 -2.99999 76.0505 -3.00001 82.9788 8.99999L132.342 94.5C139.27 106.5 130.61 121.5 116.754 121.5H18.0269C4.17047 121.5 -4.48981 106.5 2.43839 94.5L51.8018 9.00001Z""/>
</svg>
<svg class="ellipse geometry" width="132" height="132" viewBox="0 -4 132 139" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="66" cy="66" r="66" stroke="#8A7B7B" stroke-width="3"/>
</svg>
</div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script async defer>
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
}
function rotateRandom(target){
anime.remove(target)
anime({
targets: target,
scale: 1.2,
rotate: getRandomIntInclusive(-360, 360)
})
}
function initialState(target){
anime.remove(target)
anime({
targets: target,
rotate: 0,
scale: 1
})
}
var geometries = document.querySelectorAll('.geometry')
geometries.forEach((element) => {
element.addEventListener('mouseenter', (event) => {
rotateRandom(event.target)
})
element.addEventListener('mouseleave', (event) => {
initialState(event.target)
})
})
anime.timeline({
easing: 'easeInOutSine',
delay: function(el, i) { return i * 250 },
})
.add({
duration: 1500,
targets: '.triangle path, .rectangle rect, .ellipse circle',
strokeDashoffset: [anime.setDashoffset, 0],
})
.add({
targets: '.triangle path, .rectangle rect, .ellipse circle',
strokeOpacity: 0,
duration: 750,
fill: '#E8649B'
})
</script>
</body>
</html>