Session 2018

Dernière mise à jour le 27 mars 2019 par LMD

Créer un site One Page en scroll

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>One Page Scroll</title>
		<link rel="stylesheet" href="">
		<style>
			body{
				margin: 0;
				font-family: Helvetica, sans-serif;
			}
			h2{
				margin: 0;
			}
			#en-tete{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				width: 100%;
				background-color: darkorange;
				padding:10px;
				box-shadow: 10px 0 10px grey;
				z-index: 99;
			}
			#en-tete img{
				width: 60px;
			}
			#menu ul{
				padding: 0;
				display: flex;
			}
			#menu ul li{
				list-style-type: none;
				text-align: center;
			}
			#menu ul li a{
				text-decoration: none;
				display: block;
				width: 100px;
				color: grey;
			}
			#menu ul li a:hover{
				color: white;
			}
			.projets{
				background-color: palegoldenrod;
				height: 600px;
				padding: 110px 50px 50px 50px;
			}
			.projet{
				width: 300px;
				height: 300px;
				background-color: white;
				display: inline-block;
				margin-right: 10px;
			}
			.philo{
				background-color: #22FF55;
				padding: 50px;
			}
			.photo{
				background-color: white;
			}
			.photo img{
				width: 100%;
				vertical-align: bottom;
			}
			.equipe{
				background-color: yellowgreen;
				height: 400px;
				padding: 50px;
			}
			.formulaire{
				background-color: cadetblue;
				height: 600px;
				padding: 50px;
			}
			#pied{
				background-color: lightblue;
				padding: 50px;
			}
		</style>
	</head>

	<body>

		<div id="wrap">
			<header id="en-tete">
				<img src="img_scroll/logo.png" alt="logo">
				<nav id="menu">
					<ul>
						<li> <a href="#">Projets</a> </li>
						<li> <a href="#qui">CV</a> </li>
						<li> <a href="#contact">Contact</a> </li>
					</ul>
				</nav>
			</header>

			<main id="contenu">
				<section class="projets">
					<h4>Les projets</h4>

					<article class="projet"></article>
					<article class="projet"></article>
					<article class="projet"></article>
				</section>
				<section class="philo">
					<h4>Notre philosophie</h4>
				</section>
				<section class="photo">
					<img src="img_scroll/table.jpg" alt="">
				</section>
				<section id="qui" class="equipe">
					<h4>Qui sommes-nous?</h4>
				</section>
				<section id="contact" class="formulaire">
					<h4>Contact</h4>
				</section>
			</main>

			<footer id="pied">
				<p>Copyright</p>
			</footer>
		</div>

	</body>
</html>

[/pcsh]

Menu avec affichage d’images centrées en arrière plan de la fenêtre

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
		<style>
			#contenu{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
				height: 600px;
			}
			.titre_projet{

			}
			.titre_projet a{
				color: black;
				text-decoration: none;
			}
			.titre_projet a:hover .post_img{
				opacity: 1;
			}
			.post_img{
				/*width: 800px;
				height: 535px;*/
				position: absolute;
				opacity: 0;
				z-index: -1000;
				top: 5%;
				right: 25%;
				bottom: 25%;
				left: 25%;

				-webkit-transition: all 300ms ease-out;
				-moz-transition: all 300ms ease-out;
				-ms-transition: all 300ms ease-out;
				-o-transition: all 300ms ease-out;
				transition: all 300ms ease-out;
			}
			.pink{
				background-color: pink;
				background-image: url("img_fondCentre/rain_pink.jpg");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
			.black{
				background-color: black;
				background-image: url("img_fondCentre/rain_black.jpg");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
			.gold{
				background-color: gold;
				background-image: url("img_fondCentre/rain_gold.jpg");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<header id="en-tete"><p>ici le header</p></header>
			<main id="contenu">
				<article class="projet">
					<h2 class="titre_projet"> <a href="#">Pink —<div class="post_img pink"></div></a> </h2>
					
				</article>
				<article class="projet">
					<h2 class="titre_projet"> <a href="#">Black —<div class="post_img black"></div></a> </h2>
					
				</article>
				<article class="projet">
					<h2 class="titre_projet"> <a href="#">Gold —<div class="post_img gold"></div></a> </h2>
					
				</article>
			</main>
			<footer id="pied"><p>ici le footer</p></footer>
		</div>
	</body>
</html>

[/pcsh]

Rotation d’un élément au survol

Utiliser le site http://css3generator.com/

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Rotation animée sur hover</title>
		<link rel="stylesheet" href="">
		<style>
			#en-tete{
				height: 200px;
				border-bottom: 1px solid black;
				font-family: Helvetica, sans-serif;
				padding-left: 30px;
			}
			#contenu{
				padding: 30px;
			}
			.projet img{
				width: 300px;

				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				transform: rotate(0deg);

				-webkit-transition: all 300ms ease-out;
				-moz-transition: all 300ms ease-out;
				-ms-transition: all 300ms ease-out;
				-o-transition: all 300ms ease-out;
				transition: all 300ms ease-out;
			}
			.projet a:hover img{
				width: 320px;

				-moz-transform: rotate(30deg);
				-webkit-transform: rotate(30deg);
				-o-transform: rotate(30deg);
				-ms-transform: rotate(30deg);
				transform: rotate(30deg);
			}

		</style>
	</head>

	<body>

		<div id="wrap">
			<header id="en-tete">
				<h1>HEADER</h1>
			</header>

			<main id="contenu">
				<article class="projet">
					<a href="#">
						<img src="img_rotation/mickey.jpg" alt="">
					</a>
				</article>
			</main>

		</div>

	</body>
</html>

[/pcsh]

Affichage de contenu en accordéon (avec JS)

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>test_accordion_css</title>
		<link rel="stylesheet" href="accordion.css">
	</head>

	<body>
		<div id="wrap">
			<div class="menu_button">
				<a href="#">
					<img class="menuButton_img_titre" src="img_accordion/news_2x.png" width="450" height="35" border="0">
				</a>
					<div class="firstLevel">
						<p>Ut est proident pariatur quis cupidatat dolore adipisicing sed duis culpa adipisicing dolor sunt anim sed duis aliqua adipisicing pariatur ex. Lorem ipsum qui proident veniam voluptate et reprehenderit adipisicing nulla amet ad officia dolore commodo fugiat ad sint dolor pariatur incididunt ut tempor nisi officia aliquip in aliqua pariatur magna in enim sed amet anim mollit pariatur pariatur sunt sed eu consequat nostrud tempor id exercitation commodo fugiat veniam nisi voluptate consequat cillum ea aute deserunt reprehenderit ullamco velit sit culpa minim ullamco dolore dolor labore consectetur nulla adipisicing sed tempor cupidatat ullamco voluptate eu elit dolor amet officia cupidatat amet nostrud elit ad sunt id aute ullamco commodo anim magna cillum exercitation sint incididunt minim labore qui adipisicing commodo sed in culpa excepteur tempor enim nulla aute cupidatat adipisicing magna ea qui aute laboris reprehenderit reprehenderit est tempor dolor esse nostrud exercitation quis est ullamco fugiat exercitation nisi ut veniam id amet quis tempor ut esse in aliquip eu adipisicing nisi</p>
					</div>
			</div>
		</div>

		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			var etat = false;
			$(document).ready(function(){
					
				$('.menu_button')
					.click(function(){
						if(etat == false) {
					    	$('.firstLevel').css('display','block');
					    	etat = true;
					   
						} else {
						    $('.firstLevel').css('display','none');
						    etat = false;
						}
					});

			});
		</script>
	</body>
</html>

[/pcsh]

et les CSS :

[pcsh lang= »css » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

#wrap {
margin-top: 30px;
}

.menu_button {
display: block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
padding-bottom: 6px;
margin-right: 25px;
margin-left: 25px;
overflow: hidden;
padding-top: 6px;
}

.firstLevel {
display: none;
}

[/pcsh]

Un menu déroulant vertical basique

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Menu déroulant vertical</title>
		<link rel="stylesheet" href="">
		<style>
			body{
				margin: 0;
				font-family: Helvetica, sans-serif;
			}
			#wrap{
				display: flex;
				height: 100vh;
			}
			#en-tete{
				width: 200px;
				padding: 20px;
				border-right: 1px solid black;
			}
			.menu{
				padding: 0;
				margin-left: 20px;
			}
			.menu li{
				list-style-type: none;
			}
			.menu li a{
				color: black;
				text-decoration: none;
				display: block;
				padding: 3px;
				width: 150px;
			}
			.menu li a:hover{
				color: white;
				background-color: #FFAACC;
			}
			.subMenu{
				display: none;
				padding: 0;
			}
			.menu li:hover .subMenu{
				display: block;
			}
			.subMenu li{
				list-style-type: none;
				margin-left: 20px;
			}
			.subMenu li a{
				
			}
			#contenu{
				background-color: #FFAACC;
				padding: 0 20px;
				flex: 1;
			}
		</style>
	</head>

	<body>

		<div id="wrap">

			<header id="en-tete">
				<img src="img_sousMenu/logo.png" alt="">
				<nav id="topMenu">
					<ul class="menu">
						<li> <a href="#">Projets</a> 
							<ul class="subMenu">
								<li><a href="">Projet 1</a></li>
								<li><a href="">Projet 2</a></li>
								<li><a href="">Projet 3</a></li>
								<li><a href="">Projet 4</a></li>
							</ul>
						</li>

						<li> <a href="#">CV</a> </li>
						<li> <a href="#">Contact</a> </li>
					</ul>
				</nav>
			</header>

			<main id="contenu">
				<h4>Contenu</h4>
			</main>

		</div>

	</body>
</html>

[/pcsh]

Une mosaïque type Pinterest

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
		<style>
			body {
				margin: 15px;
			}
			#wrap {
				/*width: 720px;*/
			}
			#tete h1 {
				margin-bottom: 30px;
			}
			#contenu{
				width: 100%;
				column-count: 4;
			}
			article {
	            display: inline-block;
	            width: 100%;
	            text-align: center;
			}
			#contenu img {
				max-width: 100%;
			}
			#contenu h4 {
				display: none;
				margin-top: 2px;
			}
			@media only screen and (max-width:768px) {
				#contenu{
					column-count: 2;
				}
			}
		</style>
	</head>

	<body>
		<div id="wrap">

			<header id = "tete">
				<h1>Des chats</h1>
			</header>


			<main id="contenu">
				<article>
					<img src="img_cols/chat1.jpg" alt="">
					<h4>Chat 1</h4>
				</article>
				<article>
					<img src="img_cols/chat2.jpg" alt="">
					<h4>Chat 2</h4>
				</article>
				<article>
					<img src="img_cols/chat3.jpg" alt="">
					<h4>Chat 3</h4>
				</article>
				<article>
					<img src="img_cols/chat4.jpg" alt="">
					<h4>Chat 4</h4>
				</article>
				<article>
					<img src="img_cols/chat5.jpg" alt="">
					<h4>Chat 5</h4>
				</article>
				<article>
					<img src="img_cols/chat6.jpg" alt="">
					<h4>Chat 6</h4>
				</article>
				<article>
					<img src="img_cols/chat7.jpg" alt="">
					<h4>Chat 7</h4>
				</article>
				<article>
					<img src="img_cols/chat8.jpg" alt="">
					<h4>Chat 8</h4>
				</article>
				<article>
					<img src="img_cols/chat9.jpg" alt="">
					<h4>Chat 9</h4>
				</article>
				<article>
					<img src="img_cols/chat10.jpg" alt="">
					<h4>Chat 10</h4>
				</article>
				<article>
					<img src="img_cols/chat11.jpg" alt="">
					<h4>Chat 11</h4>
				</article>
				<article>
					<img src="img_cols/chat12.jpg" alt="">
					<h4>Chat 12</h4>
				</article>
				<article>
					<img src="img_cols/chat13.jpg" alt="">
					<h4>Chat 13</h4>
				</article>
				<article>
					<img src="img_cols/chat14.jpg" alt="">
					<h4>Chat 14/h4>
				</article>
				<article>
					<img src="img_cols/chat15.jpg" alt="">
					<h4>Chat 15</h4>
				</article>
				
			</main>

		</div>
	</body>
</html>

[/pcsh]

Insérer un slider (avec JS)

Voir ce lien : https://www.w3schools.com/w3css/w3css_slideshow.asp

Design collaboratif