Полный код следующий:
enter code here
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset='UTF-8'/>
<link rel="icon" type="image/gif" href="images/animated_favicon1.gif" >
<title>Piero Sabino</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Pacifico&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/69b5654055.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<meta name="keywords" content="HTML5, CSS3">
<meta name="author" content="Piero Sabino">
<meta name="description" content="My website">
</head>
<body>
<div class='container'>
<header>
<h1>Piero Sabino</h1>
<div class=social>
<a href='https://www.linkedin.com/in/piero-sabino-15a1b671/' target='_blank'>
<i class="fab fa-linkedin fa-2x"></i>
</a>
<a href='https://www.instagram.com/p13rr390/' target='_blank'>
<i class="fab fa-instagram fa-2x"></i>
</a>
<a href='https://github.com/pierre1590' target='_blank'>
<i class="fab fa-github fa-2x"></i>
</a>
</div>
<nav>
<ul class='menu'>
<li><a href='#about'>About</a></li>
<li><a href='#projects'>Project</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id='about'>
<div class="content-wrap">
<img class='profile-img col-narrow' src='images/Piero Sabino.jpeg' alt="Piero Sabino">
<div class='col-wide'>
<p>Hi, my name's Piero Sabino and I'm 30 years old.
I live in Turi, Puglia
</p>
</div>
</div>
</section>
<section id='projects'>
</section>
<section id='contact'>
</section>
</main>
<footer>
</footer>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display:flex;
flex-wrap: wrap;
}
main {
width: 100%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
section{
width: 100%;
display:flex;
font-family: 'Dancing-script',cursive, sans-serif;
justify-content: center;
align-items: left;
font-size:18px;
}
header {
font-family: 'Pacifico', cursive, sans-serif;
display: flex;
font-size: 18px;
height:100px;
justify-content: space-between;
align-items: center;
width:100%;
padding:50px;
background: rgb(194, 229, 247);
}
.menu {
margin-top: 15px;
}
.menu > li {
display: inline;
margin-right: 50px;
}
.menu > li:last-of-type {
margin-right: 0;
}
a:link,
a:visited {
color: #007;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.profile-img{
border-radius:50%;
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body {
background-color :#fff; /* White */
}
.img{
margin-top:5%;
width:30%;
}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #FFF; /* White */
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.container {
width: 960px;
margin: 0 auto;
}
.col-narrow {
margin-top: 5%;
width: 20%;
float: left;
}
.col-wide {
width: 70%;
float: left;
padding-left: 20px;
}
.profile-img {
width: 200px;
}
header {
height: 180px;
}
main {
height: 600px;
}
footer{
height:200px;
}
}