index.html

<!DOCTYPE html>
<html lang="frFR">
	<head>
        <!-- META -->
        <meta name="Description" content="Site One page, Blueasy Freebie">
		<meta name="Keywords" content="Projet maquette blueasy freebie onepage html css">
		<meta name="Robots" content="all">
		<meta name="Revisit-After" content="30 days">
		<META HTTP-EQUIV="EXPIRES" CONTENT="Fri, 20 Mar 2017 12:00:00 GMT">
            
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta charset="UTF-8">
		<title>Blueasy</title>
        
        <!-- Favicon -->
        <link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/favicon/apple-touch-icon-57x57.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/favicon/apple-touch-icon-114x114.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/favicon/apple-touch-icon-72x72.png" />
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/favicon/apple-touch-icon-144x144.png" />
        <link rel="apple-touch-icon-precomposed" sizes="60x60" href="images/favicon/apple-touch-icon-60x60.png" />
        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/favicon/apple-touch-icon-120x120.png" />
        <link rel="apple-touch-icon-precomposed" sizes="76x76" href="images/favicon/apple-touch-icon-76x76.png" />
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="images/favicon/apple-touch-icon-152x152.png" />
        <link rel="icon" type="image/png" href="images/favicon/favicon-196x196.png" sizes="196x196" />
        <link rel="icon" type="image/png" href="images/favicon/favicon-96x96.png" sizes="96x96" />
        <link rel="icon" type="image/png" href="images/favicon/favicon-32x32.png" sizes="32x32" />
        <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png" sizes="16x16" />
        <link rel="icon" type="image/png" href="images/favicon/favicon-128.png" sizes="128x128" />
        <meta name="application-name" content="&nbsp;"/>
        <meta name="msapplication-TileColor" content="#FFFFFF" />
        <meta name="msapplication-TileImage" content="mstile-144x144.png" />
        <meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
        <meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
        <meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
        <meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

            
        <!-- Typo -->
		<link rel="stylesheet" href="css/font-awesome.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
        
        <!-- CSS -->
        <!-- <link rel="stylesheet" href="css/css-antho.css" type="text/css">
        <link rel="stylesheet" href="css/css-natalia.css" type="text/css">
        <link rel="stylesheet" href="css/css-marine.css" type="text/css">
        <link rel="stylesheet" href="css/css-claire.css" type="text/css"> -->
        <link rel="stylesheet" href="css/main.css" type="text/css">
	</head>
	
	<body>
		<header id="b-header">
			<div id="b-nav">
				<div class="content">
					<div id="logo"><p>BLU<span id="c-logo">E</span>ASY</p></div>
					<nav>
						<ul>
							<li><a href="#b-header" class="active">HOME</a></li>
							<li><a href="#services">SERVICES</a></li>
							<li><a href="#features">FEATURES</a></li>
							<li><a href="#portfolio">PORTFOLIO</a></li>
							<li><a href="#b-contact">CONTACT</a></li>
						</ul>
					</nav>
				</div>
			</div>
			<div class="title">
				<h2><mark>"I'm looking for the unexpected.</mark></h2> <h2><mark>I'm looking for things I've never seen before."</mark></h2>
			</div>
		</header>

		<section>
			<article id="services" class="b-bleu">
				<div class="content">
					<h3><span class="line-b">Ser</span>vices</h3>
					<div class="flex">
						<div>
							<i class="coffee"> </i>
							<h4>COFFEE</h4>
							<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
						</div>

						<div>
							<i class="instant"> </i>
							<h4>INSTANT</h4>
							<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
						</div>

						<div>
							<i class="serious"> </i>
							<h4>SERIOUS</h4>
							<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
						</div>

						<div>
							<i class="frame"> </i>
							<h4>FRAME</h4>
							<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
						</div>
					</div>
				</div>
			</article>

			<article id="portfolio" class="b-blanc">
				<div class="content">
					<div class="pt-barnav">
						<h3><span class="line-g">Po</span>rtfolio</h3>
						<nav> 
							<ul>
								<li><a class="active" href="">ALL</a></li>
								<li><a href="">PANORAMAS</a></li>
								<li><a href="">PORTRAITS</a></li>
								<li><a href="">MACRO</a></li>
								<li><a href="">JOURNAL</a></li>
							</ul>
						</nav>
					</div>

					<div class="flex">
						<div class="img"><img src="images/portfolio1.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
						<div class="img"><img src="images/portfolio2.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
						<div class="img"><img src="images/portfolio3.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
						<div class="img"><img src="images/portfolio4.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
						<div class="img"><img src="images/portfolio5.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
						<div class="img"><img src="images/portfolio6.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
						<div class="img"><img src="images/portfolio7.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
						<div class="img"><img src="images/portfolio8.jpg" alt="un paysage" width="400px" height="400px"><div class="cache">+</div></div>
					</div>
				</div>
			</article>

			<article id="features" class="b-gris">
				<div class="content">
					<div>
						<h3><span class="line-b">Jus</span>t default section</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

						<p><a href="" target="blank" class="bouton">VISIT ME</a></p>
					</div>
					<div>
						<iframe src="https://player.vimeo.com/video/1785993" width="560" height="314" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
					</div>
				</div>
			</article>

			<article id="twitter" class="b-bleu">
				<div class="content">
					<h3><span class="line-b">Twi</span>tter</h3>
					<div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<p><a href="https://twitter.com/Cheesecake" target="blank">@cheesecake</a></p>
				</div>
			</article>

			<article id="b-pres">
				<div class="content">
					<h3><span class="line-b">Wh</span>o is John Doe?</h3>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
                        Jujubes bear claw croissant wafer sweet lemon drops brownie chocolate bar. Sweet lollipop halvah tootsie roll cake fruitcake. Chocolate cake chocolate bar gingerbread lollipop tart. Jujubes bear claw donut chupa chups.</p>
					</div>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
						<nav>
							<ul>
								<li><a href="" class="social"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
								<li><a href="" class="social"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
								<li><a href="" class="social"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
								<li><a href="" class="social"><i class="fa fa-coffee" aria-hidden="true"></i></a></li>
							</ul>
						</nav>
					</div>
				</div>
			</article>

			<article id="testimonials" class="b-blanc">
				<div class="content">
					<h3><span class="line-g">Tes</span>timonials</h3>
					<div class="icon"><i class="fa fa-quote-right" aria-hidden="true"></i></div>
					<blockquote>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
					<p id="author">-Walter White</p>
				</div>
			</article>

			<article id="b-contact">
				<div class="content">
					<h3><span class="line-b">Co</span>ntact</h3>
					<form action="mailto:votrenom@provider.com" method="post">
							<div class="flex">
								<div>
                                    <label for="fullname">Full name</label>
                                    <input type="text" name="full name">
                                    <label for="email">Email</label>
                                    <input type="text" name="email">
                                </div>
								<div id="text-contact">
                                    <p>Jujubes bear claw croissant wafer sweet lemon drops brownie chocolate bar. Sweet lollipop halvah tootsie roll cake fruitcake. Chocolate cake chocolate bar gingerbread lollipop tart. Jujubes bear claw donut chupa chups.</p>
								    <p>Linda Newman<br/>
								    W325 State Road 123<br/>
								    Mondovi, WI(Wisconsin) 98746-54321<br/>
								    (715) 946 - 1234</p>
                                </div>
							</div>
				            <div>
                                <label>Message</label>
                                <textarea type="text" name="message"></textarea>
                                <div id="submit"><input type="submit" value="Message"/></div>
                            </div>
						</form>
				</div>
			</article>
		</section>

			<footer>
				<div class="content">
					<nav>
						<ul>
							<li><a href="#b-header">HOME</a></li>
							<li><a href="#services">SERVICES</a></li>
							<li><a href="#portfolio">PORTFOLIO</a></li>
							<li><a href="#b-contact">CONTACT</a></li>	
						</ul>
					</nav>
					<div id="copy"><p>2013 &copy;</p></div>
				</div>
			</footer>
	</body>
		
</html>