/ 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
}
/ 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 {
}
/ Style de la section Plats /
plat {
}
/ Style de la section Desserts /
dessert {
}
menu {
}
/ 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;
}