minivoltrush
3 years ago
commit
e455d2abf8
29 changed files with 1204 additions and 0 deletions
|
After Width: | Height: | Size: 601 B |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 147 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 25 KiB |
@ -0,0 +1,21 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>Titre</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_home.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<main class="home"> |
|||
<div class="title"> |
|||
<h1><a href="index.html">PopOp</a></h1> |
|||
</div> |
|||
|
|||
</main> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,140 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>PopOp</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_index.css" rel="stylesheet"> |
|||
<link href="style/style_main.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="#unlinked">Musiques</a></li> |
|||
<li><a href="#unlinked">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.html">Se connecter</a> |
|||
<a href="sign_up.html">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
<main> |
|||
<div class="main-side"> |
|||
<a href="https://open.spotify.com/track/2dLLR6qlu5UJ5gk0dKz0h3?si=dce69b1c4a26487d" class="element elmnt1"> |
|||
<img src="_content/picture2.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Royals</h2> |
|||
<p>Royals - Lorde<br><u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien |
|||
(payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/search/numb%20link" class="element elmnt2"> |
|||
<img src="_content/picture1.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Numb</h2> |
|||
<p>Numb - Linkin Park<br><u><img class="icon" src="_content/spotify-icon.png" |
|||
alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1"> |
|||
<img src="_content/picture3.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Red</h2> |
|||
<p>Red - Survive said the prophet <br><u><img class="icon" src="_content/spotify-icon.png" |
|||
alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2"> |
|||
<img src="_content/picture4.jpeg" alt="thumbnail"> |
|||
<div> |
|||
<h2>命に嫌われて</h2> |
|||
<p>命に嫌われている。- Majiko<br><u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien |
|||
(payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element elmnt1"> |
|||
<img src="_content/picture5.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Symphony</h2> |
|||
<p>Symphony - Clean Bandit (feat. Zara Larsson) <br><u><img class="icon" |
|||
src="_content/spotify-icon.png" alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2"> |
|||
<img src="_content/picture6.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Reckoning song</h2> |
|||
<p>Reckoning song (cover) - Asaf Avidan, The Mojos <br><u><img class="icon" |
|||
src="_content/spotify-icon.png" alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/1hwJKpe0BPUsq6UUrwBWTw?si=71cfd097e58349b0" class="element elmnt1"> |
|||
<img src="_content/picture7.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Boulevard of Broken Dreams</h2> |
|||
<p>Boulevard of Broken Dreams - Green Day<br><u><img class="icon" src="_content/spotify-icon.png" |
|||
alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2"> |
|||
<img src="_content/picture8.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Centuries</h2> |
|||
<p>Centuries - Fall Out Boy <br><u><img class="icon" src="_content/spotify-icon.png" |
|||
alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1"> |
|||
<img src="_content/picture9.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Le temps est bon</h2> |
|||
<p>Le temps est bon - Bon Entendeur <br><u><img class="icon" src="_content/spotify-icon.png" |
|||
alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2"> |
|||
<img src="_content/picture10.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Radioactive</h2> |
|||
<p>Radioactive - Imagine Dragons<br><u><img class="icon" src="_content/spotify-icon.png" |
|||
alt="spotify-icon">Lien (payant)</u></p> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="main-contents"> |
|||
<aside> |
|||
<h2>À propos...</h2> |
|||
<p>Voici un site ma foi très peu utile et pertinent afin de rendre un travail un minimum |
|||
complété. Ce site n'a pas vraiment d'objectif. Dans l'état actuel des choses le système de connexion |
|||
et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce |
|||
système n'est pas mis en place ou effectif. <a |
|||
href="https://minivoltrush.alwaysdata.net/signup.php">Sur mon "test" de site à ce lien</a>, ce |
|||
système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p> |
|||
</aside> |
|||
<aside> |
|||
<h2>Fun Fact</h2> |
|||
<p>Je me suis souvenu qu'il fallait faire <a href="index.html">ce site</a> uniquement le dimanche soir |
|||
précédent la rentrée du |
|||
Lundi 8 Novembre.</p> |
|||
<p>Faire un lien un minimum esthétique c'est long. -_-</p> |
|||
</aside> |
|||
<aside> |
|||
<h2>Image aléatoire</h2> |
|||
<p>Un site du nom de <a href="https://picsum.photos">picsum</a> affiche une image aléatoire. Rien de |
|||
plus. |
|||
</p> |
|||
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400"> |
|||
</aside> |
|||
</div> |
|||
</main> |
|||
<footer> |
|||
<a href="#mentions-legales">Mentions légales + points d'amélioration.</a> <br> Mise en page par SERNY Sacha. |
|||
</footer> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,27 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Mentions Légales</title> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
<link rel="stylesheet" href="style/style_main.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="#unlinked">Musiques</a></li> |
|||
<li><a href="#unlinked">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.html">Se connecter</a> |
|||
<a href="sign_up.html">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,61 @@ |
|||
<!-- Traitement PHP --> |
|||
<?php |
|||
|
|||
|
|||
|
|||
?> |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>Titre</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_main.css" rel="stylesheet"> |
|||
<link href="style/style_log.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="#unlinked">Musiques</a></li> |
|||
<li><a href="#unlinked">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.html">Se connecter</a> |
|||
<a href="sign_up.html">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
<main> |
|||
<div class="red-banner"> |
|||
En attente de l'ajout d'un systeme PHP. |
|||
</div> |
|||
<form action="" method="POST"> |
|||
<h2>Connexion</h2> |
|||
|
|||
<div class="form_p_contents"> |
|||
<div> |
|||
<label for="pseudo">Pseudo : </label><input autocomplete="off" name="pseudo" type="text" |
|||
placeholder="Pseudo"> |
|||
</div> |
|||
|
|||
<div> |
|||
<label for="password">Mot de passe : </label><input autocomplete="off" name="password" |
|||
type="password" placeholder="Mot de passe"> |
|||
</div> |
|||
<br> |
|||
<input name="password" type="submit" value="Valider"> |
|||
|
|||
<p><a href="#forget">Mot de passe oublié ?</a></p> |
|||
</div> |
|||
</form> |
|||
</main> |
|||
<footer> |
|||
<a href="#mentions-legales">Conditions générales d'utilisation.</a> <br> Mise en page par SERNY Sacha. |
|||
</footer> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,68 @@ |
|||
<!-- Traitement PHP --> |
|||
<?php |
|||
|
|||
|
|||
|
|||
?> |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>Titre</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_main.css" rel="stylesheet"> |
|||
<link href="style/style_log.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="#unlinked">Musiques</a></li> |
|||
<li><a href="#unlinked">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.html">Se connecter</a> |
|||
<a href="sign_up.html">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
<main> |
|||
<div class="red-banner"> |
|||
En attente de l'ajout d'un systeme PHP. |
|||
</div> |
|||
<form action="" method="POST"> |
|||
<h2>Inscription</h2> |
|||
|
|||
<div class="form_p_contents"> |
|||
<div> |
|||
<label for="pseudo">Pseudo : </label><input autocomplete="off" name="pseudo" type="text" |
|||
placeholder="Pseudo"> |
|||
</div> |
|||
|
|||
<div class="names"> |
|||
<label for="first_name">Prénom - Nom : </label><input autocomplete="off" name="first_name" |
|||
type="text" placeholder="Prénom"><input autocomplete="off" name="surname_name" type="text" |
|||
placeholder="Nom"> |
|||
</div> |
|||
<div> |
|||
<label for="mail">Adresse mail : </label><input autocomplete="off" name="mail" type="mail" |
|||
placeholder="Adresse mail"> |
|||
</div> |
|||
<div> |
|||
<label for="password">Mot de passe : </label><input autocomplete="off" name="password" |
|||
type="password" placeholder="Mot de passe"> |
|||
</div> |
|||
<br> |
|||
<input name="password" type="submit" value="Valider"> |
|||
</div> |
|||
</form> |
|||
</main> |
|||
<footer> |
|||
<a href="#mentions-legales">Conditions générales d'utilisation.</a> <br> Mise en page par SERNY Sacha. |
|||
</footer> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,37 @@ |
|||
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap"); |
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
main { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%); |
|||
} |
|||
main .title { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
} |
|||
main .title h1, main .title h1:visited, main .title h1:link, main .title h1:active { |
|||
padding: 1em; |
|||
background-color: #fff; |
|||
box-shadow: -1px -1px 15px 0px rgba(255, 255, 255, 0.75); |
|||
} |
|||
main .title h1 a, main .title h1:visited a, main .title h1:link a, main .title h1:active a { |
|||
color: black; |
|||
text-decoration: none; |
|||
font-size: 3.5em; |
|||
font-family: "Playfair Display", sans-serif; |
|||
font-weight: 700; |
|||
transition: font-size 0.75s ease-in-out; |
|||
} |
|||
main .title h1 a:hover, main .title h1:visited a:hover, main .title h1:link a:hover, main .title h1:active a:hover { |
|||
transition: font-size 0.75s ease-out; |
|||
font-size: 5em; |
|||
} |
|||
|
|||
/*# sourceMappingURL=style_home.css.map */ |
|||
@ -0,0 +1 @@ |
|||
{"version":3,"sourceRoot":"","sources":["styles_home.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA","file":"style_home.css"} |
|||
@ -0,0 +1,160 @@ |
|||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"); |
|||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"); |
|||
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap"); |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
main { |
|||
padding: 10px; |
|||
background-color: white; |
|||
display: grid; |
|||
grid-template-columns: 65% 35%; |
|||
font-family: "Roboto", sans-serif; |
|||
font-weight: 300; |
|||
} |
|||
main a:visited, main a:active, main a:link { |
|||
text-decoration: none; |
|||
color: black; |
|||
} |
|||
main .element { |
|||
position: relative; |
|||
padding-bottom: 24px; |
|||
text-align: justify; |
|||
width: 11em; |
|||
padding: 10px; |
|||
margin: 2.5px 2.5px 0px 2.5px; |
|||
} |
|||
main .element img { |
|||
border-radius: 10% 40% 40% 40%; |
|||
filter: blur(0.1px); |
|||
} |
|||
main .element:hover { |
|||
transition: 0.3s; |
|||
box-shadow: -1px -1px 30px 1px #ffb200; |
|||
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%); |
|||
color: white; |
|||
} |
|||
main .element:hover img { |
|||
border-radius: 10% 10% 10% 10%; |
|||
filter: blur(0); |
|||
transition: 0.3s; |
|||
} |
|||
main .element:hover h2 { |
|||
text-decoration: underline; |
|||
} |
|||
main .main-contents { |
|||
background-color: #e2e2e2; |
|||
padding: inherit; |
|||
border-left: 3px solid black; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
main .main-contents aside { |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 20px 10px; |
|||
margin: 15px 0px; |
|||
background-color: #f8f9fa; |
|||
border-radius: 5px; |
|||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; |
|||
} |
|||
main .main-contents aside img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
main .main-contents aside:hover { |
|||
transition: 0.3s; |
|||
background-color: white; |
|||
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; |
|||
} |
|||
main .main-contents aside:hover h2::before { |
|||
transition: 0.2s; |
|||
bottom: -5px; |
|||
left: 0px; |
|||
width: 100%; |
|||
max-width: 100%; |
|||
height: 5px; |
|||
} |
|||
main .main-contents aside h2 { |
|||
font-style: italic; |
|||
font-family: "Playfair Display", serif; |
|||
position: relative; |
|||
} |
|||
main .main-contents aside h2::before { |
|||
content: " +++"; |
|||
font-size: 12px; |
|||
color: grey; |
|||
position: absolute; |
|||
background-color: #4e4e4e; |
|||
bottom: -5px; |
|||
left: 5px; |
|||
width: 6%; |
|||
height: 5px; |
|||
} |
|||
main .main-contents aside p { |
|||
font-family: "Montserrat", serif; |
|||
text-align: justify; |
|||
} |
|||
main .main-contents aside a { |
|||
position: relative; |
|||
} |
|||
main .main-contents aside a::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: #2077d3; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 3px; |
|||
} |
|||
main .main-contents aside a::after { |
|||
transition: ease-out 0.3s; |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: #fcbc3e; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 0%; |
|||
height: 3px; |
|||
} |
|||
main .main-contents aside a:hover::after { |
|||
transition: all ease-out 0.3s; |
|||
width: 100%; |
|||
} |
|||
main .main-side { |
|||
background-color: white; |
|||
padding: inherit; |
|||
align-content: flex-start; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
} |
|||
main .main-side img { |
|||
height: 150px; |
|||
width: 150px; |
|||
} |
|||
main .main-side u { |
|||
position: absolute; |
|||
bottom: 6px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
flex-direction: row; |
|||
text-decoration: underline green 2.8px; |
|||
text-decoration-skip-ink: none; |
|||
color: green; |
|||
font-weight: 600; |
|||
} |
|||
main .main-side u img { |
|||
margin-right: 4px; |
|||
height: 18px; |
|||
width: 18px; |
|||
} |
|||
|
|||
/*# sourceMappingURL=style_index.css.map */ |
|||
@ -0,0 +1 @@ |
|||
{"version":3,"sourceRoot":"","sources":["styles_index.scss"],"names":[],"mappings":"AAAQ;AACA;AACA;AACR;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACD;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAED;EASC;EACA;EACA;EACA;;AAXA;EACC;EACA;EACA;;AASD;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAoEA;EACA;EACA;EACA;EACA;;AAvEA;EACC;EACA;;AAED;EACC;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAaL;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA","file":"style_index.css"} |
|||
@ -0,0 +1,87 @@ |
|||
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"; |
|||
@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"; |
|||
|
|||
main { |
|||
padding: 5px 20%; |
|||
height: 79vh; |
|||
} |
|||
main .red-banner { |
|||
background-color: red; |
|||
color: white; |
|||
height: auto; |
|||
font-size: 24px; |
|||
padding: 30px 0; |
|||
text-align: center; |
|||
font-family: "Montserrat", sans-serif; |
|||
} |
|||
form { |
|||
display: flex; |
|||
justify-content: center; |
|||
font-family: "Roboto", sans-serif; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
form .names { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
margin: 5px 0px; |
|||
align-items: inherit; |
|||
} |
|||
form .form_p_contents { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
form .form_p_contents p a { |
|||
font-size: 14px; |
|||
color: #696969; |
|||
text-decoration: none; |
|||
} |
|||
form .form_p_contents p a:hover { |
|||
font-size: 14px; |
|||
color: #696969; |
|||
text-decoration: none; |
|||
} |
|||
form { |
|||
margin: 5px 0px; |
|||
font-size: 24px; |
|||
} |
|||
label { |
|||
letter-spacing: -1px; |
|||
} |
|||
input { |
|||
border: 0px; |
|||
background-color: #24252a; |
|||
color: rgb(255, 0, 0); |
|||
border-radius: 3.5px; |
|||
margin-left: 2px; |
|||
padding: 3px; |
|||
font-size: 18px; |
|||
|
|||
} |
|||
input:focus { |
|||
outline: 1px solid #24252a ; |
|||
transition: 0.2s; |
|||
text-decoration: underline; |
|||
background-color: #edf0f1; |
|||
color: #24252a; |
|||
|
|||
} |
|||
input[type="submit"] { |
|||
border: 0px; |
|||
background-color: #24252a; |
|||
color: #edf0f1; |
|||
font-family: "Montserrat", sans-serif; |
|||
padding: 10px; |
|||
font-weight: 700; |
|||
letter-spacing: 3px; |
|||
} |
|||
input[type="submit"]:hover { |
|||
transition: 0.2s; |
|||
outline: 4px solid #24252a; |
|||
color: #24252a; |
|||
background-color: #edf0f1; |
|||
} |
|||
@ -0,0 +1,154 @@ |
|||
body { |
|||
min-height: 100vh; |
|||
margin: 0; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
padding-bottom: 20vh; |
|||
} |
|||
|
|||
header { |
|||
background-color: #24252a; |
|||
padding: 30px 10%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
align-content: center; |
|||
text-decoration: none; |
|||
} |
|||
header h1 { |
|||
margin: 0; |
|||
position: relative; |
|||
} |
|||
header h1::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
header h1:hover::before { |
|||
animation: border_top_right 0.75s linear forwards; |
|||
} |
|||
header h1::after { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
header h1:hover::after { |
|||
animation: border_bottom_left 0.75s linear forwards; |
|||
} |
|||
header h1 a { |
|||
color: #edf0f1; |
|||
text-decoration: none; |
|||
font-family: sans-serif; |
|||
letter-spacing: 0px; |
|||
padding: 5px; |
|||
} |
|||
header h1 a .word1 { |
|||
color: #929395; |
|||
} |
|||
header h1 a .word2 { |
|||
color: silver; |
|||
} |
|||
header h1 a .word3 { |
|||
color: #edf0f1; |
|||
} |
|||
header ul { |
|||
list-style-type: none; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
text-align: center; |
|||
} |
|||
header a:not(._title) { |
|||
padding: 1em 2em; |
|||
text-decoration: none; |
|||
color: #edf0f1; |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
} |
|||
header a:not(._title):hover { |
|||
color: #24252a; |
|||
background-color: #edf0f1; |
|||
font-weight: 800; |
|||
transition: 0.2s; |
|||
} |
|||
@keyframes border_top_right { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: white; |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
25% { |
|||
width: 100%; |
|||
height: 0; |
|||
border-top-color: white; |
|||
border-right-color: white; |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: white; |
|||
border-right-color: white; |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
} |
|||
@keyframes border_bottom_left { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: white; |
|||
} |
|||
75% { |
|||
width: 0; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: white; |
|||
border-left-color: white; |
|||
} |
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: white; |
|||
border-left-color: white; |
|||
} |
|||
} |
|||
|
|||
footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
text-align: center; |
|||
background-color: #24252a; |
|||
color: #edf0f1; |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
padding: 3vh 0; |
|||
} |
|||
footer a { |
|||
color: white; |
|||
} |
|||
|
|||
/*# sourceMappingURL=style_main.css.map */ |
|||
@ -0,0 +1 @@ |
|||
{"version":3,"sourceRoot":"","sources":["styles_main.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;;AAED;EACC;;AAIH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AAIF;EACC;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACC;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC","file":"style_main.css"} |
|||
@ -0,0 +1,39 @@ |
|||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap'); |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
main { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%); |
|||
|
|||
& .title { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
|
|||
& h1, & h1:visited, & h1:link, & h1:active { |
|||
padding: 1em; |
|||
background-color: #fff; |
|||
box-shadow:-1px -1px 15px 0px rgba(255, 255, 255, 0.75); |
|||
|
|||
& a { |
|||
color: black; |
|||
text-decoration: none; |
|||
font-size: 3.5em; |
|||
font-family: "Playfair Display", sans-serif; |
|||
font-weight: 700; |
|||
transition: font-size 0.75s ease-in-out; |
|||
|
|||
&:hover { |
|||
transition: font-size 0.75s ease-out; |
|||
font-size: 5em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,174 @@ |
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); |
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap'); |
|||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap'); |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
main { |
|||
padding: 10px; |
|||
background-color: rgb(255, 255, 255); |
|||
display: grid; |
|||
grid-template-columns: 65% 35%; |
|||
font-family: "Roboto", sans-serif; |
|||
font-weight: 300; |
|||
|
|||
& a { |
|||
&:visited, &:active, &:link { |
|||
text-decoration: none; |
|||
color: rgb(0, 0, 0); |
|||
} |
|||
} |
|||
|
|||
& .element { |
|||
position: relative; |
|||
padding-bottom: 24px; |
|||
text-align: justify; |
|||
width: 11em; |
|||
padding: 10px; |
|||
margin: 2.5px 2.5px 0px 2.5px; |
|||
|
|||
|
|||
& img { |
|||
border-radius: 10% 40% 40% 40%; |
|||
filter: blur(0.10px); |
|||
} |
|||
&:hover { |
|||
& img { |
|||
border-radius: 10% 10% 10% 10%; |
|||
filter: blur(0); |
|||
transition: 0.3s; |
|||
|
|||
// transition: clip-path 0.3s; |
|||
// clip-path: circle(50%); |
|||
} |
|||
transition: 0.3s; |
|||
box-shadow:-1px -1px 30px 1px #ffb200; |
|||
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%); |
|||
color: rgb(255, 255, 255); |
|||
& h2 { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
|
|||
& .main-contents { |
|||
background-color: rgb(226, 226, 226); |
|||
padding: inherit; |
|||
border-left: 3px solid black; |
|||
display: flex; |
|||
flex-direction: column; |
|||
& aside { |
|||
display: flex; |
|||
flex-direction: column; |
|||
img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
&:hover { |
|||
transition: 0.3s; |
|||
background-color: white; |
|||
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; // Pris sur https://getcssscan.com/css-box-shadow-examples |
|||
& h2 { |
|||
&::before { |
|||
transition: 0.2s; |
|||
bottom: -5px; |
|||
left: 0px; |
|||
width: 100%; |
|||
max-width: 100%; |
|||
height: 5px; |
|||
} |
|||
} |
|||
} |
|||
& h2 { |
|||
font-style: italic; |
|||
font-family: 'Playfair Display', serif; |
|||
position: relative; |
|||
&::before { |
|||
content: " +++"; |
|||
font-size: 12px; |
|||
color: grey; |
|||
position: absolute; |
|||
background-color: rgb(78, 78, 78); |
|||
bottom: -5px; |
|||
left: 5px; |
|||
width: 6%; |
|||
height: 5px; |
|||
} |
|||
} |
|||
p { |
|||
font-family: 'Montserrat', serif; |
|||
text-align: justify; |
|||
} |
|||
a { // C'est très long pour faire un joli lien :sob-emote: |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color:#2077d3; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 3px; |
|||
} |
|||
&::after { |
|||
transition: ease-out 0.3s; |
|||
content: " "; |
|||
position: absolute; |
|||
background-color:#fcbc3e; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 0%; |
|||
height: 3px; |
|||
} |
|||
&:hover { |
|||
&::after { |
|||
transition: all ease-out 0.3s; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
padding: 20px 10px; |
|||
margin: 15px 0px; |
|||
background-color: #f8f9fa; |
|||
border-radius: 5px; |
|||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; |
|||
} |
|||
|
|||
} |
|||
|
|||
& .main-side { |
|||
background-color: rgb(255, 255, 255); |
|||
padding: inherit; |
|||
align-content: flex-start; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
& img { |
|||
height: 150px; |
|||
width: 150px; |
|||
} |
|||
& u { |
|||
position: absolute; |
|||
bottom: 6px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
flex-direction: row; |
|||
text-decoration: underline green 2.8px; |
|||
text-decoration-skip-ink: none; |
|||
color: green; |
|||
font-weight: 600; |
|||
|
|||
& img { |
|||
margin-right: 4px; |
|||
height: 18px; |
|||
width: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,155 @@ |
|||
body { |
|||
min-height: 100vh; |
|||
margin: 0; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
padding-bottom: 20vh; |
|||
} |
|||
header { |
|||
background-color:rgb(36, 37, 42); |
|||
padding: 30px 10%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
align-content: center; |
|||
text-decoration: none; |
|||
& h1 { |
|||
margin: 0; |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
&:hover::before { |
|||
animation: border_top_right 0.75s linear forwards; |
|||
} |
|||
&::after { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
&:hover::after { |
|||
animation: border_bottom_left 0.75s linear forwards; |
|||
} |
|||
& a { |
|||
color: rgb(237, 240, 241); |
|||
text-decoration: none; |
|||
font-family: sans-serif; |
|||
letter-spacing: 0px; |
|||
padding: 5px; |
|||
& .word1 { |
|||
color: rgb(146,147,149); |
|||
} |
|||
& .word2 { |
|||
color: rgb(192, 192, 192); |
|||
} |
|||
& .word3 { |
|||
color:rgb(237, 240, 241); |
|||
} |
|||
} |
|||
} |
|||
& ul { |
|||
list-style-type: none; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
text-align: center; |
|||
} |
|||
& a:not(._title) { |
|||
padding: 1em 2em; |
|||
text-decoration: none; |
|||
color: rgb(237, 240, 241); |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
&:hover { |
|||
color: rgb(36, 37, 42); |
|||
background-color: rgb(237, 240, 241); |
|||
font-weight: 800; |
|||
transition: 0.2s; |
|||
} |
|||
} |
|||
|
|||
@keyframes border_top_right { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
|
|||
25% { |
|||
width: 100%; |
|||
height: 0; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: rgb(255, 255, 255); |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
|
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: rgb(255, 255, 255); |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
} |
|||
@keyframes border_bottom_left { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
|
|||
75% { |
|||
width: 0; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: rgb(255, 255, 255); |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
|
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: rgb(255, 255, 255); |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
} |
|||
} |
|||
footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
text-align: center; |
|||
background-color:rgb(36, 37, 42); |
|||
color: rgb(237, 240, 241); |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
padding: 3vh 0; |
|||
& a { |
|||
color: white; |
|||
} |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"; |
|||
@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"; |
|||
|
|||
main { |
|||
padding: 5px 20%; |
|||
height: 79vh; |
|||
} |
|||
form { |
|||
display: flex; |
|||
justify-content: center; |
|||
font-family: "Roboto", sans-serif; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
form .names { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
margin: 5px 0px; |
|||
align-items: inherit; |
|||
} |
|||
form .form_p_contents { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
form .form_p_contents p a { |
|||
font-size: 14px; |
|||
color: #696969; |
|||
text-decoration: none; |
|||
} |
|||
form .form_p_contents p a:hover { |
|||
font-size: 14px; |
|||
color: #696969; |
|||
text-decoration: none; |
|||
} |
|||
form { |
|||
margin: 5px 0px; |
|||
font-size: 24px; |
|||
} |
|||
label { |
|||
letter-spacing: -1px; |
|||
} |
|||
input { |
|||
border: 0px; |
|||
background-color: #24252a; |
|||
color: rgb(255, 0, 0); |
|||
border-radius: 3.5px; |
|||
margin-left: 2px; |
|||
padding: 3px; |
|||
font-size: 18px; |
|||
|
|||
} |
|||
input:focus { |
|||
outline: 1px solid #24252a ; |
|||
transition: 0.2s; |
|||
text-decoration: underline; |
|||
background-color: #edf0f1; |
|||
color: #24252a; |
|||
|
|||
} |
|||
input[type="submit"] { |
|||
border: 0px; |
|||
background-color: #24252a; |
|||
color: #edf0f1; |
|||
font-family: "Montserrat", sans-serif; |
|||
padding: 10px; |
|||
font-weight: 700; |
|||
letter-spacing: 3px; |
|||
} |
|||
input[type="submit"]:hover { |
|||
transition: 0.2s; |
|||
outline: 4px solid #24252a; |
|||
color: #24252a; |
|||
background-color: #edf0f1; |
|||
} |
|||
Loading…
Reference in new issue