Moja druga strona. Flexbox. RWD.

Stronka jeszcze bez formularza. Wszystko z wykorzystaniem flexboxa.

<!DOCTYPE html>
<html lang="pl-PL">
	<head>
		<meta charset="UTF-8">
		<title>Lorem ipsum dolor sit amet,</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Lorem ipsum dolor sit amet,">
		<meta name="keywords" content="lorem, ipsum, dolor">
		<meta name="author" content="Sandy Boy">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="wrapper">
		
			<nav class="sec nav">
				<div class="logo"><img src="#" alt="logo"></div>
				<ul class="sec nav1">
					<li><a href="#0" alt="">0</a></li>
					<li><a href="#1" alt="">1</a></li>
					<li><a href="#2" alt="">2</a></li>
					<li><a href="#3" alt="">3</a></li>
					<li><a href="#4" alt="">4</a></li>
					<li><a href="#5" alt="">5</a></li>
				</ul>
			</nav>
			
			<main>
				<header>
					<div class="sec zero" id="0">
						<span><h1>Lorem ipsum dolor sit amet.</h1></span>
						<div><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra.
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra.
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra.
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>

					</div>
				</header>
				
				<section>
					<div class="sec one" id="1">
						<div class="xs"><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h1>Lorem ipsum dolor sit amet,</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Sed semper erat vel arcu blandit pharetra. Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec two" id="2">
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div class="xs"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec three" id="3">
						<span><h1>Lorem ipsum dolor sit amet,</h1></span>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec four" id="4">
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec five" id="5">
					<!-- Tu trzeba zrobić formularz kontaktowy -->
					</div>
				</section>
				
				<footer>
					<div class="sec six" id="foot">
						<div>
						<h1>Kontakt:</h1>
						<span>Sandy Boy</span>
						<span>telefon: XXX XXX XXX</span>
						<span>e-mail: xxx@xxx.xx</span>
						</div>
						
						<div>
						<h1>Adres:</h1>
						<span>XX-XXX Miasto</span>
						<span>ul. Nazwa ulicy i numer domu</span>
						<span>Polska</span>
						</div>
					</div>
				</footer>
			
			</main>
	
		
		</div>
	</body>

* {
	margin:0;
	padding:0;
	background-color: #ddd;
}

.sec {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
}

.sec img {
	max-width: 100%;
}

.sec h1 {
	font-size: 3vw;
}
.sec h2 {
	font-size: 2.5vw;
}
.sec p {
	font-size: 2vw;
}
.sec span {
	font-size: 1.5vw;
}

.nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	justify-content: space-between;
	padding: 2vw;
}

.nav, .nav * {
	background-color: #333;
}

.nav1 {
	list-style-type: none;
}

.nav1 li a{
	text-decoration: none;
	color: #ddd;
	padding: 2vw;
}

.nav1 li a:hover{
	background-color: #111;
}

.sec span {
	min-width: 100%;
	text-align: center;
	margin-bottom: 30px;
}

.sec div p {
	text-indent: 20px;
	text-align: justify;
}

.zero, .one, .two, .three, .four, .five {
	padding: 60px 0;
}

.zero *, .zero, .two *, .two, .four *, .four {
	background-color: white;
	
}

.zero div {
	max-width: 20%;
}

.one *, .one {
	background-color: forestgreen;
	
}

.one div {
	max-width: 35%;
}

.one .xs {
	max-width: 20%
}

.two {
	align-items: center;
}

.two div {
	max-width: 30%;
}
.two .xs {
	max-width: 10%;
}

.three *, .three {
	background-color: mediumseagreen;
	
}

.three div {
	max-width: 30%;
	margin-bottom: 15px;
}

.four div {
	max-width: 15%;
}

.five *, .five {
	background-color: lightgreen;
	
}
/* Zrobić ładny formularz kontaktowy */

.six *, .six {
	background-color: #111;
	color: white;
	
}

.six div {
	max-width: 40%;
	text-align: center;
}

.six div *{
	display: block;
	margin: 0;
	padding: 3px 0;
}
/* Na tablety */
@media screen and (max-width: 768px){

.sec h1 {
	font-size: 3.5vw;
}
.sec h2 {
	font-size: 3vw;
}
.sec p {
	font-size: 2.5vw;
}
.sec span {
	font-size: 2vw;
}

.two div {
	max-width: 20%;
}
.two .xs {
	max-width: 30%;
}
.four div {
	max-width: 30%;
}
}
/* Na telefony */
@media screen and (max-width: 480px) {

.sec h1 {
	font-size: 4vw;
}
.sec h2 {
	font-size: 3.5vw;
}
.sec p {
	font-size: 3vw;
}
.sec span {
	font-size: 2.5vw;
}

.zero div {
	max-width: 60%;
	margin: 10px 0;
}

.one div {
	max-width: 75%;
	margin: 10px 0;
}

.one .xs {
	max-width: 50%;
	margin: 10px 0;
}

.two div {
	max-width: 75%;
	margin: 10px 0;
}
.two .xs {
	max-width: 30%;
}

.three div {
	max-width: 45%;
	margin-bottom: 15px;
}

.four div {
	max-width: 30%;
	margin: 10px 0;
}
	
}