Main_page.css (V2)

[georgiaclemencon]

/ Style général / @font-face { font-family: "PlumePLUME"; / Remplacez par le nom que vous souhaitez utiliser pour la police / src: url('C:/wamp64/www:PROJET_HTML/PlumePLUME.ttf'); / Remplacez par le chemin vers votre fichier TTF / font-family: "AramisItalic"; src: url('C:/wamp64/www:PROJET_HTML/Aramis Italic.ttf'); font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif }

menuButton {

display: block; margin: 20px auto; padding: 10px 20px; background-color: #9c928d; color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }

• { margin: 0; padding: 0; box-sizing: border-box; }

  body { background-color: #f2eee8; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "PlumePLUME"; font-family: "Aramis Italic"; }

  / Style de l'en-tête / header { background-color: #613a39; color: #fff; text-align: center; padding: 20px 0; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }

  / Style du titre principal / h1 { font-size: 3em; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 10px; }

  / Style des sous-titres des sections /

  h2 {

  font-size: 2em; / text-transform: uppercase; / letter-spacing: 0.2em; margin-top: 20px; font-family: "Georgia"; /ajout de la propriété font-family/ }

  / Style des boutons de la section Affichage du menu / / CSS styles for buttons / button { background-color: #4bad75; color: #fff; font-size: 1.8em; text-transform: uppercase; letter-spacing: 0.2em; padding: 20px 40px; margin: 140px 0; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease-in-out; position:absolute; top: 50px; left: 20px; }

button:nth-child(1) { margin-top: 160; } button:nth-child(2) { margin-top: 270; } button:nth-child(3) { margin-top: 380; }

button:hover { background-color: #ffcc29; color: #613a39; transform: scale(1.1); }

/ CSS styles for the sections /

/ Style de la section Entrées /

entree {

background-color: #9c928d;
color: #fff;
padding: 50px;
display: none;
position:absolute;
bottom: 0;
left: 50%;
/* transform: translateX(-50%); */

}

/ Style de la section Plats /

plat {

background-color: #7b6663;
color: #fff;
padding: 50px;
display: none;
position:absolute;
bottom: 0;
left: 50%;

}

/ Style de la section Desserts /

dessert {

background-color: #c6ac9c;
color: #fff;
padding: 50px;
display: none;
position:absolute;
bottom: 0;
left: 50%;

}

menu {

background-color: #f2eee8;
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
padding-top: 50px;
padding-bottom: 50px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);

}

/ Style des éléments du menu / h3 { font-size: 1.8em; margin-bottom: 10px; }

ul { list-style-type: none; margin-bottom: 30px; }

li { font-size: 1.4em; margin-bottom: 10px; }

*,::after,::before{ margin: 0; padding: 0; box-sizing: border-box; }

body{

margin: 0 100px; background-color:#ffeaed; } /*

=======MENU======: */ .nav{

width: 100%;

display: flex;

justify-content: space-between;

align-items: center;

padding: 30px 0;

}

.nav .logo h1{ font-weight: 600; font-family: sans-serif; color:#000000; }

.nav .logo b{

color:#ff511c; }

.nav ul{

display: flex;

list-style: none;

} .nav ul li{

margin-right: 30px;

}

.nav ul li a{

text-decoration: none; color:#000000; font-weight: 500; font-family: sans-serif; font-size: 17px;

} /=======ACTIVE====== /

.nav ul .active::after{ content:''; width: 50%; height: 3px; background-color: #ff511c; display: flex; position: relative; margin-left: 10px; }

/=======Input====== / input{ padding: 10px 20px; cursor: pointer; font-weight: 600; } .signin{

background: transparent; border: none; }

.signup{ background-color: #7eff1c; color: #fff; outline: none; border: none; border-radius: 5px;

} / bas de lapage/ .mainn{ display: flex; flex-wrap: wrap; } .footer{ padding:10px 0; } .col{ width: 25%; } .col h4{

font-size: 1.2rem; color:var(--text-color); margin-bottom: 25px; position:relative;

} .col h4 ::before{ content: ""; position: absolute; height: 2px; width: 50px; left: 0; bottom: -8px; background: var(--main-color);

}

.col ul li:not(last-child){ margin-bottom: 15px; } .col ul li a{

color:#4bad75; font-size: 1.1rem; display: block; text-transform: capitalize; transition: .4s;

} .col ul li a:hover{

color: var(--text-color); transform: translatex(-12px);

} .col .social{

width: 220px; display: flex; align-items: center; justify-content: space-between;

} .col .social a{ height: 40px; width:40px; background: var(--main-color); color: var(--text-color); display: inline-flex;

}