pierrealexaline/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li class="current">FindThePrecious.com</li>
                <li>Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>

        <section>
            <div class="carousel"></div>
        </section>

        <section>
            <h2 class="title">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
        </section>
        <section class="news">
            <article></article>
            <article></article>
            <article></article>
        </section>
        <form>
            <h2>Contact us</h2>
            <input type="email" placeholder="@">
            <input type="text" placeholder="&#8962;">
            <input type="text" placeholder="I have seen one of them">
            <textarea placeholder="Your message"></textarea>
        </form>
    </body>
</html>

## style.css

/* In fact we must do this way, because SEO, for google mobile first !*/
/* % used forr fonts and page and body block, elements relative to there parents
/* pixel used for exact fit*/

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size:100%;
    background:#111;
}


/* Mobile Styles */


section,
form,
nav{
    display:flex;
    align-items: center;
    justify-content: center;
    background:#fff;
    width:100%;
}
form,
nav{
    flex-direction:column;
}
nav ul{
    display:flex;
    flex-direction:row;
    background:#333;
    width:100%;
    list-style:none;
    border-bottom:1px solid #ddd;
}
nav ul li{
    color:#eee;
    padding:10px 20px;
}
nav ul li:hover{
    color:#444;
    background:#ddd;
}
.current{
    font-size:1.1em;
}
h2{
    font-size:1.6em;
    color:#444;
    padding:40px 0;
    width:80%;
    text-align:center;
}
h2 span{
    font-size:0.75em;
    color:#777;
    display:block;
}
section{
    flex-direction:column;
}
section.news{
    flex-direction:row;
    justify-content:space-around;
}
article,
.carousel{
    display:none;
}
form{
    border-bottom:40px solid #222;
    padding-bottom:60px;
    border-top:1px solid #ccc;
}
form h2{
    text-align:center;
}
input,textarea{
    width:80%;
    margin:5px 0;
    padding:8px;
    border-radius:4px;
    border:1px solid #bbb;
}


/* Desktop Styles */


@media only screen and (min-width: 961px){
    section,
    form,
    nav{
        max-width:990px;
    }
    .carousel{
        display:inline-block;
        width:100%;
        height:280px;
        background:#ddd;
    }
    article{
        display:inline-block;
        width:30%;
        height:180px;
        background:#ddd;
    }
    form h2{
        text-align:left;
    }
    h2{width:90%;}
    h2 span{display:inline-block;}
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Find the precious!</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<nav>
	<ul>
	<li class="current">FindThePrecious.com</li>
	<li>Fellows</li>
	<li>Contact us</li>
	</ul>
	</nav>

	<section>
	<div class="carousel"></div>
	</section>

	<section>
	<h2 class="title">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
	</section>
	<section class="news">
	<article></article>
	<article></article>
	<article></article>
	</section>
	<form>
	<h2>Contact us</h2>
	<input type="email" placeholder="@">
	<input type="text" placeholder="⌂">
	<input type="text" placeholder="I have seen one of them">
	<textarea placeholder="Your message"></textarea>
	</form>
	</body>
	</html>

	/* In fact we must do this way, because SEO, for google mobile first !*/
	/* % used forr fonts and page and body block, elements relative to there parents
	/* pixel used for exact fit*/

	*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	body{
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	background:#111;
	}


	/* Mobile Styles */


	section,
	form,
	nav{
	display:flex;
	align-items: center;
	justify-content: center;
	background:#fff;
	width:100%;
	}
	form,
	nav{
	flex-direction:column;
	}
	nav ul{
	display:flex;
	flex-direction:row;
	background:#333;
	width:100%;
	list-style:none;
	border-bottom:1px solid #ddd;
	}
	nav ul li{
	color:#eee;
	padding:10px 20px;
	}
	nav ul li:hover{
	color:#444;
	background:#ddd;
	}
	.current{
	font-size:1.1em;
	}
	h2{
	font-size:1.6em;
	color:#444;
	padding:40px 0;
	width:80%;
	text-align:center;
	}
	h2 span{
	font-size:0.75em;
	color:#777;
	display:block;
	}
	section{
	flex-direction:column;
	}
	section.news{
	flex-direction:row;
	justify-content:space-around;
	}
	article,
	.carousel{
	display:none;
	}
	form{
	border-bottom:40px solid #222;
	padding-bottom:60px;
	border-top:1px solid #ccc;
	}
	form h2{
	text-align:center;
	}
	input,textarea{
	width:80%;
	margin:5px 0;
	padding:8px;
	border-radius:4px;
	border:1px solid #bbb;
	}


	/* Desktop Styles */


	@media only screen and (min-width: 961px){
	section,
	form,
	nav{
	max-width:990px;
	}
	.carousel{
	display:inline-block;
	width:100%;
	height:280px;
	background:#ddd;
	}
	article{
	display:inline-block;
	width:30%;
	height:180px;
	background:#ddd;
	}
	form h2{
	text-align:left;
	}
	h2{width:90%;}
	h2 span{display:inline-block;}
	}