Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Accueil | Universite de Toulouse</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<header>
		<div class="top-header">
			<div class="right">
				<h6>fr</h6>
				<h6>|</h6>
				<h6>en</h6>
			</div>
		</div>
		<div class="navigation-main">
			<div class="logo">
				<img src="img/logo.svg">
			</div>
			<nav>
				<ul>
					<li>
						<div class="main-li">
							<p>L'universite</p>
						</div>
						<div class="under-li">
							<div class="title">
								<h2>L'universite</h2>
							</div>
							<div class="container-under">
								<div class="link">
									<ul>
										<li>Les etablissements et organismes</li>
										<li>L'observatoire UFTMP</li>
										<li>L'universite recrute</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Les partenaires de l'universite</li>
										<li>L'interdisciplinarite</li>
										<li>Actualite et evenements</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>L'organisation</li>
										<li>Les fonds de dotations</li>
										<li>[Espace presse]</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Les instances de gouvernances</li>
										<li>Evaluation HCERES 2019</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="main-li">
							<p>Des campus attractifs</p>
						</div>
						<div class="under-li">
							<div class="title">
								<h2>Des campus attractifs</h2>
							</div>
							<div class="container-under">
								<div class="link">
									<ul>
										<li>Le reseau des sites</li>
										<li>L'accueil et la vie etudiante</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>L'operation Toulouse Campus</li>
										<li>La culture</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Les actions de developpement durables</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Le reseau des bibliotheques</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="main-li">
							<p>Des formations pour tous</p>
						</div>
						<div class="under-li">
							<div class="title">
								<h2>Des formations pour tous</h2>
							</div>
							<div class="container-under">
								<div class="link">
									<ul>
										<li>Trouver une formation</li>
										<li>Se former en langues</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Se former a l'entrepreunariat</li>
										<li>Les parcours de reussite</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Se former en ingenerie avec Toulouse Tech</li>
										<li>IDEFI DEFI diversites</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Se former tout au long de sa vie</li>
										<li>Soutenir la transformation technologique</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="main-li">
							<p>Une recherche dynamique</p>
						</div>
						<div class="under-li">
							<div class="title">
								<h2>Une recherche dynamique</h2>
							</div>
							<div class="container-under">
								<div class="link">
									<ul>
										<li>La strategie scientifique partagee</li>
										<li>Le doctorat</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Les grands programmes de recherche</li>
										<li>Diffusion de la culture des sciences et techniques</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Institut interdisciplinaire d'intelligence artificielle</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Ethique et integrite scientifique</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="main-li">
							<p>Innover et entreprendre</p>
						</div>
						<div class="under-li">
							<div class="title">
								<h2>Innover et entreprendre</h2>
							</div>
							<div class="container-under">
								<div class="link">
									<ul>
										<li>La valorisation de la recherche</li>
										<li>Devenez partenaire</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>L'ecosysteme de l'innovation</li>
										<li>La taxe d'apprentissage</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Les actions de valorisations et transfert</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>L'entrepreunariat etudiant</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="main-li">
							<p>L'ouverture sur le monde</p>
						</div>
						<div class="under-li">
							<div class="title">
								<h2>L'ouverture sur le monde</h2>
							</div>
							<div class="container-under">
								<div class="link">
									<ul>
										<li>Les etablissements et organismes</li>
										<li>L'observatoire UFTMP</li>
										<li>L'universite recrute</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Les partenaires de l'universite</li>
										<li>L'interdisciplinarite</li>
										<li>Actualite et evenements</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>L'organisation</li>
										<li>Les fonds de dotations</li>
										<li>[Espace presse]</li>
									</ul>
								</div>
								<div class="link">
									<ul>
										<li>Les instances de gouvernances</li>
										<li>Evaluation HCERES 2019</li>
									</ul>
								</div>
							</div>
						</div>
					</li>

				</ul>
			</nav>
		</div>
	</header>
	<div class="video">
		<div class="video-container">
			<iframe id="YTPlayer-ID-1582808519699" class="ytplayer-player" style="width: 1680px; height: 945px; left: 0px; top: -136px;" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/ZhwdpdbYBv4?iv_load_policy=3&amp;modestbranding=1&amp;autoplay=1&amp;controls=0&amp;showinfo=0&amp;wmode=opaque&amp;branding=0&amp;autohide=0&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.univ-toulouse.fr&amp;widgetid=1" width="1680" height="945" frameborder="0"></iframe>
		</div>
		<div class="container-top">
			<div class="button">
				<div class="a-button">
					<img src="img/pp.png">
				</div>
				<div class="a-button">
					<img src="img/down-button.png">
				</div>
			</div>
			<div class="search">
				<div class="search-input">
					<img src="img/search.svg">
					<input type="text" name="search" placeholder="je cherche un document, un evenement, ...">
				</div>
				<p>Ex. Formations, Campus, Entreprise, ...</p>
			</div>
		</div>
	</div>
	<section class="main">
		<div class="chiffres-clefs">
			<div class="un-chiffre">
				<img src="img/library.png">
				<h3>31</h3>
				<p>Établissements membres : 23 établissements d'enseignement supérieur, 1 CHU, 7 organismes de recherche</p>
			</div>
			<div class="un-chiffre">
				<img src="img/atom.png">
				<h3>143</h3>
				<p>Laboratoires pour une recherche transdisciplinaire</p>
			</div>
			<div class="un-chiffre">
				<img src="img/university.png">
				<h3>17 000</h3>
				<p>Personnels : enseignants, chercheurs, administratifs</p>
			</div>
			<div class="un-chiffre">
				<img src="img/diploma.png">
				<h3>100 000</h3>
				<p>Étudiants : 32 000 diplômes délivrés chaque année</p>
			</div>
		</div>
		<div class="cards">
			<div class="a-card" style="background:url(img/profil-1.jpg);background-size: cover;background-position: center;">
				<h3>je suis etudiant·e, <br/> futur·e etudiant·e</h3>
			</div>
			<div class="a-card" style="background:url(img/profil-2.jpg);background-size: cover;background-position: center;">
				<h3>je suis doctorant·e</h3>
			</div>
			<div class="a-card" style="background:url(img/profil-3.jpg);background-size: cover;background-position: center;">
				<h3>je suis enseignant·e <br/> chercheur·e</h3>
			</div>
			<div class="a-card" style="background:url(img/profil-4.jpg);background-size: cover;background-position: center;">
				<h3>je suis partenaire</h3>
				<p>(entreprise, institution)</p>
			</div>
		</div>
	</section>
	<div class="two-sides">
		<div class="container">
			<div class="left-container">
				<div class="title">
					<h2>Evenements</h2>
				</div>
			</div>
			<div class="right-container">
				<div class="title">
					<h2>Actualites</h2>
				</div>
			</div>
		</div>
	</div>
</body>
</html>


 /*Fichier CSS genere par SASS*/

$blue : #1A2131;
$font: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
$width: 1100px;
$red: #D72525;

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
::placeholder {
   color: #fff;
}
header{
	font-family: $font;
	box-shadow: 0px 20px 30px rgba(0, 0, 0, .2);
	.top-header{
		background: $blue;
		padding: 3px;
		color: #fff;

		.right{
			width: $width;
			margin: 0 auto;
			display: flex;
			justify-content: flex-end;

			h6{
				padding: 3px;
				font-size: 9pt;
				font-weight: 400;
			}
		}
	}
	.navigation-main{
		width: $width;
		display: flex;
		align-items: center;
		margin: 0 auto;
		justify-content: space-between;

		.logo{
			padding: 15px;

			img{
				width: 100px;
			}
		}
		nav{
			flex-basis: 75%;
			position: relative;

			> ul{
				display: flex;
			}
			li{
				list-style: none;
			}
			> ul > li{
				flex-basis: 16%;
				/*position: relative;*/
			}
			> ul > li > .main-li{
				font-size: 14px;
				color: $blue;
				font-weight: bolder;
				display: flex;
				width: 100%;
				height: 90px;
				justify-content: center;
				text-align: center;
				align-items: center;
				cursor: pointer;
				transition: all .3s;
			}
			> ul > li > .main-li:hover{
				background: $blue;
				color: #fff;
				padding-top: 10px;
			}
			> ul > li .under-li{
				position: absolute;
				left: 0;
				top: 100%;
				z-index: 1000;
				min-width: 160px;
				width: 100%;
				padding: 5px 0;
				list-style: none;
				font-size: 14px;
				text-align: left;
				background-color: #fff;
				border-radius: 0 0 4px 4px;
				box-shadow: 10px 10px 12px rgba(0,0,0, .15);
				padding: 20px;
				display: none;

				.title{
					padding-bottom: 20px;
					border-bottom: 1px solid rgba(0,0,0,.1);

					h2{
						color: $blue;
						font-size: 26px;
						font-weight: 600;
					}
				}
				.container-under{
					display: flex;
					align-items: flex-start;
					margin-top: 15px;

					.link{
						flex-basis: 25%;

						ul li {
							width: 90%;
							color: $red;
							font-weight: 600;
							box-shadow: none;
							padding: 10px 0;
							font-size: 16px;
							cursor: pointer;
						}
					}
				}
			}
			> ul > li:hover > .under-li{
				display: block;
			}
		}
	}
}
.video{
	position: relative;
	overflow: hidden;
	height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;

	.video-container{
		position: absolute;
		top: -50px;
		z-index: -1;
	}
	.container-top{
		position: relative;

		.search{
			width: 700px;
			background: rgba(0,0,0,.8);
			border-radius: 4px;
			padding: 20px;

			.search-input{
				display: flex;
				padding: 15px 0;
				border-bottom: 2px solid #fff;

				img{
					width: 30px;
				}
				input{
					flex-basis: 90%;
					background: transparent;
					font-size: 20px;
					margin-left: 15px;
					border: none;
					font-weight: 600;
					color: #fff;
				}
			}

			p{
				margin-top: 30px;
				color: #fff;
				font-family: $font;
				font-size: 13px;
			}
		}
		.button{
			position: absolute;
			left: -200px;
			bottom: -150px;

			.a-button{
				background: #fff;
				border-radius: 100%;
				box-shadow: 0 0 20px rgba(0,0,0,.2);
				padding: 20px;
				margin: 10px 0;
				width: 60px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transition: all .3s;

				img{
					width: 100%;
				}
			}
			.a-button:hover{
				box-shadow: 0 0 20px rgba(0,0,0,.5);
			}
		}
	}
}
.video:after{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 0px 80px 100vw;
	border-color: transparent transparent #fff transparent;
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
}
section.main{
	width: $width;
	margin: 70px auto;

	.chiffres-clefs{
		display: flex;
		justify-content: space-between;

		.un-chiffre{
			flex-basis: 20%;
			text-align: center;

			img{
				width: 85px;
				opacity: .5;
			}
			h3{
				margin-top: 25px;
				font-size: 40px;
				color: $red;
				font-family: $font;
			}
			p{
				margin-top: 10px;
				font-family: $font;
				line-height: 1.4em;
				font-size: 18px;
				font-weight: 600;
			}
		}
	}
	.cards{
		margin-top: 100px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.a-card{
			padding: 20px;
			flex-basis: 46%;
			text-align: center;
			height: 150px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-radius: 5px;
			box-shadow: 0 0 15px rgba(0,0,0,.2);
			margin: 15px 0;
			background-position: center center;
			transform: scale(1);
			transition: all .3s;

			h3{
				font-family: $font;
				text-transform: uppercase;
				color: #fff;
				font-size: 20px;
				font-weight: 300;
			}
			p{
				margin-top: 5px;
				color: #fff;
				font-weight: 300;
				font-size: 12px;
				font-family: $font;
			}
		}
		.a-card:hover{
			transform: scale(1.05);
			box-shadow: 0 10px 10px rgba(0,0,0,.3);
			z-index: 999;
		}
	}
}
.two-sides{
	margin-top: 50px;
	background: $blue;
	padding: 40px;

	.container{
		width: $width;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin: 20px auto;

		.left-container, .right-container{
			flex-basis: 50%;
			color: #fff;
			padding-top: 10px;
		}
		.left-container{
			border-right: 1px solid rgba(255,255,255,.8);
		}
		.right-container{
			padding-left: 50px;
		}
	}
}