4 Favoris
VIP depuis le 06/03/2020
Galad-El le 25 Mai 2020 à 15h14

Un ptit code pour le fun (et pour tester l'arrivée prochaine des LS haha). Rien de bien intéressant, je suis nulle en design, mais ça fait un premier entraînement pour un futur dark theme pour ici 8)

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>PA Neon</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Economica&display=swap" rel="stylesheet">
</head>
<body>

<div class="container">
<div class="page_accueil">

<h1>Page d'Accueil</h1>

<div class="corps">
<section class="nouveautes">

<div class="news">
<h2>Nouveautés</h2>
<div class="nouveaute">
<span class="date">31/05/20</span> Courte nouveauté...
</div>

<div class="nouveaute">
<span class="date">31/05/20</span> Longue nouveauté avec largement plus de blabla parce qu'il faut s'exprimer longuement ;
</div>

<div class="nouveaute">
<span class="date">31/05/20</span> lorem ipsum...
</div>
</div><!-- FIN news -->

<nav>
<h2 style="margin-top: 10px; margin-bottom: 0;">Navigation</h2>

<ul>
<li>Lien 1</li>
<li>Lien 2</li>
<li>Règlement</li>
<li>Autres</li>
</ul>
</nav>

</section>

<section class="description">
<h2>Description</h2>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</p>

<img style="display: block; margin: 2px auto; height: 70px; width: 400px; object-fit: cover;" src="https://i.giphy.com/media/26FPKhUtNG3TW74f6/giphy.webp" />
</section>

<section class="partenaires">
<h2>Staff</h2>

<div class="staff">
<img src="https://images.unsplash.com/photo-1570341395883-6a8e5a601d93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80" alt="Avatar" />
<div class="informations">Description du membre qui occupe ce poste !</div>
</div>

<div class="staff">
<img src="https://images.unsplash.com/photo-1570341395883-6a8e5a601d93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80" alt="Avatar" />
<div class="informations">Description du membre qui occupe ce poste !</div>
</div>

<div class="staff">
<img src="https://images.unsplash.com/photo-1570341395883-6a8e5a601d93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80" alt="Avatar" />
<div class="informations">Description du membre qui occupe ce poste !</div>
</div>

</section>
</div>

</div>
</div>

</body>
</html>

CSS

:root {
--background: url('https://images.unsplash.com/photo-1502872364588-894d7d6ddfab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80');

--rose: #BF1736;
--bleu-noir: #060a20;
--bleu-fonce: #0D1440;
--bleu: #0E2773;
--bleu-clair: #1438A6;
--blanc: #d8e4f6;

--titre-font: 'Economica', sans-serif;
--text-font: 'Open Sans', sans-serif;
}

body {
margin: 0;
background-color: var(--bleu-noir);
}

.container {
background-color: var(--bleu-fonce);
width: 90%;
max-width: 900px;
min-width: 500px;
min-height: 100px;
padding-bottom: 100px;
margin: 0 auto;
}


.page_accueil
{
background-image: var(--background);
background-size: cover;
background-position: center;

font-family: var(--text-font);
color: var(--blanc);
}

.page_accueil h1
{
margin: 0;
text-transform: uppercase;
font-family: var(--titre-font);
font-size: 3rem;
text-align: center;
margin: 10px;
margin-bottom: 0;
text-shadow: 0 0 3px var(--bleu-clair);

border: 1px solid #d8e4f688;
box-shadow: 0 0 2px var(--bleu-clair);

background-color: rgba(0,0,0,0.3);
background-image: radial-gradient(rgba(230,230,255,0.2), rgba(0,0,0,0.3));
border-radius: 1px;
}

.page_accueil .corps
{
display: flex;
justify-content: center;
}

.page_accueil .corps section.description
{
flex-grow: 2;
}


/* NOUVEAUTES */
section.nouveautes
{
margin: 10px;
padding: 10px;
flex-basis: 30%;
/*border-top: 2px ridge #007bc5;
border-bottom: 2px ridge #007bc5;
box-shadow: 0 0 3px var(--bleu); */
}

section.nouveautes .news
{
background-color: rgba(0,0,0,0.5);
padding-bottom: 10px;
}

section h2
{
text-transform: uppercase;
font-family: var(--titre-font);
font-size: 1.5rem;
margin: 0;
text-align: center;
text-shadow: 0 0 3px var(--bleu-clair);
}

section h2::before, section h2::after
{
content: ' - ';
transform:rotate(30deg);
opacity: 0.5;
}

section.nouveautes
{
font-size: 0.8rem;
}

section.nouveautes .nouveaute
{
margin: 8px 2px;
text-align: justify;
padding-right: 15px;
}

section.nouveautes .date
{
background-color: var(--bleu);
padding: 0 5px;
border-radius: 3px;
border-bottom: 1px solid #007bc5;
}

section.nouveautes ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
text-shadow: 0 0 2px var(--bleu-clair);
}

section.nouveautes ul li
{
background-image: radial-gradient(rgba(230,230,255,0.1), transparent 50%);
transition: letter-spacing 0.3s ease-in, font-weight 0.3s ease-in;
}

section.nouveautes ul li:hover
{
cursor: pointer;
letter-spacing: 3px;
font-weight: 600;
}


/* CONTEXTE */
section.description
{
padding-top: 20px;
background-color: var(--bleu-noir);
flex-basis: 30%;

border-left: 2px solid #007bc5;
border-right: 2px solid #007bc5;
box-shadow: 0 0 0px var(--bleu);
}

section.description p
{
font-size: 0.8rem;
text-align: justify;
padding: 10px;
margin: 10px;
}

/* STAFF */
section.partenaires
{
padding: 20px;
}

.staff
{
position: relative;
}

.staff .informations
{
position: absolute;
top: 50px;

font-size: 0.7rem;
text-align: center;
background-color: rgba(0,0,0,1);
border: 1px solid #d8e4f688;
border-radius: 3px;
z-index: 5;
box-shadow: 0 0 5px var(--bleu-clair);
padding: 5px;

opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in;
}

.staff:hover
{
cursor: pointer;
}

.staff:hover .informations
{
opacity: 0.7;
visibility: visible;
}

.staff img
{
width: 70px; height: 70px;
object-fit: cover;
border-radius: 100%;
border: 2px solid var(--blanc);
box-shadow: 0 0 7px var(--bleu-clair);
}

Commentaires

Avatar de Sygea
Sygea le 25 Mai 2020 à 20h22

C'est joli, lisible et fonctionnel, c'est super, j'aime bien les PA compactes qui contiennent pas trop d'informations et qui sont tout de même bien ergonomique ! C'est pas si fréquent ni évident c:

Page :

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