4 Favoris
VIP depuis le 06/03/2020
Galad-El le 27 Aoû 2021 à 20h34
Petite tentative toute simple (et toute rose) pour me remettre au design tranquillement. C'est pas génial mais ça viendra petit à petit je l'espère ! (en tout cas vos superbes codes sont très inspirants ça m'a donné envie de m'y remettre sérieusement *-*)

HTML

                        <div class="container">
<div class="left">

<img src="https://images.pexels.com/photos/2737656/pexels-photo-2737656.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Fleurs" />

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

<div class="citation">
Cumque adipisci et maiores eveniet aliquid ut. Veritatis ut amet expedita est molestiae. Dolore ut dolorum occaecati cupiditate. Repellendus sunt reprehenderit officia dolores qui autem suscipit cupiditate. Omnis deserunt sed numquam labore.

Officiis sunt et ullam voluptatem quasi. Fuga officiis placeat inventore. Quo dolorem nesciunt repellendus corrupti. Qui porro corrupti praesentium. Sunt tenetur aliquid molestias.
</div>

</div>

<div class="right">
<div class="border"></div>
<div class="text">
<div class="paragraph">
<div class="date">27/01/2021</div>
<div class="rond"></div>
<div class="text-content">Cumque adipisci et maiores eveniet aliquid ut. Veritatis ut amet expedita est molestiae. Dolore ut dolorum occaecati cupiditate. Repellendus sunt reprehenderit officia dolores qui autem suscipit cupiditate. Omnis deserunt sed numquam labore.

Officiis sunt et ullam voluptatem quasi. Fuga officiis placeat inventore. Quo dolorem nesciunt repellendus corrupti. Qui porro corrupti praesentium. Sunt tenetur aliquid molestias.</div>
</div>

<div class="paragraph">
<div class="date">27/01/2021</div>
<div class="rond"></div>
<div class="text-content"><img src="https://images.pexels.com/photos/1373842/pexels-photo-1373842.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Fleurs" /></div>
</div>

<div class="paragraph">
<div class="date">27/01/2021</div>
<div class="rond"></div>
<div class="text-content">Cumque adipisci et maiores eveniet aliquid ut. Veritatis ut amet expedita est molestiae. Dolore ut dolorum occaecati cupiditate. Repellendus sunt reprehenderit officia dolores qui autem suscipit cupiditate. Omnis deserunt sed numquam labore.

Officiis sunt et ullam voluptatem quasi. Fuga officiis placeat inventore. Quo dolorem nesciunt repellendus corrupti. Qui porro corrupti praesentium. Sunt tenetur aliquid molestias.</div>
</div>

<div class="paragraph">
<div class="date">27/01/2021</div>
<div class="rond"></div>
<div class="text-content">Cumque adipisci et maiores eveniet aliquid ut. Veritatis ut amet expedita est molestiae. Dolore ut dolorum occaecati cupiditate. Repellendus sunt reprehenderit officia dolores qui autem suscipit cupiditate. Omnis deserunt sed numquam labore.

Officiis sunt et ullam voluptatem quasi. Fuga officiis placeat inventore. Quo dolorem nesciunt repellendus corrupti. Qui porro corrupti praesentium. Sunt tenetur aliquid molestias.</div>
</div>

<div class="paragraph">
<div class="date">27/01/2021</div>
<div class="rond"></div>
<div class="text-content"><img src="https://images.pexels.com/photos/1158961/pexels-photo-1158961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Fleurs" /></div>
</div>

</div>
</div>
</div>

CSS

                            body {
margin: 0;
padding: 0;
}

:root {
--background: #FFFAF1;
--middle: #FFDFD1;
--left: #FCB5AA;
--emphase: #FA6782;
--text: #5E2B45;
}

.container {
height: 470px;
overflow: hidden;
background: var(--background);
display: flex;
color: var(--text);
font-family: 'Arial', sans-serif;
}

.left {
background-color: var(--left);
max-width: 200px;
text-align: center;
padding: 15px;
}

.left img {
--size: 150px;
width: var(--size);
height: var(--size);
object-fit: cover;
border-radius: 15px;
box-shadow: 0 0 15px rgba(155,55,0,0.3);
}

.left .pseudo {
font-weight: bold;
}

.left .citation {
font-size: 0.85rem;
font-style: italic;
--margin: 1px solid var(--emphase);
border-top: var(--margin);
border-bottom: var(--margin);
margin: 10px 0;
padding: 10px 0;
}

.right {
min-width: 300px;
flex-shrink: 1;
padding: 20px 0;
position: relative;
--left-size: 100px;
}

.border {
height: 90%;
width: 2px;
background-color: var(--emphase);
position: absolute;
top: 5%;
left: var(--left-size);
margin-left: 0px;
}

.text {
overflow: auto;
height: 430px;
width: calc(100% + 13px);
position: relative;
}

.right::after {
content: '';

position: absolute;
bottom: 00px;
left: 0;


width: 100%;
height: 100px;
background-image: linear-gradient(to top, var(--background), transparent);

}

.paragraph {
display: flex;
padding: 20px 0;
}

.date {
text-align: right;
font-size: 0.8rem;
width: var(--left-size);
box-sizing: border-box;
padding-right: 20px;
flex-shrink: 0;
flex-grow: 0;
font-style: italic;
}

.rond {
--size: 20px;
width: var(--size);
height: var(--size);
background-color: var(--emphase);
border-radius: 100%;
flex-shrink: 0;
flex-grow: 0;
position: relative;
left: -11px;
top: -5px;
border: 2px solid var(--middle);
}

.text-content {
text-align: justify;
padding-right: 40px;
font-size: 0.9rem;
}

.paragraph img {
display: block;
margin: 0 auto;
width: 100%;
height: 300px;
object-fit: cover;
border: 5px solid white;
border-bottom: 25px solid white;
box-shadow: 0 0 5px rgba(255,50,0,0.3);
border-radius: 3px;
}

Commentaires

Avatar de Yamazakura
Yamazakura le 27 Aoû 2021 à 21h11
Cette fiche est vraiment très belle, j'aime beaucoup les couleurs et les fleurs !
Avatar de Insolence
Insolence le 28 Aoû 2021 à 02h08
Simple et très efficace, les couleurs sont vraiment jolies.
Je suis un peu moins d'accord sur certains choix mais je vais pas chipoter car il s'agit de détails et je préfère complimenter que casser les pieds, alors bravo !
Avatar de Ayfoth
Ayfoth le 28 Aoû 2021 à 10h00
Sympa mais des class pour un seul élements c'est pas top top haha
Avatar de Insolence
Insolence le 28 Aoû 2021 à 18h59
Ayfoth > Quand il s'agit d'une fiche comme ça, mettre des class partout n'est vraiment pas trop grave, les "bonnes pratiques" sont vraiment utiles que dans le cadre de gros projets je trouve
Avatar de CHAUSSETTE
CHAUSSETTE le 28 Aoû 2021 à 23h19
J'adore l'idée des petites catégories par dates, ça fait un peu carnet de voyage 8D
Et puis l'ombre rose en bas est merveilleuse !
Avatar de Galad-El
VIP depuis le 06/03/2020
Galad-El le 29 Aoû 2021 à 16h03
Merci beaucoup

@Insolence n'hésite pas, je suis vraiment nulle en design donc toute remarque peut m'aider à y voir plus clair xD

@Ayfoth : pour des éléments purement visuels, même unique, j'ai tendance à toujours mettre des classes. C'est beaucoup plus pratiques pour styliser le CSS, et partant du principe qu'une fiche est faite pour s'intégrer dans une page plus grande, les ID peuvent parfois causer soucis. Donc si je n'ai pas besoin d'un lien vers la div en question, et que je l'utilise uniquement pour la modifier visuellement, je mets une classe plutôt qu'un ID. J'aurais pu jouer sur les nth-child plutôt que sur des noms de classe mais la flemme :)
Avatar de Ayfoth
Ayfoth le 29 Aoû 2021 à 18h12
nan mais tu pourrais utiliser first-child, last-child etc
et en plus tu es une copiteuse pour les dates xd
Avatar de Plume`
Plume` le 29 Aoû 2021 à 20h43
J'aime beaucoup

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