Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>

<html lang="fr">

	<head>
		<title>CUP OF TEA</title>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- STYLESHEET FONTS -->
		<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

		<!-- STYLESHEET FONT AWESOME -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- STYLESHEET PERSO -->
		<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

		<!-- SLIDER -->
		<!-- <link rel="stylesheet" href="flexslider/flexslider.css" type="text/css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="flexslider/jquery.flexslider.js"></script>
		<script src="js/main.js"></script> -->

	</head>

	<body>

		<!--HEADER-->
		<header>

			<img class="ribbon" src="https://www.stephanie-rouby.fr/cupoftea/img/ribbon.svg" alt="Elu meilleur thé">

			<div id="deliver">
				Livraison offerte à partir de 65€ d'achat !	
			</div>

			<div id="top" >
				
				<div id="logo">
					<a href="index.html"><img src="https://www.stephanie-rouby.fr/cupoftea/img/logo.png" alt="Logo Cup of tea"></a>
				</div>

				<div id="cart">
					<span>Mon panier</span><i class="fa fa-shopping-cart round" aria-hidden="true"></i><span id="amountcart">42,00€</span>
				</div>

			</div>

			<nav class="container nav">
				<ul>
					<li><a href="#">thés</a></li>
					<li><a href="#">grands crus</a></li>
					<li><a href="#">accessoires</a></li>
					<li><a href="#">epicerie</a></li>
					<li><a href="#">notre histoire</a></li>
				</ul>
			</nav>
			
		</header>
		
		<!--MAIN CONTENT-->
		<main>
			<div class="container">
				<section id="christmas">
					<h1>C'est noël, profitez-en !</h1>
					<img id="img_christmas" src="https://www.stephanie-rouby.fr/cupoftea/img/offre-noel.jpg" alt="Recevez des cadeaux dès que vous atteignez un minimum d'achat">
					<p><small>Pour toute commande effectuée avant le 20 décembre</small></p>
				</section>

				<!-- <div id="slider">
					<div class="flexslider">
					  <ul class="slides">
					    <li>
					      <img src="https://www.stephanie-rouby.fr/cupoftea/img/slider/1.jpg" alt="Idées cadeaux de notre boutique de Noël" />
					    </li>
					    <li>
					      <img src="https://www.stephanie-rouby.fr/cupoftea/img/slider/2.jpg" alt="Retrouvez les thés n°25 de notre nouvelle collection" />
					    </li>
					  </ul>
					</div>
				</div>-->

				<section id="category">
					<h2><span>Choisissez votre thé</span></h2>
					<div id="teas">
						<a href="#">
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/tea/1.jpg" alt="Thé noir">
							<h3>Thé noir</h3>
						</a>
						<a href="#">
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/tea/2.jpg" alt="Thé vert">
							<h3>Thé vert</h3>
						</a>
						<a href="#">
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/tea/3.jpg" alt="Oolong">
							<h3>Oolong</h3>
						</a>
						<a href="#">
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/tea/4.jpg" alt="Thé blanc">
							<h3>Thé blanc</h3>
						</a>
						<a href="#">
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/tea/5.jpg" alt="Rooibos">
							<h3>Rooibos</h3>
						</a>
					</div>
				</section>

				<div id="focus">
					<div class="star">
						<h2><span>Notre nouveauté</span></h2>
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/product/product1.jpg" alt="Notre nouveauté">
								<h3>Thé du hammam</h3>
									<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio lorem, dictum sit amet diam ut, commodo imperdiet sapien. Cras dapibus augue nunc, vel vestibulum est tempus a. Praesent maximus justo quis arcu maximus fringilla.</p>
									<p>A partir de</p>
										<h3 class="homeprice">8,50€</h3>
											<a class="cta" href="#">Voir ce produit</a>
					</div>
					<div class="star">
						<h2><span>Notre best-seller</span></h2>
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/product/product2.jpg" alt="Notre best-seller">
								<h3>Infusion Herboriste</h3>
									<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio lorem, dictum sit amet diam ut, commodo imperdiet sapien. Cras dapibus augue nunc, vel vestibulum est tempus a. Praesent maximus justo quis arcu maximus fringilla.</p>
									<p>A partir de</p>
										<h3 class="homeprice">8,50€</h3>
											<a class="cta" href="#">Voir ce produit</a>
					</div>

					<div class="star">
						<h2><span>Notre coup de coeur</span></h2>
							<img src="https://www.stephanie-rouby.fr/cupoftea/img/product/product3.jpg" alt="Notre coup de coeur">
								<h3>Blue of London</h3>
									<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio lorem, dictum sit amet diam ut, commodo imperdiet sapien. Cras dapibus augue nunc, vel vestibulum est tempus a. Praesent maximus justo quis arcu maximus fringilla.</p>
									<p>A partir de</p>
										<h3 class="homeprice">8,50€</h3>
											<a class="cta" href="#">Voir ce produit</a>
					</div>
				</div>
			</div>
		</main>
		

		<!--FOOTER-->
		<footer>

			<div id="nav2">
					<a href="#"><i class="fa fa-lock" aria-hidden="true"></i>paiement sécurisé</a>
					<a href="#"><i class="fa fa-truck" aria-hidden="true"></i>ma livraison offerte</a>
					<a href="#"><i class="fa fa-money" aria-hidden="true"></i>carte de fidélité</a>
					<a href="#"><i class="fa fa-phone" aria-hidden="true"></i>service client</a>
					<a href="#"><i class="fa fa-check-circle" aria-hidden="true"></i>garantie qualité</a>
			</div>

			<div id="nav3">
				<div>
				<h4>cup of tea</h4>
					<ul>
						<li><a href="#">Notre Histoire</a></li>
						<li><a href="#">Nos boutiques</a></li>
						<li><a href="#">Le Thé de A à Z</a></li>
						<li><a href="#">Espace clients professionnels</a></li>
						<li><a href="#">Recrutement</a></li>
						<li><a href="#">Contactez-nous !</a></li>
						<li><a href="#">L'école du Thé</a></li>
					</ul>
				</div>
				<div>
				<h4>commandez en ligne</h4>
					<ul>
						<li><a href="#">Première visite</a></li>
						<li><a href="#">Aide - FAQ</a></li>
						<li><a href="#">Service client</a></li>
						<li><a href="#">Suivre ma commande</a></li>
						<li><a href="#">Conditions générales de vente</a></li>
						<li><a href="#">Informations légales</a></li>
					</ul>
				</div>
				<div>
				<h4>suivez-nous !</h4>
					<ul>
						
						<li><a href="#">Notre Histoire</a></li>
						<li><a href="#">Nos boutiques</a></li>
						<li><a href="#">Le Thé de A à Z</a></li>
						<li><a href="#">Espace clients professionnels</a></li>
					</ul>
				</div>
			</div>

			<div id="licence">
		    <a rel="license" href="https://3wa.fr/propriete-materiel-pedagogique/"><img alt="Propriété de la 3W Academy" style="border-width:0" src="https://3wa.fr/wp-content/themes/3wa2015/img/logos/big.png" /></a><br /><span>Cet exercice</span> de <a href="https://3wa.fr">3W Academy</a> est mis à disposition <a rel="license" href="https://3wa.fr/propriete-materiel-pedagogique/">pour l'usage personnel des étudiants, Pas de Rediffusion - Attribution - Pas d'Utilisation Commerciale - Pas de Modification - International</a>.<br />Les autorisations au-delà du champ de cette licence peuvent être obtenues auprès de <a href="mailto:contact@3wa.fr" rel="cc:morePermissions">contact@3wa.fr</a>. Les maquettes ont été réalisées par <a href="http://www.justine-muller.fr">Justine Muller</a>.
		</div>
		</footer>

	</body>
</html>
              
            
!

CSS

              
                /* 1. GLOBAL */
/* 2. MAIN PAGE INDEX */
/* 3. MAIN PAGE TEAS */
/* 4. MAIN PAGE PRODUCT */
/* 5. MAIN PAGE ABOUT */
/* 6. FOOTER */
/* 7. RESPONSIVE */



/* 1. GLOBAL */

* {
	box-sizing: border-box;
	outline: none;
}

/* html {
	font-size: 62.5%;
} */

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	background-color: #f2f2f2;
	color: #666;
	font-size: 1em;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
}


/* HN */

h1 {
	font-family: 'Amaranth', sans-serif;
	font-size: 2.30em;
	font-weight: lighter;
    text-align: center;
    color: #96B011;
}

h2 {
	font-family: 'Amaranth', sans-serif;
	font-weight: normal;
	font-size: 1.50em;
	color: #96B011;
	/* text-align: center; */
}

/* Trait d'encadrement des h2 */
h2:after {
	content: "";
	display: block;
	border-top: 0.05em solid;
	border-color: rgba(176,144,103,.3);
	margin-top: -0.40em;
}

h2 span {
	background-color: white;
	padding: 0 1em 0 1em;
}

h3 {
	font-family: 'Amaranth', sans-serif;
	font-size: 1.20em;
	font-weight: lighter;
	color: #5c5e73;
}

h4 {
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 0.90em;
	text-align: center;
}


/* HEADER */

header {
	background: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: #96b011;
	color: #fff;
}

#deliver {
	background-color: rgba(0,0,0,.1);
	padding: 0.4em;
	color: #fff;
	text-align: center;
}

#top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1em 21% 1.50em 20%;
}

#cart {
	color: #fff;
}

#amountcart {
	font-weight: bold;
}

.fa-shopping-cart {
	color: #d5e09b;
	border: 0.05em solid #d5e09b;
    border-radius: 50%;
    padding: 0.50em 0.50em 0.50em;
    margin-right: 0.50em;
	margin-left: 0.50em;
}

/* Placement ruban Meilleur thé */
.ribbon {
	max-width: 8%;
	float: right;
	position: absolute;
	right: 0;
	top: 0;
		/* IE */
		position: relative !important;
		right: -0.50em;
}


/* MENU HAUT */
.nav ul {
    margin: 0em;
    padding: 0 0 2em;
    list-style:none;
    display: flex;
    flex-direction : row;
    justify-content: space-between;
}

.nav a {
    padding: 1em;
    display: block;
    text-align:center;
    text-decoration: none;
    color: #fff;
    text-transform:  uppercase;
}

.nav a:hover {
    background-color: rgba(255,255,255,.2);
}   




/* 2. MAIN PAGE INDEX */

/* Offres */
#christmas {
	text-align: center;
}

#img_christmas {
	width: 100%;
}


/* Slider */
#slider {
	padding-top: 1em;
}

/* Section : Choix de la catégorie de thé */
#category {
	background-color: #fff;
	display: block;
	padding: 2.10em 2em;
	margin-bottom: 1em;
	margin-top: 2em;
	text-align: center;
}

#teas {
	display: flex;
	text-align: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

/* Effet hover sur les catégories de thés */
#teas:hover a {
	opacity:  0.30; 
	transition: all .8s ease 0s;
}

#teas a:hover {
	opacity: 1;
}


/* Section : Focus sur 3 types de thés */
#focus {
	background-color: #fff;
	display: flex;
	flex-direction: row;
	margin: 2em 0 1em 0;
	padding: 1em 2em 2em;
	text-align: center;
}

.star {
	margin: 0 0.50em;

}

#focus a:hover {
	background-color: rgba(176,144,103,.6);
	transition: all .10s ease 0s;
}

.description {
	padding: 0 1em;
}

.homeprice {
	padding-bottom: 1em;
	font-size: 1.50em;
}

/* Bouton "Voir ce produit" */
.cta {
	background-color: #b09067;
    padding: 0.80em;
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.05em;
}





/* 3. MAIN PAGE THES */

#allteas {
	background-color: #fff;
	display: block;
	padding: 2.10em 2em;
	margin-bottom: 1em;
	margin-top: 2em;
}

#allteas img  {
	float: left;
	max-width: 100%;
}




/* 4. MAIN PAGE PRODUCT */
/* 5. MAIN PAGE ABOUT */




/* 6. FOOTER */

footer {
	background: url(../img/bg.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #96b011;
	margin-top: 3em;
	color: #fff;
}

/* Bandeau avec avec services proposés */
#nav2 {
	display: flex;
	justify-content: space-around;
    background-color: rgba(135,158,15,.90);
    font-size: 0.90em;
    color: #d5e09b;
    text-transform:  uppercase;
    line-height: 3em;
    padding: 1.5em 0 1.5em 0;
}

#nav2 .fa {
	display: block;
	text-align: center;
	font-size: 1.5em;
	color: #d5e09b;
}

#nav2 a {
	color: #d5e09b;
}

/* Effet hover sur les services */
#nav2 a:hover {
	color: #fff;
}

#nav2 a:hover .fa {
	color: #fff;
}

/* Menu toutes les rubriques */
#nav3 {
	/* background-color: blue; */
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	font-size: 0.90em;
	margin-bottom: 2em;
}

#nav3 a {
	color: #d5e09b;
	line-height: 2em;
}

#nav3 ul {
	list-style-type: none;
	text-align: center;
	margin-left: -2.70em;
}


/* Effet hover sur rubriques nav3 */
#nav3 a:hover {
	color: #fff;
	transition: all .5s ease 0s;
}

/* Message droits 3WA */
#licence {
	background-color: rgba(0,0,0,.1);
	text-align: center;
	padding: 1.5em 0 1.5em 0;
	font-size: 0.80em;
	color: #fff;	
}

#licence a {
	color: #fff;
}

#licence img {
	width: 5em;
}


/* 7. RESPONSIVE */

/*tablette*/
@media screen and (max-width: 780px) {

	/*GLOBAL */
	body {
		font-size: 1em;
	}

	.container {
		max-width: 100%;
		margin: 0 auto;
	}

	/* HN */

	h2 span {
		padding: 0 1em 0 1em;
	}
	
	/* HEADER */
	/* Masquage ruban Meilleur thé */
	.ribbon {
		display: none;
	}

	header img {
		max-width: 75%;
		margin: 0 1em 0 1em;
	}

	#top {
		margin: 1em 1em 1.50em 1em;
	}
	
	/* MENU HAUT */
	.nav a {
    	padding: 0.70em;
    	margin: 0 1.20em 0;
	}
	
	/* MAIN PAGE INDEX */
	/* Section : Choix de la catégorie de thé */
	#teas {
		margin: 0 2em 0;
	}

	#teas img {
		padding: 0 3em 0;
	}
	
	/* Section : Focus sur 3 types de thés */
	#focus {
		flex-direction: column;

	}

	.star {
		
		margin: 1.5em 0.50em 0 0.50em;
		/* border: solid black 1px; */
	}


	/* 3. MAIN PAGE THES */
	#allteas img:first-child {
		display: none;
	}
	
	#allteas > p {
		margin: 0 1em 0;
	}
	

	/* FOOTER */
	#nav2, #nav3 {
		font-size: 0.85em;
	}

	#nav2 i.fa {
		font-size: 2em;
	}

	#licence img {
	width: 3em;
	}

	#licence {
    font-size: 0.80em;
    padding: 1.5em 1em;
	}

}


/*mobile*/
@media screen and (max-width: 540px) {
	
	/* HEADER */
	/* Masquage ruban Meilleur thé */
	.ribbon {
		display: none;
	}

	#top {
    flex-direction: column-reverse;
	}

	#deliver {
		font-size: 1.10em;
	}

	#cart span:first-child {
		display: none;
	}
	
	#logo {
		margin-top: 5em;
	}

	#cart {
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 4em;
		background-color: #96B011;
		box-shadow: 1px 0px 5px 0px rgb(0,0,0,.2);
		border: 0.20em;
		border-radius: 0.10em 2em 2em 0.10em;
		padding: 0.50em 1em 0.50em 0.50em;
	}

	/* Menu haut */
	.nav ul {
	flex-flow: column wrap;
	}

	.nav a {
		font-size: 1.50em;
		margin: 0 1.50em 0;
	}

	#christmas, #slider {
		display: none;
	}

	/* MAIN PAGE INDEX */
	/* Section : Choix de la catégorie de thé */
	#teas img {
		padding: 0 1em 0;
	}


	/* FOOTER */
	#nav2, #nav3 {
		display: flex;
		text-align: center;
	}

	#nav2 {
		line-height: 2.50em;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 2.5em 7.5em 1.50em 7.5em;
	}

	#nav3 {
		flex-direction: column;
	}
	
	#licence {
	    font-size: 0.80em;
	    padding: 1.5em 3em;
	}

	#licence img {
    	width: 4em;
	}
}


              
            
!

JS

              
                'use strict';   // Mode strict du JavaScript

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
              
            
!
999px

Console