Autres

OccasionsHarlequin

by Valerie6377

HTML

<!DOCTYPE HTML>
<html lang="fr">
    <head>
        <title>Les livres >> autres </title>
        		<meta name="google-site-verification" content="-vwJQv4f_oAgRMw2IvS0GbJ9zCd7PdZfu9e2lnzRfU4" />
		<meta name="Subject" content="Vente d'occasion collection Harlequin et divers - Tout doit disparaître !" />
		<meta name="identifier-url" content="https://mon-espace-detente.fr/occasionsharlequin/" />
		<meta name="description" content="Livres d'occasion collection Harlequin (Azur, Black-Rose, Duo, Horizon...)" />
		<meta name="keywords" content="collection,harlequin,livre,poche,vente,occasion,occasions,azur,duo,black-rose,black,rose,BlackRose,horizon,prelud,sexy,RedRoom,prince,famille,sentimental" />
		<meta name="Abstract" content="Livres d'occasion collection Harlequin (Azur, Black-Rose, Duo, Horizon, Prélud', Sexy et autres)" />
		<meta name="Rating" content="pages perso" />
		<meta name="Date-creation-yyyymmdd" content="20071115" />
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />		
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
		<link rel="manifest" href="site.webmanifest">		<link href="fontawesome/css/all.css" rel="stylesheet" type="text/css" > <!--load all styles (version 5.10.1) -->
		
		<link rel="stylesheet" href="css/form-commande.css" type="text/css">

		<link rel="stylesheet" href="css/style.css" type="text/css" />
		    </head>

    <body>
        <div id="conteneur">
            <header>
			    <h1>Vente de livres d'occasion</h1>
				<h2>Éditions Harlequin</h2>
			</header>
<!-- ============ DEBUT DU MENU =========== -->
	<nav>
		
	<!-- --------------- Bouton hamburger de Carl Brison (www.tuto.com) actif avec js de jQuery --------------- -->

		<div...

CSS

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Lato;
	font-size: 16px;
	background-color: #F3F3F3;
}

/*************** SCROLLBAR *************/

/* Chrome, Edge, and Safari */
body::-webkit-scrollbar {
	width: 18px;
	background: #F7F7F7;
}
 
body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 1px 0px 6px rgba(0,0,0,0.3);
	background: #fff;
	border-radius: 10px;
}
 
body::-webkit-scrollbar-thumb {
    background-color: #C00A07;
    border-radius: 10px;
}

/* Firefox */
html {
    scrollbar-width: auto;
    scrollbar-color: #C00A07 #ffffff;
}

/*************** FIN SCROLLBAR *************/

/* ********** CONTENEUR ********** */

#conteneur {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 0.5fr 2fr 1fr;
	grid-template-areas:
		"header"
		"nav"
		"section"
		"footer";
}
/* ********** FIN DU CONTENEUR ********** */

/* ********** HEADER ********** */

header {
	margin: 0;
    padding: 0;
	grid-area: header;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #F3F3F3 url(../images/img_livres_H.jpg) no-repeat;
	background-size: 50%; /* 50% en hauteur et en largeur */
	background-position: left;
	border-bottom: 2px solid #E00000;
}

header h1, header h2 {
	margin-left: 50%;
	font-family: Lato;
	color: red;
	text-shadow: -15px 13px 8px #555;
	text-align: center;
}

header h1 {
	font-size: 55px;
	margin-bottom: 0;
}

header h2 {
	font-size: 45px;
}

/* ********** FIN DU HEADER ********** */

/* ========== NAV ========= */

.menu {
	display: none;
}

nav {
	margin: 0 auto;
	width: 100%;
	grid-area: nav;
	background-color: #232323;
}

nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

nav ul li {
	list-style:...

JavaScript

function ouvrirFermerSpoiler(div) {
	let spoilers = document.getElementsByClassName('contenuSpoiler');
	
	for (let i = 0; i < spoilers.length; i++) {
		if (spoilers[i].classList.contains('afficher') == true) {
			spoilers[i].classList.remove ('afficher');
			spoilers[i].classList.toggle ('cacher');
		}
	}

	let divContenu = div.getElementsByTagName('div')[1];
	
	if (divContenu.classList.contains('cacher') == true) {
		divContenu.classList.remove('cacher');
		divContenu.classList.toggle('afficher');
	} else if (divContenu.classList.contains('afficher') == true) {
		divContenu.classList.remove('afficher');
		divContenu.classList.toggle('cacher');
	}
};

// Ouvre une div après l'autre, mais ne peut pas refermer la div courante en recliquant sur "cacher le résumé".