-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
232 lines (204 loc) · 9.5 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.O ">
<meta name="description" content="try hard">
<title> Jeux vidéo checklist </title>
<!-- Custom styles for this template -->
<link href="styles/style.css" rel="stylesheet">
<!---i just put a good ass font hehe----->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Roboto&family=Roboto+Condensed:wght@300&display=swap"
rel="stylesheet">
</head>
<body>
<!-- Header -->
<section class="nav-bar">
<a href="./index.html">
<img class="logo-home" src="./images/logo-canon.png"
alt="logo d'une manette avec symbole de zelda en arriere plan et laurier de succés sur les joysticks" />
</a>
</section>
<!-- Carrousel -->
<section class="carrousel">
<!-- <h1>Carrousel</h1> -->
<div class="slider-wrapper">
<div class="slider">
<img id="slide-1" class="img-slider"
src="https://cdn.pixabay.com/photo/2017/08/10/06/06/controller-2618897_1280.jpg"
alt="image d'une manette de playstation 4 ">
<img id="slide-2" class="img-slider"
src="https://images.pexels.com/photos/4009601/pexels-photo-4009601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="image">
<img id="slide-3" class="img-slider"
src="https://images.unsplash.com/photo-1534423861386-85a16f5d13fd?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="joueur jouant à un First-person shooter">
</div>
<div>
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
</div>
</div>
</section>
<div class="keys-words-home">
<svg viewbox="0 0 100 20">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="#326384"/>
<stop offset="95%" stop-color="#123752"/>
</linearGradient>
<pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
<path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)">
<animateTransform
attributeName="transform"
begin="0s"
dur="1.5s"
type="translate"
from="0,0"
to="40,0"
repeatCount="indefinite" />
</path>
</pattern>
</defs>
<text text-anchor="middle" x="50" y="15" font-size="22" fill="url(#wave)" fill-opacity="0.6">IMMERSIF</text>
<text text-anchor="middle" x="50" y="15" font-size="22" fill="url(#gradient)" fill-opacity="0.1">IMMERSIF</text>
</svg>
<!-- <p class="content-tagline"> Solution de checklist </p>
<p class="content-tagline"> Sans pubs </p> -->
</div>
<!-- Storytelling - histoire du site -->
<section class="storytelling_section">
<!-- <h2> A ceux qui try hard</h2> -->
<h2></h2>
<div class="section-content">
<h3 class="platform-support"> Plateforme de jeux supportés : </h3>
<div class="display-content-market-illu">
<div class="content-info">
<ul class="list-platform-available">
<li class="list-item-platform"> Playstation </li>
<li class="list-item-platform"> Steam </li>
<li class="list-item-platform"> Nintendo </li>
<img class="logo-platform-support" src="./images/platform-support-black.png" />
<p class="content-games-info"> + de 1200 jeux au catalogue </p>
</div>
<img src="./images/game-check.png" class="image-gamer-presentation" />
</div>
</div>
<div class="section-tagline">
<p class="text-tagline"> Atteignez le 100 % en cochant step by step les succés à atteindre. </p>
</div>
<!-- Call to action -->
<div class="container_Cta">
<a href="screen/login.html" class="cta-button">Connexion</a>
</div>
<p class="content-description-website"> Nous vous proposons une solution de checklist simple pour enfin déverouiller
tous les trophées de vos jeux
favoris. </p>
<!-- description plus longue si necessaire pour la page web -->
<p class="content-description-website-desktop">Nous sommes partis du triste constat que les sites répertoriant
les solutions, les listes des succès à dévérouiller et autres plaisirs sont tous devenus d'énormes plateformes.
Des news par-ci, des pubs par là, une vidéo ici, tiens là un tuto.
Bref en tant que joueur si vous êtes déjà passé par un site comme ça, vous savez qu'il est difficile de faire
abstraction
de toutes les infos parfois polluantes alors que l'on cherche une seule information précise.</p>
<h2 class="title-section-description-website-desktop"> Notre volonté ?</h2>
<p class="content-description-website-desktop"> Que les joueurs, les try hardeurs particulièrement, qui souhaitent
terminer leur jeux à 100 % puissent le faire à l'aide d'une
checklist pour avancer dans ses succès.</p>
<p class=" content-description-website-desktop"> Peu importe ton style de jeu, ou la platerforme, tu es ici chez
toi.
Décores les murs, choisis tes jeux favoris,
link tes comptes playstation, steam ou nintendo à TryArd, et atteint le 100 % !
</p>
<div class="grid-card-team-members-mobile">
<div class="card-profil-mobile gradient-card-mobile">
<a class="link-to-profile" href="https://www.linkedin.com/in/alekmikolajek/">
<img src="./images/pandagamer.png" alt="image panda qui joue tiens une manette dans les mains "
class="card-image-contact">
<div class="info-name-contact-card-mobile">
<img class="logo-linkedin-card-mobile" src="./images/logo-linkedin-transparent.png"
alt="logo linkedin redirigeant vers le profil d'Alek" />
<h3> Alek </h3>
</div>
</a>
</div>
<div class="card-profil-mobile gradient-card-mobile">
<a class="link-to-profile" href="https://github.com/gvara23">
<img src="./images/shibagamer.png" alt="image d'un shiba qui joue tiens une manette dans les mains "
class="card-image-contact">
<div class="info-name-contact-card-mobile">
<img class="logo-linkedin-card-mobile" src="./images/logo-github-transp-grey.png"
alt="logo github redirigeant vers le profil dev d'Heidy" />
<h3> Heidy </h3>
</div>
</a>
</div>
<div class="card-profil-mobile gradient-card-mobile">
<a class="link-to-profile" href="https://www.linkedin.com/in/solene-mahaut/">
<img src="./images/pingugamer.png" alt="image d'un pingouin qui joue tiens une manette dans les mains "
class="card-image-contact">
<div class="info-name-contact-card-mobile">
<img class="logo-linkedin-card-mobile" src="./images/logo-linkedin-transparent.png"
alt="logo linkedin redirigeant vers le profil de Solène" />
<h3> Solène </h3>
</div>
</a>
</div>
</div>
<!-- -- card web view -->
<div class="section-members">
<h3 class="content-title-team-members-desktop"> Rencontre la team !</h3>
</div>
<div class="grid-card-team-members-desktop">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="./images/pandagamer.png" alt="image panda qui joue tiens une manette dans les mains "
class="card-image-contact-desktop gradient " />
</div>
<div class="flip-card-back">
<img class="logo-card-desktop" src="./images/platinium-trophy.png"
alt="logo linkedin redirigeant vers le profil d'Alek" />
<h3> Alek </h3>
<p> Il a platine Marvel's Spider-Man</p>
<p> Il connait Manatthan par coeur maintenant.</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="./images/shibagamer.png" alt="image d'un shiba qui joue tiens une manette dans les mains "
class="card-image-contact-desktop gradient " />
</div>
<div class="flip-card-back">
<img class="logo-card-desktop" src="./images/gold-trophy.png"
alt="logo github redirigeant vers le profil dev d'Heidy" />
<h3> Heidy </h3>
<p> Elle à passer plus de 350h dans Zelda.</p>
<p> Plus de besoin de map dans Hyrule !</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="./images/pingugamer.png" alt="image d'un pingouin qui joue tiens une manette dans les mains "
class="card-image-contact-desktop" />
</div>
<div class="flip-card-back">
<img class="logo-card-desktop" src="./images/gold-trophy.png"
alt="logo linkedin redirigeant vers le profil de Solène" />
<h3> Solène </h3>
<p> Finit les jeux experimentaux et se perds dans les rpgs à tout jamais </p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>