9 Favoris
Insolence le 30 Aoû 2021 à 16h15
– Bonjour !
–––

Heureuse de proposer mon premier code... « Moderna Tumble » est une fiche simple et efficace qui m'a directement été inspirée par le style Suisse international, notamment pour les diverses bordures et cadres et la couleur de fond, le beige vieilli. J'y ai ajouté quelques touches bien plus modernes, dont un clin d'oeil à l'interface Apple, mais aussi en usant de polices sans empattements.
Sur ce code je me suis surtout entraînée à structurer mon HTML de tête sans avoir à passer par une maquette, ainsi qu'aux effets CSS au survol, pour voir un peu ce qui marchait bien et ce qui marchait moins bien. C'est tout ! Clairement pas un des codes les plus complexes que j'ai pu réaliser mais ça fait du bien d'aller droit au but parfois. Et puis ça me fait une fiche personnelle en prime.
–––

Cette fiche est évidemment optimale pour le format Wyvartem, mais je laisse les permissions à tout le monde, si jamais certains curieux veulent juste regarder le code.

Notes :
– Pour ceux qui comprennent rien à mon code (parce que je l'ai pas commenté, flemme), vous pouvez me contacter pour que je fasse les modifications nécessaires si vous voulez l'emprunter.
– Pour l'image circulaire, il est mieux d'y mettre une image carrée, sinon ça déforme tout lol. J'ai eu la flemme de faire ça propre puisque dans ma tête c'était pour mon avatar.
– Pour l'image de "dernière création", je garantis pas que le filtre de teinte rende bien si vous changez l'image, à vous de tester :')
–––

Merci à celleux qui prendront le temps de commenter !

Edit : Je me suis foirax quand j'ai copié collé le CSS, faites pas attention, je corrigerai un jour peut-être x)

HTML

                        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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=Syncopate:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Spinnaker&display=swap" rel="stylesheet">

<body>

<div class="content">
<div class="block">

<div class="circles">
•••
</div>

<div class="topband">

<div class="anim1">––</div>
<div class="pseudo">Pseudo</div>

</div>

<div class="band1">

<div class="citation">
<span class="p-citation">
« Lorem impsum dolor sit amet,
consectetur adipiscing elit, sed
do eiusmod tempor. »<br>
</span>
<span class="author">
– Elon Musk
</span>
</div>

<div class="center-b1">
<span class="pseudo-b1">
Pseudo<br>
</span>
<span class="sous-texte">Lorem impsum
dolor sit amet.
</span>
</div>

<img src="https://images.unsplash.com/photo-1586032788085-d75f745f26e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1343&q=80">

</div>

<div class="band2">

<div class="img-fond">
<div class="floating">
<div class="lastcreablock">
<span class="lastcrea">Ma dernière création</span><br>
<span class="lastcreatitle"><a href="#">Titre de la création</a></span>
</div>
</div>
</div>

<div class="pres">
<div class="titre1">Lorem Impsum
</div>
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.
<br><br>
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.
</div>

</div>

<div class="topband" style="border-top:transparent;">
<div class="anim1">––</div>
<div class="pseudo">CODAGE <a href="https://wyvartem.fr/membres/fiche/172/insolence/">INSOLENCE</a></div>
</div>

</div>
</div>

</body>

CSS

                            <style>

:root {
--background-light: #fffaf6;
--borders: #bfbfbf;
--texts: #474747;
--background-dark: #EFEFEF;
--accent: #1BCFED;
}

::-webkit-scrollbar {
width: 3px;
background:white;
border-radius:100%;
}
::-webkit-scrollbar-thumb {
background: var(--borders);
border-radius:100%;
}

a {
color:var(--texts);
text-decoration:none;
border-bottom:dotted 1px var(--borders);
transition:0.5s;
}

a:hover {
color:black;
border-bottom:solid 1px var(--accent);
}

body {
background: #F1F1F1;
color: var(--texts);
font-family:'Helvetica', 'Arial', sans-serif;
font-size:12px;
}

.content {
height:470px;
overflow:auto;
}

.block {
background:white;
width:90%;
height:250px;
margin:auto;
border:solid 1px var(--borders);
border-radius:20px;
margin-top:50px;
transition:0.5s;
}

.block:hover {
box-shadow: 0em 0em 3em rgba(0,0,0, .1);
}

.circles {
font-size:30px;
padding:15px;
margin-top:-12px;
letter-spacing:3px;
color: var(--borders);
transition:1s;
}

.topband {
border:solid 1px var(--borders);
border-bottom:solid 3px black;
padding:10px;
font-family:'Syncopate', sans-serif;
font-weight:700;
letter-spacing:2px;
font-size:7px;
display:flex;
flex-direction:row-reverse;
width:90%;
margin:auto;
background: var(--background-light);
transition:1s;
}

.topband:hover {
background: var(--background-dark);
color:var(--accent);
}

.pseudo {
margin-right:40px;
}

.anim1 {
animation: turn-1 1s infinite linear;
margin-right:20px;
}

@keyframes turn-1 {

0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}

}

.band1 {
width:90%;
margin:auto;
padding:10px;
background: var(--background-light);
border-left: solid 1px var(--borders);
border-right: solid 1px var(--borders);
border-bottom: solid 3px black;
display:flex;
align-items:center;
height:200px;
}

.band1 img {
padding:10px;
width:80px;
height:80px;
margin-right:7%;
margin-left:-5%;
border:solid 1px var(--borders);
border-radius:100%;
transition:1s;
}

.band1 img:hover {
filter:hue-rotate(50deg) contrast(110%);
box-shadow: inset 0em 0em 150px var(--background-light), 0em 0em 3em rgba(0,0,0, .1);
}


.citation {
width:20%;
text-align:justify;
padding:20px;
margin:auto;
transition:1.5s;
}

.p-citation {
font-family:'Spinnaker', sans-serif;
font-size:11px;
transition:0.5s;
}

.author {
font-family:'Syncopate', sans-serif;
font-size:9px;
font-weight:700;
color: var(--borders);
padding:15px;
transition:1s;
}

.author:hover {
font-size:9px;
color: var(--accent);
letter-spacing:1px;
}

.center-b1 {
width:40%;
margin:auto;
text-align:center;
border-left: solid 1px var(--borders);
}

.pseudo-b1 {
font-family:'Syncopate', sans-serif;
font-size:30px;
font-weight:700;
transition:1s;
}

.pseudo-b1:hover {
color:var(--accent);
text-shadow: 1px 1px 2px black, 0 0 1em rgba(0,0,0, .3), 0 0 0.2em var(--accent);
}

.sous-texte {
font-family:'Spinnaker', sans-serif;
color: var(--borders);
transition:1s;
}

.sous-texte:hover {
color: var(--accent);
letter-spacing:1px;
}

.band2 {
display:flex;
width:90%;
margin:auto;
border-left:1px solid var(--borders);
border-right:1px solid var(--borders);
border-bottom: 3px solid black;
padding:10px;
background: var(--background-light);
}

.img-fond {
width:70%;
height:300px;
background-image:url('https://images.unsplash.com/photo-1586032788085-d75f745f26e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1343&q=80');
background-size:cover;
padding:20px;
box-shadow: inset 0em 0em 150px var(--background-light);
display:flex;
align-items:center;
justify-content:center;
transition:1s;
}

.img-fond:hover {
filter:hue-rotate(50deg) contrast(110%);
box-shadow: inset 0em 0em 150px var(--background-light), 0em 0em 3em rgba(0,0,0, .3);
}

.floating {
background:var(--background-light);
border:solid 1px var(--borders);
border-bottom:3px solid black;
padding:20px;
width:40%;
border-radius:0px 20px 0px 0px;
transition:1s;
}

.floating:hover {
box-shadow: inset 0em 0em 150px var(--background-light), 0em 0em 3em rgba(0,0,0, .3);
}

.lastcrea {
font-family:'Syncopate', sans-serif;
font-size:15px;
font-weight:700;
color: var(--texts);
}

.lastcreatitle {
margin:auto;
font-family:'Spinnaker', sans-serif;
color:black;
line-height:10px;
}

.pres {
width:30%;
padding:20px;
font-family:'Spinnaker', sans-serif;
font-size:11px;
color:var(--texts);
text-align:justify;
overflow:auto;
height:300px;
}

.titre1 {
font-size:15px;
font-family:'Syncopate', sans-serif;
font-weight:700;
padding:15px;
border-left:solid 1px var(--borders);
margin-bottom:10px;
transition:1s;
}

.titre1:hover {
color:var(--accent);
text-shadow: 1px 1px 2px black, 0 0 1em rgba(0,0,0, .3), 0 0 0.2em var(--accent);
}

:root {
--background-light: #fffaf6;
--borders: #bfbfbf;
--texts: #474747;
--background-dark: #EFEFEF;
--accent: #1BCFED;
}

::-webkit-scrollbar {
width: 3px;
background:white;
border-radius:100%;
}
::-webkit-scrollbar-thumb {
background: var(--borders);
border-radius:100%;
}

a {
color:var(--texts);
text-decoration:none;
border-bottom:dotted 1px var(--borders);
transition:0.5s;
}

a:hover {
color:black;
border-bottom:solid 1px var(--accent);
}

body {
background: #F1F1F1;
color: var(--texts);
font-family:'Helvetica', 'Arial', sans-serif;
font-size:12px;
}

.content {
height:470px;
overflow:auto;
}

.block {
background:white;
width:90%;
height:250px;
margin:auto;
border:solid 1px var(--borders);
border-radius:20px;
margin-top:50px;
transition:0.5s;
}

.block:hover {
box-shadow: 0em 0em 3em rgba(0,0,0, .1);
}

.circles {
font-size:30px;
padding:15px;
margin-top:-12px;
letter-spacing:3px;
color: var(--borders);
transition:1s;
}

.topband {
border:solid 1px var(--borders);
border-bottom:solid 3px black;
padding:10px;
font-family:'Syncopate', sans-serif;
font-weight:700;
letter-spacing:2px;
font-size:7px;
display:flex;
flex-direction:row-reverse;
width:90%;
margin:auto;
background: var(--background-light);
transition:1s;
}

.topband:hover {
background: var(--background-dark);
color:var(--accent);
}

.pseudo {
margin-right:40px;
}

.anim1 {
animation: turn-1 1s infinite linear;
margin-right:20px;
}

@keyframes turn-1 {

0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}

}

.band1 {
width:90%;
margin:auto;
padding:10px;
background: var(--background-light);
border-left: solid 1px var(--borders);
border-right: solid 1px var(--borders);
border-bottom: solid 3px black;
display:flex;
align-items:center;
height:200px;
}

.band1 img {
padding:10px;
width:80px;
height:80px;
margin-right:7%;
margin-left:-5%;
border:solid 1px var(--borders);
border-radius:100%;
transition:1s;
}

.band1 img:hover {
filter:hue-rotate(50deg) contrast(110%);
box-shadow: inset 0em 0em 150px var(--background-light), 0em 0em 3em rgba(0,0,0, .1);
}


.citation {
width:20%;
text-align:justify;
padding:20px;
margin:auto;
transition:1.5s;
}

.p-citation {
font-family:'Spinnaker', sans-serif;
font-size:11px;
transition:0.5s;
}

.author {
font-family:'Syncopate', sans-serif;
font-size:9px;
font-weight:700;
color: var(--borders);
padding:15px;
transition:1s;
}

.author:hover {
font-size:9px;
color: var(--accent);
letter-spacing:1px;
}

.center-b1 {
width:40%;
margin:auto;
text-align:center;
border-left: solid 1px var(--borders);
}

.pseudo-b1 {
font-family:'Syncopate', sans-serif;
font-size:30px;
font-weight:700;
transition:1s;
}

.pseudo-b1:hover {
color:var(--accent);
text-shadow: 1px 1px 2px black, 0 0 1em rgba(0,0,0, .3), 0 0 0.2em var(--accent);
}

.sous-texte {
font-family:'Spinnaker', sans-serif;
color: var(--borders);
transition:1s;
}

.sous-texte:hover {
color: var(--accent);
letter-spacing:1px;
}

.band2 {
display:flex;
width:90%;
margin:auto;
border-left:1px solid var(--borders);
border-right:1px solid var(--borders);
border-bottom: 3px solid black;
padding:10px;
background: var(--background-light);
}

.img-fond {
width:70%;
height:300px;
background-image:url('https://images.unsplash.com/photo-1586032788085-d75f745f26e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1343&q=80');
background-size:cover;
padding:20px;
box-shadow: inset 0em 0em 150px var(--background-light);
display:flex;
align-items:center;
justify-content:center;
transition:1s;
}

.img-fond:hover {
filter:hue-rotate(50deg) contrast(110%);
box-shadow: inset 0em 0em 150px var(--background-light), 0em 0em 3em rgba(0,0,0, .3);
}

.floating {
background:var(--background-light);
border:solid 1px var(--borders);
border-bottom:3px solid black;
padding:20px;
width:40%;
border-radius:0px 20px 0px 0px;
transition:1s;
}

.floating:hover {
box-shadow: inset 0em 0em 150px var(--background-light), 0em 0em 3em rgba(0,0,0, .3);
}

.lastcrea {
font-family:'Syncopate', sans-serif;
font-size:15px;
font-weight:700;
color: var(--texts);
}

.lastcreatitle {
margin:auto;
font-family:'Spinnaker', sans-serif;
color:black;
line-height:10px;
}

.pres {
width:30%;
padding:20px;
font-family:'Spinnaker', sans-serif;
font-size:11px;
color:var(--texts);
text-align:justify;
overflow:auto;
height:300px;
}

.titre1 {
font-size:15px;
font-family:'Syncopate', sans-serif;
font-weight:700;
padding:15px;
border-left:solid 1px var(--borders);
margin-bottom:10px;
transition:1s;
}

.titre1:hover {
color:var(--accent);
text-shadow: 1px 1px 2px black, 0 0 1em rgba(0,0,0, .3), 0 0 0.2em var(--accent);
}

Commentaires

Avatar de Galad-El
VIP depuis le 06/03/2020
Galad-El le 30 Aoû 2021 à 17h28
Le rendu est tellement stylé *-* Bravo pour cette superbe fiche !!
Avatar de Yamazakura
Yamazakura le 30 Aoû 2021 à 17h54
C'est magnifique ! Quel talent *^*
Avatar de Akemi
Akemi le 30 Aoû 2021 à 18h29
J'adore *-* C'est trop stylé
Avatar de CHAUSSETTE
CHAUSSETTE le 30 Aoû 2021 à 22h23
OOooohhhh
Merveilleux
J'adore 8D
Bravo bravo bravo pour cette superbe fiche, ce superbe design, cette originalité 8D
Merci de nous avoir montré ta création :D
Avatar de Plume`
Plume` le 30 Aoû 2021 à 22h27
C'est superbe !! J'adore, ça rend super bien *-*
Avatar de Insolence
Insolence le 30 Aoû 2021 à 22h42
Merci beaucoup pour vos retours, ça me fait vraiment plaisir et c'est très encourageant
Avatar de Zukki
VIP depuis le 14/03/2020
Zukki le 31 Aoû 2021 à 08h42
C'est super réussi ça ! *0*
Avatar de Sygea
VIP depuis le 01/11/2020
Sygea le 31 Aoû 2021 à 13h08
J'aime beaucoup, c'est très aéré et l'agencement est original :D
Avatar de Insolence
Insolence le 31 Aoû 2021 à 13h29
Merci pour vos commentaires

Bon je viens de voir que j'avais chiax dans la collax pour le copier coller du CSS, je corrigerai quand l'envie me viendra, faites pas gaffe
Avatar de Alek
Alek le 31 Aoû 2021 à 19h34
J'aime tellement l'esthétique du rendu si moderne

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.