gridlayout with internal link with sidebar internal/external links
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()"
title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">HOME</a>
<a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>
<a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">PORTFOLIO</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
<div class="w3-dropdown-hover w3-hide-small">
<button class="w3-padding-large w3-button" title="More">MORE <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Merchandise</a>
<a href="#" class="w3-bar-item w3-button">Extras</a>
<a href="#" class="w3-bar-item w3-button">Media</a>
</div>
</div>
<a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
</div>
</div>
<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
<a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">BAND</a>
<a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">TOUR</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">MERCH</a>
</div>
<!-- Page content -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-wdth:500px" id="homr">
<img class="/w3image" src="https://scontent.fmnl6-1.fna.fbcdn.net/v/t1.6435-9/53212841_2261340297251516_801906514838159360_n.jpg?_nc_cat=102&ccb=1-5&_nc_sid=19026a&_nc_eui2=AeEvKVEcm4JPS7cEiCLLATvVZMMUx-R_Oc5kwxTH5H85zrluo7PUcTuPVBHSBOuMCEv4a3lrL_eGKFxXruxNlLKv&_nc_ohc=-8q5gZyEouEAX8Z8hKL&tn=iZnHOlkeVAKmQfjL&_nc_ht=scontent.fmnl6-1.fna&oh=20773d306b9d426c1d859e7f88a936b4&oe=61CE232F">
<div class="w3-display-bottommiddle w3-padding-large w3-opacity">
<h1 class="w3-xxlarge">Arjun Limpios</h1>
</div>
</header>
<!-- The Band Section -->
<div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
<h2 class="w3-wide">ABOUT ME</h2>
<p class="w3-opacity"><i>Music is Life!</i></p>
<p class="w3-justify">hello I'm Arjun Limpios, 21 years old, 3rd year college at bmma, since childhood I've loved music, I also love writing songs,
one of my hobbies is biking and playing basketball and collecting sneakers like jordan, nike, adidas and etc.
music has helped me a lot, because if it wasn't for the music I might not be able to feel myself, and I might not even know how to deal with the problem.
all i can say is that even if we lose our appetite for our dreams that we want to achieve, it's okay, you just need to rest and listen to music,
trust me that your appetite will return to your passion. just encourage yourself, because here in our world the fun and the sadness are together and they will not disappear in the part of our lives,
like a song, there is a happy part and a sad part, so there is that to balance the story, like in life we can't always be happy, we must also be sad,
for our lives to be balanced and for the story of your life to be even more beautiful.</p>
<div class="w3-row-padding w3-padding-16 id="about">
<div class="w3-col m6">
<img src="https://scontent.fmnl6-1.fna.fbcdn.net/v/t1.6435-9/45194071_2079729482079266_7187747419054931968_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=174925&_nc_eui2=AeFHAwU-1He27cbAzf734_ZRQTkNnb35U3BBOQ2dvflTcIvJVxMPKLBIYVe9lh1zcQtiiogch_dXkse6i_Y_89Qd&_nc_ohc=EwH7PTTuIbgAX_pFdCy&_nc_ht=scontent.fmnl6-1.fna&oh=44275f82729ef5526ab130837e04379c&oe=61CEA417" alt="Me" style="width:100%">
</div>
<div class="w3-colm6">
<img src="/w3images/bandmember.jpg" class="w3-round w3-margin-bottom" alt="Random Name" style="width:100%">
</div>
<div class="w3-third">
<p>Name</p>
<img src="https://scontent.fmnl6-2.fna.fbcdn.net/v/t1.6435-9/183731490_4158086060910254_3503270649476924060_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=174925&_nc_eui2=AeHvm7ASwNtvYIl3y4sCBEsekCHPajGD6m6QIc9qMYPqbj6JuXm26kKd6SA6dvPS2xU-TD7Id1HMKruDOYcDYIBZ&_nc_ohc=9RgSjMr2YesAX8PsI5V&_nc_ht=scontent.fmnl6-2.fna&oh=8123c7d40c0cf00dea98c3b31b487043&oe=61CD3385" alt="Me" style="width:100%">
</div>
</div>
</div>
</div>
<!-- portfolio Section -->
<div class="w3-black" id="tour">
<div class="w3-container w3-content w3-padding-64" style="max-width:800px">
<h2 class="w3-wide w3-center">PORTFOLIO</h2>
<div class="w3-row-padding w3-padding-32" style="margin:0 -16px">
<div class="w3-third w3-margin-bottom">
<img src="https://scontent.fmnl6-2.fna.fbcdn.net/v/t1.6435-9/202035137_4285318688186990_8577447689975612230_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=730e14&_nc_eui2=AeHDgKC2EfttFzRmVVp5YLf6TADA0V_-bSFMAMDRX_5tIfVoXALU0iUtSwOfcAYnh8dEBgoMpLNKiBJ1R04d_DlA&_nc_ohc=WibOPJ8Vq0MAX-jGkJU&_nc_ht=scontent.fmnl6-2.fna&oh=ea5b5c3a6c54b8099eb3014bb55b079a&oe=61CEBF88" alt="New York" style="width:100%" class="
w3-hover-opacity">
</div>
<div class="w3-third w3-margin-bottom">
<img src="https://scontent.fmnl6-1.fna.fbcdn.net/v/t1.6435-9/41622036_2014496458602569_7842786255896051712_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=19026a&_nc_eui2=AeEmD70T9ByBGeWVD-nNbyerRwwLVQ81pMxHDAtVDzWkzNoDGVVznLENXeZE_PfD_FvBrxjq8vp9skalpz1yfTN7&_nc_ohc=bUd-ymUyCVcAX9RrGV2&tn=iZnHOlkeVAKmQfjL&_nc_ht=scontent.fmnl6-1.fna&oh=0dc63727775859fa023d8dc5979bca9a&oe=61CEA4B0" alt=New York" style="width:100%" calss="
w3-hover-opacity">
</div>
<div class="w3-third w3-margin-bottom">
<img src="https://scontent.fmnl6-1.fna.fbcdn.net/v/t39.30808-6/233973391_4437013186350872_6509739126347557799_n.jpg?_nc_cat=103&_nc_rgb565=1&ccb=1-5&_nc_sid=19026a&_nc_eui2=AeGg6tOAfOJ6MH5hIxkDSh9ewxwwgG8Vq1fDHDCAbxWrV-im9pUOuejx5KpZ8d0Dz_R5LLzSoNpyWAn8OssYzrNI&_nc_ohc=8AfmTpOhYRAAX-FOJIo&_nc_oc=AQnJ9dKjiF-BawsIHtIk-AmFR9Ktlp-CI6fINq1HywHqwZjCQxQId2yjeQHl0pRbEXo&tn=iZnHOlkeVAKmQfjL&_nc_ht=scontent.fmnl6-1.fna&oh=ea8fd1104c4d62e75a366167dab80782&oe=61AEBFE8" alt=New York" style="width:100%" class"
w3-hover-opacity">
<p class="w3-opacity">Fri 27 Nov 2016</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Buy Tickets</button>
</div>
</div>
</div>
</div>
</div>
<!-- The Contact Section -->
<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">
<h2 class="w3-wide w3-center">CONTACT</h2>
<p class="w3-opacity w3-center"><i>Fan? Drop a note!</i></p>
<div class="w3-row w3-padding-32">
<div class="w3-col m6 w3-large w3-margin-bottom">
<i class="fa fa-map-marker" style="width:30px"></i> CAVITE, PHILIPPINES<br>
<i class="fa fa-phone" style="width:30px"></i> Phone: 09085279836<br>
<i class="fa fa-envelope" style="width:30px"> </i> Email: nujraoczon@gmail.com<br>
</div>
<div class="w3-col m6">
<form action="/action_page.php" target="_blank">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Email" required name="Email">
</div>
</div>
<input class="w3-input w3-border" type="text" placeholder="Message" required name="Message">
<button class="w3-button w3-black w3-section w3-right" type="submit">SEND</button>
</form>
</div>
</div>
</div>
<!-- End Page Content -->
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
<a href="https://www.facebook.com/photo/?fbid=4437013176350873&set=a.578844045501158">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
</a>
</footer>
</body>
</html>
Comments
Post a Comment