– MODERNA TUMBLE –, par Insolence

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

VIP depuis le 06/03/2020

Galad-El le 30 Aoû 2021 à 17h28

Le rendu est tellement stylé *-* Bravo pour cette superbe fiche !!

Yamazakura le 30 Aoû 2021 à 17h54

C'est magnifique ! Quel talent *^*

Akemi le 30 Aoû 2021 à 18h29

J'adore *-* C'est trop stylé

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

Plume` le 30 Aoû 2021 à 22h27

C'est superbe !! J'adore, ça rend super bien *-*

Insolence le 30 Aoû 2021 à 22h42

Merci beaucoup pour vos retours, ça me fait vraiment plaisir et c'est très encourageant

VIP depuis le 14/03/2020

Zukki le 31 Aoû 2021 à 08h42

C'est super réussi ça ! *0*

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

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

Alek le 31 Aoû 2021 à 19h34

J'aime tellement l'esthétique du rendu si moderne

VIP depuis le 07/08/2020

Shinohara le 10 Nov 2021 à 13h02

Wow j'étais passée à côté de cette fiche, elle est splendide

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