<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/75ea760efa.js" crossorigin="anonymous"></script>
<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;
width: 100%;
}
@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; float:left;"></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; float:left;"></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; float:left;"> </i> Email: mail@mail.com </p>
</div>
<div class="icone">
<!--INSERISCI ICONE QUA-->
<ul class="ulicone">
<li>
<a href="#">
<i class="fab fa-tiktok"></i> </a>
</li>
<li>
<a href="#"><i class="fab fa-telegram-plane"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-instagram"></i></a></li>
<li>
<a href="#"><i class="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
<!--INSERISCI STILE CSS ICONE QUA-->
<style media="screen">
@media only screen and (max-width:620px){
.ulicone {
display: none;
}
}
.icone{
background-color: #335C67;
}
ul {
display: flex;
position: relative;
top: 50%;
margin-left:55%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background-color: #fff;
text-align: center;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .fab {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .fab {
color: #fff;
transform: rotateY(360deg);
}
ul li a:before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(246,155,227,1) 36%, rgba(227,61,91,1) 83%);
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(3) a:before {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
ul li:nth-child(4) a:before {
background: red;
}
</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>