&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css&quot;&gt;
&lt;script src=&quot;https://code.iconify.design/1/1.0.6/iconify.min.js&quot;&gt;&lt;/script&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style&gt;
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;
}
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;!--barra di navigazione--&gt;
&lt;div class=&quot;topnav&quot; id=&quot;myTopnav&quot;&gt;
&lt;a href=&quot;#aboutpage&quot; class=&quot;active&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;
&lt;a href=&quot;#mystories&quot;&gt;My stories&lt;/a&gt; &lt;!--ordine alfabetico o per data idk--&gt;
&lt;a href=&quot;#contact&quot;&gt;Contact for feedbacks&lt;/a&gt;
&lt;a href=&quot;javascript:void(0);&quot; class=&quot;icon&quot; onclick=&quot;myFunction()&quot;&gt;
&lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;immagine&quot;&gt;

&lt;/div&gt;
&lt;div class=&quot;testo&quot;&gt;

&lt;/div&gt;
&lt;div class=&quot;icons&quot;&gt;

&lt;/div&gt;
&lt;div class=&quot;info&quot;&gt;

&lt;/div&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;style&gt;
* {
box-sizing: border-box;
}
.menu {

float:left;
width:20%;
height:600px;
text-align:center;
background-image:url(&quot;https://i.ibb.co/2d3jVFd/rana.jpg&quot;);
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;
}
}
&lt;/style&gt;

&lt;body style=&quot;font-family:Verdana;color:#aaaaaa;&quot;&gt;

&lt;div class=&quot;menu&quot; style=&quot;overflow:auto&quot;&gt;
immagine
&lt;/div&gt;
&lt;div class=&quot;main&quot;&gt;

&lt;h2&gt;About me&lt;/h2&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;right&quot;&gt;
&lt;p class=&quot;ic1&quot; style=&quot;float:left;&quot;&gt;&lt;i class=&quot;fa fa-map-marker fa-fw w3-text-white w3-xxlarge w3-margin-
right&quot; style=&quot;font-size:35px;&quot;&gt;&lt;/i&gt; Gouda, Netherlands&lt;/p&gt;
&lt;p class=&quot;ic2&quot; style=&quot;float:left;&quot;&gt;&lt;i class=&quot;fa fa-phone fa-fw w3-text-white w3-xxlarge w3-margin-right&quot;
style=&quot;font-size:35px;&quot;&gt;&lt;/i&gt; Phone: +00 151515&lt;/p&gt;
&lt;p class=&quot;ic3&quot; style=&quot;float:left;&quot;&gt;&lt;i class=&quot;fa fa-envelope fa-fw w3-text-white w3-xxlarge w3-margin-
right&quot; style=&quot;font-size:35px;&quot;&gt; &lt;/i&gt; Email: mail@mail.com&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;icone&quot;&gt;
&lt;a href=&quot;#&quot;&gt; &lt;span class=&quot;iconify&quot; id=&quot;tiktok&quot; data-icon=&quot;simple-icons:tiktok&quot; data-inline=&quot;false&quot;
style=&quot;font-size:60px;&quot;&gt;&lt;/span&gt; &lt;/a&gt;

&lt;a href=&quot;#&quot;&gt; &lt;span class=&quot;iconify&quot; id=&quot;wattpad&quot; data-icon=&quot;cib:wattpad&quot; data-inline=&quot;false&quot; style=&quot;font-
size:60px;&quot;&gt;&lt;/span&gt; &lt;/a&gt;

&lt;a href=&quot;#&quot;&gt; &lt;span class=&quot;iconify&quot; id=&quot;instagram&quot; data-icon=&quot;ant-design:instagram-outlined&quot; data-
inline=&quot;false&quot; style=&quot;font-size:60px;&quot;&gt;&lt;/span&gt; &lt;/a&gt;

&lt;a href=&quot;#&quot;&gt; &lt;span class=&quot;iconify&quot; id=&quot;telegram&quot; data-icon=&quot;bx:bxl-telegram&quot; data-inline=&quot;false&quot;
style=&quot;font-size:60px;&quot;&gt;&lt;/span&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;style media=&quot;screen&quot;&gt;
.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;

}
&lt;/style&gt;

&lt;!--script per responsive--&gt;
&lt;script&gt;
function myFunction() {
var x = document.getElementById(&quot;myTopnav&quot;);
if (x.className === &quot;topnav&quot;) {
x.className += &quot; responsive&quot;;
} else {
x.className = &quot;topnav&quot;;

}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;