<!-- -- Uploaded on : https://haxor.my.id/open/banda.html -- Official Web : https://prinsh.com -- script-deface-generator.prinsh.com --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav> <ul id='navbar'> <li><a href="#welcome-section"></a>Gruppo</li> <li><a href="#projects">Portfolio</a></li> <li><a href="#contact">Contatti</a></li> </ul> </nav> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Rajdhani'); html, body { font-family: 'Rajdhani', sans-serif; text-align: center; } * { margin: 0; padding: 0; } .intro { top: 0; min-height: 55vh; padding-top: 45vh; width:100%; background-image: url("https://t4.ftcdn.net/jpg/00/54/14/93/360_F_54149313_Cp7W8ivaNjCo3Xb9ZOBx8krq3MTYB7mD.jpg"); background-repeat: no-repeat; background-size: 100% 100%; border-bottom: 5px solid #000; } .intro{ text-align:center; } .intro p{ color: white; font-size:25px; } h1{ font-size:3rem; } nav ul { text-align: center; position: fixed; width: 100%; background-color: #eaeae1; } nav ul li { display: inline-block; margin: 55px; margin-bottom: 15px; margin-top: 25px; } nav ul li a { color: grey; font-size:1.5rem; text-decoration: none; } nav ul li a:hover { color: #010101; } .work { min-height: 55vh; padding-top: 5vh; width:100%; background-image: url("https://images.pexels.com/photos/872958/pexels-photo-872958.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); background-repeat: no-repeat; background-size: cover; border-bottom: 5px solid #000; } .work .work-header { margin-top: 50px; color: #000; font-size:28px; } .project { text-decoration: none; color: black; display: inline-block; overflow: hidden; border: 2px solid #333; height: 220px; width: 280px; margin: 40px 100px; } .project:hover{ border: 2px solid #999; } .project-pic:hover{ border-bottom: 2px solid #999; } .project-pic { width: 100%; height: 180px; border-bottom: 2px solid; } .project-title { font-weight: bold; font-size:22px; } @media only screen and (max-width: 500px) { nav ul { text-align: center; } nav ul li { margin: 20px; } .project { margin: 40px 0; } } .contact { min-height: 55vh; width:100%; } .header p{ font-size:20px; } .contact-details { display: inline-block; margin: 50px 30px 5px 30px; list-style-type: none; width: 10%; height: 100px; line-height: 100px; } footer { padding: 20px; background: #3d3d29; color: #aaa; line-height: 40px; } @media only screen and (max-width: 350px) { .contact { min-height: 55vh; width:100%; } .header p{ font-size:20px; } .contact-details { width: 50px; height: 20px; padding: 0px; line-height: normal; } } </style> <div id="welcome-section" class="intro"> <h1>Ras Giaggio &</h1> <p>Boh non si sa </p> </div> <div id="projects" class="work"> <h2 class="work-header"><strong>Alcuni dei progetti:</strong></h2> <a href="https://youtu.be/WVecjSSC5qM" target="_blank" class="project project-tile"> <img class="project-pic" src="https://m.media-amazon.com/images/I/513RiaL1nOL._UXNaN_FMjpg_QL85_.jpg" alt="project"> <div class="project-title">Heart of Rastaman</div> </a> <a href="https://youtu.be/AoGAM2iAdCA" target="_blank" class="project project-tile"> <img class="project-pic" src="https://m.media-amazon.com/images/I/513RiaL1nOL._UXNaN_FMjpg_QL85_.jpg" alt="project"> <div class="project-title">Moon Sound</div> </a> <a href="https://youtu.be/WI9qDmdsNak" target="_blank" class="project project-tile"> <img class="project-pic" src="https://m.media-amazon.com/images/I/513RiaL1nOL._UXNaN_FMjpg_QL85_.jpg" alt="project"> <div class="project-title">Fly Natty</div> </a> <a href="https://youtu.be/GPBs1eJm_-Y" target="_blank" class="project project-tile"> <img class="project-pic" src="https://m.media-amazon.com/images/I/513RiaL1nOL._UXNaN_FMjpg_QL85_.jpg" alt="project"> <div class="project-title">Rasta Princess</div> </a> </div> <div id="contact" class="contact"> <div class="header"> <h1>Non fare i' leso</h1> <p>Seguici</p> </div> <a id='profile-link' href="https://www.facebook.com/profile.php?id=100011381148004" target="_blank" class="contact-details"><i class="fa fa-facebook-square" style="font-size:48px;color:#555"></i></a> <a id='profile-link' href="www.linkedin.com/in/zorana-milosavljevic-179354158" target="_blank" class="contact-details"><i class="fa fa-twitter-square" style="font-size:48px;color:#555"></i></a> <a id='profile-link' href="https://www.instagram.com/ras_giaggio" target="_blank" class="contact-details"><i class="fa fa-instagram" style="font-size:48px;color:#555"></i></a> <a id='profile-link' href="mailto:zornam001@gmail.com" class="contact-details"><i class="fa fa-envelope-o" style="font-size:48px;color:#555"></i></a> </div> <footer>Gianluca Lisi, Firenze <p>2024 ©All rights reserved.</p> </footer>