nanane6
Members
-
Joined
-
Last visited
-
"an example of what? " an example of how to make html css code. It may interest a beginner.
-
if you want, I can post part by part, it might be better. a header with the navigation bar. content examples and a footer ?
-
this is just an example site for those who may be interested I looked for this type of example but couldn't find any.
-
<html lang="zxx"> <head> <meta charset="utf-8"> <title>site-html-css</title> <meta name="description" content="site-html-css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="lib/fontawesome-free-6.0.0-beta3-web/css/all.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="img/Logo_Archi_Design-ico.jpg"> <style> @font-face{font-family:ZONAPRO; src:url("font/zonapro-thin.otf")} </style> </head> <body> <header> <div class="headhaut"> <div > <img src="img/Logo_Archi_Design-ico.jpg" alt="logo-Archidesign" title="logo-arichidesign" class="logo"> </div> <div id="navig"> <nav> <label for="toggle">☰</label> <input type="checkbox" id="toggle"> <div class="main_pages"> <ul> <li><a href="#" title="Accueil">Accueil</a></li> <li> <a href="#presentation" title="Presentation">Présentation</a></li> <li><a href="#prestation" title="presation">Prestation</a></li><li><a href="#projet" title="projet">Projet</a></li> <li><a href="#contact" title="contact">Contact</a></li> </ul> </div> </nav> </div> <div class="social"> <ul> <li><a href="" title="facebook"><i class="fa-brands fa-facebook-square"></i></a></li> <li><a href="" title="instagram"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="" title="twitter"><i class="fa-brands fa-twitter-square"></i></a></li> </ul> </div> </div> <div class="sliderimg"> <img src="img/Logo_Archi_Design-ico.jpg" alt="logo Dance Contest" class="responsivelogo"> <div class="haut-image"> <div class="republique"> <div class="rep"><h1>République <br>Dominicaine</h1></div> </div> </div> </div> <div class="slider-container"> <div class="menu"> <label for="slide-dot-1"></label> <label for="slide-dot-2"></label> <label for="slide-dot-3"></label> </div> <input id="slide-dot-1" type="radio" name="slides" checked> <div class="slide slide-1"></div> <input id="slide-dot-2" type="radio" name="slides"> <div class="slide slide-2"></div> <input id="slide-dot-3" type="radio" name="slides"> <div class="slide slide-3"></div> </div> </header> <main> <div class="article1"> <h2>Titreh2</h2> <div class="texth1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus optio, incidunt dicta et cumque quo alias veritatis modi delectus neque obcaecati unde earum corporis officiis placeat quibusdam quae quasi sunt velit ea? Nulla rem mollitia neque blanditiis culpa, autem eum voluptatem incidunt ipsam dignissimos illum, dolores reiciendis! Quia, labore, deserunt.</p> </div> </div> <article id="projet" class="projetmaison"> <div class="img2"> <img src="img/promo-image-graphisme.png" alt="image-maison" title="archidesign-img" class="maison"> </div> <div class="detprjet"> <div class="titretext"> <h2>Projet maison individuel</h2> </div> <div class="textprojet"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt cum neque rerum nisi a nesciunt aliquid saepe impedit hic laudantium sed quidem velit ullam quia omnis asperiores harum facere quibusdam, culpa. Repellendus dicta saepe nam laboriosam fugit et quis reprehenderit sapiente dolorum dolore nobis molestiae, iste illo ex quidem quibusdam ipsa ullam amet doloremque voluptatibus esse delectus tenetur commodi ea. Fugit laborum et veniam dolorem, quas perferendis sint aut sit adipisci libero culpa dolore, cumque, magni excepturi impedit! Reprehenderit ex repudiandae tempora vero non molestias, dignissimos iure provident. Labore, et? Necessitatibus maiores earum nobis temporibus corrupti quam repellat facere, fugiat! Temporibus distinctio accusantium labore numquam quidem excepturi perspiciatis cumque quisquam! Repudiandae, unde. Voluptatibus aspernatur quas vero tempore ratione quasi error dolore, harum illum obcaecati! Aut quidem impedit minus perspiciatis earum quasi nobis rerum quibusdam nesciunt velit, sunt, placeat sit, officia fugiat, sit asperiores, enim voluptatibus quia error, recusandae laudantium beatae eum.</p> </div> </div> </article> <section id="Bonplans" class="offredumoment"> <div class="offre"> <div class="img"> <div class="mexique"></div> </div> <div class="titre-offre"> <h3>Mexique</h3> <h4>Hôtel Riu Tequila 5*</h4> <h5>dès 1369 € TTC</h5> </div> <div class="det-offre"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, expedita ab, dolorem incidunt, harum sit quia excepturi consectetur molestias molestiae nostrum earum magnam veniam! Quod magni, deleniti ad culpa quibusdam.</p> </div> <div class="reservation"> <button class="prix" type="button"> <span>Réserver</span></button> </div> </div> <div class="offre"> <div class="img"><div class="ile-maurice"></div></div> <div class="titre-offre"> <h3>Ile Maurice</h3> <h4>Le Palmiste Resort & Spa 3*</h4> <h5>dès 1189 € TTC</h5> </div> <div class="det-offre"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, expedita ab, dolorem incidunt, harum sit quia excepturi consectetur molestias molestiae nostrum earum magnam veniam! Quod magni, deleniti ad culpa quibusdam.</p> </div> <div class="reservation"> <button class="prix" type="button"> <span>Réserver</span></button> </div> </div> <div class="offre"> <div class="img"><div class="Egypte"></div></div> <div class="titre-offre"> <h3>Egypte</h3> <h4>Hôtel Désert Rose 5*</h4> <h5>dès 639 € TTC</h5> </div> <div class="det-offre"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, expedita ab, dolorem incidunt, harum sit quia excepturi consectetur molestias molestiae nostrum earum magnam veniam! Quod magni, deleniti ad culpa quibusdam.</p> </div> <div class="reservation"> <button class="prix" type="button"> <span>Réserver</span></button> </div> </div> <div class="offre"> <div class="img"><div class="Tunisie"></div></div> <div class="titre-offre"> <h3>Tunisie</h3> <h4>Hôtel Alhambra Thalasso Hammamet 5*</h4> <h5>dès 319 € TTC</h5> </div> <div class="det-offre"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, expedita ab, dolorem incidunt, harum sit quia excepturi consectetur molestias molestiae nostrum earum magnam veniam! Quod magni, deleniti ad culpa quibusdam.</p> </div> <div class="reservation"> <button class="prix" type="button"> <span>Réserver</span></button> </div> </div> </section> <article class="equipe"> <div class="titretext"> <h2>L'équipe presentation</h2> </div> <div class="mombre"> <div class="personnage"> <div class="homme"> <img src="img/personne1.jfif" alt="image-equipe" title="archidesign-img" class="pers"> </div> <div class="nom"> <p>Arthur.D</p> </div> <div class="poste"> <p>Directeur</p> </div> </div> <div class="personnage"> <div class="homme"> <img src="img/personnes2.jfif" alt="image-equipe" title="archidesign-img" class="pers"> </div> <div class="nom"> <p>Helene.E</p> </div> <div class="poste"> <p>Assistante Dir.</p> </div> </div> <div class="personnage"> <div class="homme"> <img src="img/personnes2.jfif" alt="image-equipe" title="archidesign-img" class="pers"> </div> <div class="nom"> <p>Hugo.V</p> </div> <div class="poste"> <p>Architecte</p> </div> </div> <div class="personnage"> <div class="homme"> <img src="img/personne1.jfif" alt="image-equipe" title="archidesign-img" class="pers"> </div> <div class="nom"> <p>Hugo.V</p> </div> <div class="poste"> <p>Architecte</p> </div> </div> <div class="personnage"> <div class="homme"> <img src="img/equipe.png" alt="image-equipe" title="archidesign-equipe" class="pers"> </div> <div class="nom"> <p>Christophe.G</p> </div> <div class="poste"> <p>Economiste</p> </div> </div> </div> </article> <article id="contact" class="cont"> <section class="titre-cont"> <h2>Contact</h2> </section> <section> <div class="cont-cont"> <div class="carte-text"> <div clas="tex-cart"> <p>Si vous avez des quéstions sur l'évenement son déeoulement, une probleme suite à une réservation, n'hésitez pas à nous contacter via le formulaire suivant</p> </div> <div class="carte"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4138.570775188901!2d2.3754710904379395!3d48.83859622736624!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x989bfc2771543869!2sAccorHotels%20Arena!5e0!3m2!1sfr!2sfr!4v1638562579540!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </div> <div class="formulaire"> <form action="/page-traitement-donnees" method="post"> <div> <label for="nom">Nom</label> <input type="text" id="nom" name="nom" placeholder="Saisissez votre Nom" required> </div> <div> <label for="prenom">Prenom</label> <input type="text" id="Prenom" name="prenom" placeholder="Saisissez votre Prenom" required> </div> <div> <label for="email">Votre e-mail</label> <input type="email" id="email" name="email" placeholder="@" required> </div> <div> <label for="message">Votre message</label> <textarea id="message" name="message" placeholder="Message" required></textarea> </div> <div> <button type="submit">Envoyer </button> </div> </form> </div> </div> </section> </article> </main> <footer> <div class="cont-foot"> <div class="contfooth"> <div class="lien"> <h6>Liens</h6> <dl> <dt><a href="#" title="Accueil">Accueil</a></dt> <dt> <a href="#present" title="Presentation">Présentation</a></dt> <dt><a href="#Les juges" title="Juges">Juges</a></dt><dt><a href="#billet" title="Billeterie">Billeterie</a></dt> <dt><a href="#contact" title="Contac">Contact</a></dt> </dl> </div> <div class="coord"> <h6>Coordonées</h6> <p>01 50 67 89 04</p> <p>contact@dancing-contect.com</p> </div> <div class="adresse"> <h6>Adresse</h6> <p>Accod Hotel Arena</p> <p>8 Boulevard de Bercy,</p> <p>75012 Paris</p> <p>France</p> </div> </div> <div class="cont-foot-b"> <div class="blabla"> <p>Mentions légales - Politique de confidentialité - ©Cpyright 2019 - Tous droits réservé</p> </div> <div class="ico-soc"> <ul> <li><a href="" title="facebook"><i class="fa-brands fa-facebook-square"></i></a></li> <li><a href="" title="instagram"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="" title="twitter"><i class="fa-brands fa-twitter-square"></i></a></li> </ul> </div> </div> </div> </footer> <a id="back-top" href="#top"><i class="fa fa-chevron-up"></i></a> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> ----------------------------------------------*-----------------------------------------*---------------------------------------------------*------------------------------------------------* css @charset "utf-8"; *{ margin:0; padding: 0; font-family:ZONAPRO; box-sizing: border-box; } /*----header----*/ header{ width: 100%; height: auto; } .headhaut{ width: 100%; height: 50px; margin:0; padding-top:1.8%; padding-bottom: 1.8%; padding-left: 5%; padding-right: 5%; background-color: #577cb3; display: flex; justify-content:space-between; align-items: center; align-content: center; } .logo{ width: 100%; height: 50px; margin: 0 auto; padding-left: auto; padding-right: auto; } /*----nav----*/ /*----menu burger----*/ label{ display:none; } label, #toggle { display: none; } /*----menu burger---*/ #navig{ width: 40%; height: auto; margin-top: 1%; margin-right: 0; } nav{ width: 100%; height: auto; margin: 0 auto; padding: 0; } ul{ width: 100%; height: auto; margin: 0 auto; padding: 0; display: flex; /*flex-wrap: wrap;*/ justify-content: space-between; list-style: none; } li{ margin: 0 auto; text-align: center; } a{ width: 100%; padding: 0; text-decoration: none; font-family:"Lato Regular"; font-size: 12px; font-weight: normal; color:white; } a:hover{ color:#6D0FF2; } /*----fin-nav--*/ .social{ width: 10%; height: auto; } .social ul{ width:100%; height: auto; margin : 0 auto; padding-top: 15%; display: flex; justify-content: space-between; align-items: center; } /*---image responsive----*/ .sliderimg{ width: 100%; height:600px; margin: 0 ; padding: 0; background-image:url("../img/Web-Design-PNG-Photo.png"); background-position: center; background-repeat: no-repeat; background-size:contain; } /****logo responsive position absolute---*/ .responsivelogo { width: 20%; height: auto; top:20%; left:40%; display: block; position: absolute; border-radius: 35px; } /*----image en backgrund---*/ .haut-image{ width: 100%; height: 600px; padding-top: 5%; padding-bottom: 5%; background-image:url("../img/img originales/Photo/beach-DW_Site_MyTrip.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .republique{ width: 25%; height: auto; margin-left: 5%; padding: 1%; background-color:rgba(66,117,132,0.62); align-content: center; } /*----------slider------*/ img { max-width: 100%; } .slider-container { height: 500px; width: 100%; position: relative; overflow: hidden; text-align: center; z-index: 0; border-bottom: 18px solid #454343; } .menu { position: absolute; left: 0; z-index: 900; width: 100%; bottom: 0; } .menu label { cursor: pointer; display: inline-block; width: 16px; height: 16px; background:black; border-radius: 50px; margin: 0 0.2em 1em; } .menu label:hover,.menu label:focus { background-color:rgba(209,90,205,1.00); } .slide { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-size: cover; background-position: 50% 50%; transition: left 0s 0.75s; } [id^="slide"]:checked + .slide { left: 0; z-index: 100; transition: left 0.65s ease-out; } .slide-1 { background-image:url("../img/Web-Design-PNG-Photos.png"); } .slide-2 { background-image:url("../img/Web-Design-PNG-Clipart.png"); } .slide-3 { background-image:url("../img/Web-Design-PNG-Pic.png"); } /*-----slider-----*/ .article1{ width: 50%; height: auto; margin: 0 auto; padding-bottom: 4%; padding-top: 8%; padding-left: 5%; padding-right: 5%; } .article1 h2{ width: 100%; margin: 0 auto; padding: 0; text-align: center; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 2em; color: aqua; line-height: 4em; } .article1 p{ text-align: justify; line-height: 1.4em; font-size: 1em; } .projetmaison{ width: 100%; height: auto; margin: 0 auto; padding: 0; display: flex; flex-direction: row; } .img2{ width: 50%; margin: 0 auto; padding: 0; } .maison{ width: 100%; height: 450px; } .detprjet{ width: 45%; margin: 0 auto; padding: 0; display: flex; flex-direction: column; } .titretext{ width: 100%; margin-bottom: 3%; } .titretext h2{ width: 100%; height: auto; font-weight: bolder; } .textprojet{ width: 100%; height: auto; margin: 0 auto; padding-right: 12%; } .textprojet p{ text-align: justify; line-height: 1.6em; font-size: 1em; } /*---offres---*/ .offredumoment{ width: 90%; margin: 0 auto; padding: 0; display: flex; flex-direction: row; justify-content: space-around; } .offre{ width: 22%; height: auto; } .img{ width: 100%; height: auto; margin-bottom: 2%; } .mexique{ width: 100%; height: 200px; background-image:url("../img/img originales/Photo/cancun-DW_Site_MyTrip.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .Egypte{ width: 100%; height: 200px; background-image:url("../img/img originales/Photo/pyramids-DW_Site_MyTrip.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .ile-maurice{ width: 100%; height: 200px; background-image:url("../img/img originales/Photo/cap-malheureux-DW_Site_MyTrip.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .Tunisie{ width: 100%; height: 200px; background-image:url("../img/img originales/Photo/tunisia-DW_Site_MyTrip.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .titre-offre{ width: 100%; height: auto; } h3{ color:#ff7e40; font-size: 25px; } h4{ color:#5e5e5e; font-weight: 100; font-style: italic; font-size: 18px; padding-bottom: 1%; } h5{ color:#5e5e5e; font-weight: bold; font-size: 25px; padding-bottom: 2%; } .det-offre{ width: 100%; height: auto; color:#333; font-size: 18px; } .det-offre p{ text-align: justify; } .reservation{ width: 60%; margin: 0 auto; padding-top: 12%; line-height: 1.6em; color: #AB05F2; } .reservation button{ line-height: 1.5em; padding: 5%; font-family:"Lato Thin"; font-size: 17px; align-items: center; text-align: center; color:#AB05F2; border: none; background-color: burlywood; } button:hover{ color: black; font-weight: bold; } /*----fin offre----*/ /*----equipe-----*/ .equipe h2 { text-align: center; } .mombre{ width: 80%; height: auto; margin: 0 auto; padding-bottom: 3%; display: flex; justify-content: space-between; align-content: center; align-items: center; } .personnage{ width: 15%; display: flex; flex-direction: column; justify-content: space-between; align-content: center; align-items: center; } .nom{ color:#577cb3; font-size: 25px; padding-top: 2%; padding-bottom: 1%; } .poste{ color:#B0CFFF; font-size: 25px; } /*-----contact----*/ cont{ width: 70%; height: auto; } .titre-cont{ width: 100%; height: auto; margin:0 auto; } .cont-cont{ width: 70%; height: auto; margin: 0 auto; display: flex; padding-top: 3%; justify-content:space-between; } .carte-text{ width:55%; height: auto; } .carte-text p{ text-align: justify; padding-bottom: 3%; } /*----formulaire----*/ .formulaire{ width: 40%; padding-top:1%; color: #303030; font-family: "Lato Regular"; } form div { width: 100%; display: flex; flex-direction: column; min-height: 83px; margin-top: 25px; } form div > label { margin-bottom: 7px; font-weight: 600; } form div > input, form div > select, form div > textarea { background: #C004D9; border: none; font-size: 16px; font-weight: 500; font-family:'Lato Regular'; } form div > input, form div > select { height: 40px; padding-left: 10px; } form div > select { appearance: none; background-size: 15px; background-position: right 10px top 50%; } form div > textarea { height: 125px; padding: 15px 0px 0px 10px; } form div > input::placeholder, form div > textarea::placeholder { color: white; } form div > select:invalid { color: white; } form div > select option { background: red; color: black; } form div:last-child { align-items:center; margin-top: 20px; } form button { width: 50%; height: 40px; font-size: 18px; margin-right: -50%; background: #6D0FF2; color:white; border:none; } label for{ color:green; } /*-----footer----*/ footer{ width: 100%; height: auto; background-color: black; } .cont-foot{ width: 70%; margin: 0 auto; display: flex; flex-direction:column; } .contfooth{ width: 100%; height: auto; margin: 0 auto; padding-bottom: 3%; padding-top: 3%; display: flex; justify-content: space-between; line-height: 1.2em; } .lien{ width: 33%; display: flex; flex-direction: column; justify-content: flex-start; } h6{ color:white; margin:0; font-family:"Lato Medium"; line-height: 1.5em; font-size: 26px; padding-bottom: 2%; } .lien dt a{ font-size: 14px; } .coord{ width: 33%; text-align: center; } .coord p{ font-family:"Lato Regular"; font-size: 14px; font-weight: normal; color:white; padding:1%; line-height: 1em; } .adresse{ width: 33%; text-align: end; } .adresse p{ font-family:"Lato Regular"; font-size: 14px; font-weight: normal; color:white; } .cont-foot-b{ width: 100%; height: auto; margin: 0 auto; padding-bottom: 3%; padding-top: 3%; display: flex; justify-content:flex-end; align-items: flex-end; line-height: 1.2em; } .blabla{ width: 65%; } .blabla p{ font-family:"Lato Regular"; font-size: 14px; font-weight: normal; color:white; } .ico-soc{ width: 15%; } .ico-soc .fa-brands{ font-size: 35px; color:white; } /*-------back to top----*/ #back-top { position: fixed; display:none; font-size: 50px; color: #6D0FF2; bottom: 5px; right:10px; width:auto;} a#back-top:active {background:none;} a#back-top {display: block; text-decoration: none;} .topup {bottom:5px;} #back-top i {display: block;} /*------fin back to top----*/ @media screen and (max-width:1000px){ #navig{ width: 80%; } .haut-image{ width: 100%; height: 400px; padding-top: 15%; } .sliderimg{ width: 100%; height:500px; } .cont-cont{ width: 70%; display: flex; flex-direction: column; } .carte-text{ width:100%; height: auto; } .carte-text p{ text-align: justify; } .formulaire{ width: 100%; padding-top:1%; color: #303030; font-family: "Lato Regular"; } .cont-foot{ width: 90%; } form div { width: 100%; display: flex; flex-direction: column; } form button { margin-right: 0%;} .cont-foot-b{ width: 100%; flex-wrap: wrap-reverse; justify-content:center; } .blabla{ width: 100%; margin-top: 5%; text-align: center; } .ico-soc{ width: 35%; } } /*------fin tablette ---*/ @media screen and (max-width:700px){ .headhaut{ height: 70px; padding-top:7%; padding-bottom: 7%; padding-left: 5%; padding-right: 5%; flex-direction: row-reverse; } /*---nav---*/ main{ max-width: 768px; } nav .main_pages { position: absolute; display: none; background-color:none; width: 30%; } nav .main_pages ul{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; } nav .main_pages li{ margin:0; padding-left: 6%; background-color: white; padding-top: 15%; text-align: left; } nav .main_pages a { width: 100%; color:#b0cfff; font-size: 15px; font-weight: bold; } nav .main_pages a:hover{ color:#b39a69; } label{ display: block; font-size: 40px; color:white; margin-top: -5px; margin-left: 2%; cursor: pointer; } #toggle:checked + .main_pages { display: flex; } /*---fin nav--*/ /*----offre--*/ .offredumoment { width: 100%; height: auto; margin: 0 auto; padding-bottom: 2%; padding-top: 2%; display: flex; flex-wrap: wrap; justify-content: space-around; } .offre{ width: 48%; padding-bottom: 2%; padding-left: 2%; padding-right: 2%; height: auto; } .cont-avis{ width: 90%; } .det-avis{ widht:33%; } .ico-avis{ width: 60%; } .det-conta{ width: 100%; flex-direction: column; justify-content:space-around; align-items: center; } /*----fin offre---*/ /*----equipe----*/ .mombre{ width: 80%; display: flex; flex-direction: column; } h2{ padding-bottom: 5%; } .personnage{ width: 30%; flex-direction: column; margin-bottom: 6%; padding-top: 5% } .projetmaison{ width: 100%; display: flex; flex-direction: column; align-items: center; } .imgmaison{ width: 100%; height: auto; padding-bottom: 3%; } /*---fin equipe---*/ } script.js all.css script.js style.css
-
nanane6 joined the community
-
il y'a un plugin spécial header footer pour elementor : Elementor Header & Footer Builder