Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Edwin Elliot Shaws</title>
	<link rel="shortcut icon" href="ICOURL" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">

<style>


::selection{background:#ccc;}
::-moz-selection{background:#ccc;}

body{margin:0;padding:0;background:#333 url(https://image.noelshack.com/fichiers/2019/42/3/1571254711-c10e403201b4d9a367dca782ff7344ae.jpg)center fixed;background-size:cover;font-family:Open Sans,helvetica,arial,sans-serif;font-size:13px;color:#fff;text-align:center;}

a{color:#fff;text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{opacity:0.5;}

h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-weight:normal;margin:0;}


/* NAVIGATION */

nav{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;text-align:right;font-size:11px;letter-spacing:1px;padding:10px 25px 0 25px;}
nav a{display:inline-block;margin-left:15px;}


/* HEADER */

header{height:35vh;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
#header-inner h1{font-size:35px;letter-spacing:2px;}
#header-inner h2{font-size:11px;letter-spacing:5px;}


/* WHOLE CONTAINER */

#container{padding:4vw;background:rgba(0,0,0,0.5);}

#container-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 auto;}
#container-inner h2{width:100%;text-align:center;letter-spacing:2px;}

.card{width:280px;height:350px;margin:2vw;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}

.card-inner{padding:3vw;position:relative;z-index:200;}
.bg-mask{position:absolute;left:0;right:0;top:0;bottom:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}

.card h3{font-size:22px;}
.card h4{font-size:11px;letter-spacing:2px;}
.card h3:after{content:'';display:block;height:2px;background:rgba(255,255,255,0.4);width:5%;margin:5px auto;-webkit-transition:all 0.7s ease-in-out;-moz-transition:all 0.7s ease-in-out;-ms-transition:all 0.7s ease-in-out;-o-transition:all 0.7s ease-in-out;transition:all 0.7s ease-in-out;transition-delay:1s;}

.card-info{font-style:italic;padding-top:700px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}

.j-link{width:50%;margin:20px auto 0 auto;display:block;background:rgba(0,0,0,0.3);padding:3px;text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-size:10px;letter-spacing:2px;font-style:normal;}

.card:hover{background-size:150% auto!important;}
.card:hover .bg-mask{background:rgba(0,0,0,0.5);}
.card:hover .card-info{padding-top:20px;}
.card:hover h3:after{width:40%;}


/* FOOTER */

footer{padding:5vw;font-size:9px;text-transform:uppercase;letter-spacing:2px;font-family:Oswald,arial black,sans-serif;text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
footer a{opacity:0.7;}

</style>


</head>

<body>


<header>
	<div id="header-inner">
		<h1>Benedict Edwin Shaws</h1>
		<h2>Sang-mêlé</h2>
	</div>
</header>


<article id="container">
<div id="container-inner">


	<section class="card" style="background:url(CHARPIC)center;background-size:100% auto;">
		<div class="card-inner">
			<div class="titles">
				<h3>Famille</h3>

			</div>
			<div class="card-info">
				Benedict E. Shaws est le fils de Ambre Isabella Halvorsen et d'Edwin Elliot Shaws, tout deux
                anciens élèves à Poudlard où ils se sont rencontrés.
                <br />
                <br />
                - Edwin Elliot Shaws est née d'une Mère Sorcière et d'un Père Moldu, ils habitent à Bognor
                en Grande-Bretagne dans un village moldu.
                <br />
                <br />
                - Ambre Isabella Halvorsen est née d'un Père et d'une Mère Sorcier(e) habitant en Ecosse dans
                le Manoir familliale, sur une bute isolé.

			</div>
		</div>
	<div class="bg-mask"></div></section>

    <section class="card" style="background:url(CHARPIC)center;background-size:100% auto" >
		<div class="card-inner">
			<div class="titles">

				<h3>Physique</h3>

			</div>
			<div class="card-info">


				Benedict est un jeune homme de taille moyenne, avec des pieds plus petits que la moyenne. Il a une stature droite et de longues mains effilé. Il a tout comme son père un long nez aquilin et de hautes pommettes, ses lèvres sont peu charnu, et son menton peu élancé. Il a d'oblique yeux vairons dont l'un est vert émeraude et l'autre d'un gris de roche. Sa chevelure est du noir de jaie caractéristique des Shaws, et de longue boucles l'en affuble la toison. Il porte comme sa mère de légère taches de rousseur et l'en a hérité les petite oreilles fort discrète.
			</div>
		</div>
	<div class="bg-mask"></div></section>


</div>
</article>