Tak może wyglądać przykład:
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
background-color: grey;
}
.container {
width: 780px;
margin: auto;
text-align: justify;
position: relative;
}
.menu {
text-align: center;
}
.menu > li{
display: inline;
color: white;
border: 1px solid white;
background-color: rgba(255, 255, 255, 0.4);
}
.menu > li:hover{
background-color: blue;
}
.one {
background-image: url('https://cdn.pixabay.com/photo/2012/12/16/20/59/africa-70229_960_720.jpg');
background-size: cover;
height: 500px;
}
.one > h1 {
text-align: right;
color: grey;
text-shadow: 5px 5px 4px black;
margin-top: 220px;
margin-right: 100px;
}
.two {
background-color: lightgrey;
height: 240px;
position: relative;
top: -130px;
transform: skewY(10deg);
}
.three {
position: relative;
background-color: lightgrey;
height: 300px;
position: relative;
top: -300px;
padding: 10px;
}
.three > img {
position: relative;
float: right;
top: -180px;
}
h1 {
font-size: 100px;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 2</li>
</ul>
<h1>Witamy</h1>
</div>
<div class="two"></div>
<div class="three">
<img src="./kwiatek.png" />
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>
<p class="bold">Obrazki pochodzą ze <a href="https://pixabay.com/pl/afryka-krajobraz-pustynia-sceneria-70229/">strony</a>: </p>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
P. S. Wiem że nie jest responsywna, ale można to uzyskać odpowiednio ustawiając Media Queries i że można to jeszcze poprawić ale nie chciałem pisać gotowca zależało mi na pokazaniu jak za pomocą CSS to można zrobić...
... upsss jeszcze obrazek bez niego nie będzie efektu :) - wrzucić do katalogu z kodem
Powinno wyjść coś takiego: