<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
<title></title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #335C67;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #DD6E42;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<!--barra di navigazione-->
<div class="topnav" id="myTopnav">
<a href="#aboutpage" class="active">About</a>
<a href="#home">Home</a>
<a href="#mystories">My stories</a> <!--ordine alfabetico o per data idk-->
<a href="#contact">Contact for feedbacks</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="immagine">
</div>
<div class="testo">
</div>
<div class="icons">
</div>
<div class="info">
</div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float:left;
width:20%;
height:600px;
text-align:center;
background-image:url("https://i.ibb.co/2d3jVFd/rana.jpg");
background-position: center;
background-repeat: no-repeat;
background-size:cover;
padding:8px;
margin-top:0px;
display:block;
color:black;
margin-top:20px;
}
.main {
float:left;
width:40%;
padding:0 20px;
}
.right {
background-color:#e5e5e5;
float:right;
width:20%;
height:400px;
padding:15px;
margin-top:80px;
text-align:center;
}
.icone{
background-color:#e5e5e5;
margin-top: 700px;
height: 120px
}
@media only screen and (max-width:620px) {
/* For mobile phones: */
.menu, .main, .right, .icone {
width:100%;
}
}
@media only screen and (max-width:620px){
.menu{
height: 300px;
}
}
@media only screen and (max-width:620px){
.right{
height: 200px;
}
.icone{
height: 100px;
}
}
</style>
<body style="font-family:Verdana;color:#aaaaaa;">
<div class="menu" style="overflow:auto">
immagine
</div>
<div class="main">
<h2>About me</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="right">
<p class="ic1" style="float:left;"><i class="fa fa-map-marker fa-fw w3-text-white w3-xxlarge w3-margin-
right" style="font-size:35px;"></i> Gouda, Netherlands</p>
<p class="ic2" style="float:left;"><i class="fa fa-phone fa-fw w3-text-white w3-xxlarge w3-margin-right"
style="font-size:35px;"></i> Phone: +00 151515</p>
<p class="ic3" style="float:left;"><i class="fa fa-envelope fa-fw w3-text-white w3-xxlarge w3-margin-
right" style="font-size:35px;"> </i> Email: mail@mail.com</p>
</div>
<div class="icone">
<a href="#"> <span class="iconify" id="tiktok" data-icon="simple-icons:tiktok" data-inline="false"
style="font-size:60px;"></span> </a>
<a href="#"> <span class="iconify" id="wattpad" data-icon="cib:wattpad" data-inline="false" style="font-
size:60px;"></span> </a>
<a href="#"> <span class="iconify" id="instagram" data-icon="ant-design:instagram-outlined" data-
inline="false" style="font-size:60px;"></span> </a>
<a href="#"> <span class="iconify" id="telegram" data-icon="bx:bxl-telegram" data-inline="false"
style="font-size:60px;"></span> </a>
</div>
<style media="screen">
.iconify{
background-color: white;
color: #aaa;
border-radius: 50%;
border: 2px solid #aaa;
margin-left: 300px;
text-align: center;
}
#wattpad:hover{
color: white;
background-color:orange;
}
#instagram:hover{
color: white;
background: #d6249f;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f
60%,#285AEB 90%);
}
#telegram:hover{
color: white;
background: #34acec;
}
#tiktok:hover{
color: white;
background: black;
}
</style>
<!--script per responsive-->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>