Created
April 30, 2017 19:08
-
-
Save anonymous/3e1847d12aee320cf18eb6154e3c653f to your computer and use it in GitHub Desktop.
Testowa strona
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<title>test</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=Raleway"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
<style> | |
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif} | |
.myLink {display: none} | |
</style> | |
<body class="w3-light-grey"> | |
<header class="w3-container w3-red w3-center" style="padding:20px 16px"> | |
<h1 class="w3-margin w3-jumbo">START PAGE</h1> | |
</header> | |
<!-- Navigation Bar --> | |
<div class="w3-bar w3-white w3-border-bottom w3-xlarge"> | |
<a href="#" class="w3-bar-item w3-button w3-text-red w3-hover-red"><b><i class="fa fa-map-marker w3-margin-right"></i>Logo</b></a> | |
<a href="#" class="w3-bar-item w3-button w3-right w3-hover-red w3-text-grey"></a> | |
</div> | |
<!-- Header --> | |
<header class="w3-display-container w3-content w3-hide-small" style="max-width:1500px"> | |
<img class="w3-image" src="http://cdn28.se.smcloud.net/t/photos/171376/opel_astra_sedan_2012.jpg" alt="Opel" width="1500" height="700"> | |
<div class="w3-display-middle" style="width:65%"> | |
<div class="w3-bar w3-black"> | |
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Flight');"><i class="fa fa-plane w3-margin-right"></i>Flight</button> | |
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Hotel');"><i class="fa fa-bed w3-margin-right"></i>Hotel</button> | |
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Car');"><i class="fa fa-car w3-margin-right"></i>Rental</button> | |
</div> | |
<!-- Tabs --> | |
<div id="Flight" class="w3-container w3-white w3-padding-16 myLink"> | |
<h3>Travel the world with us</h3> | |
<div class="w3-row-padding" style="margin: 30 -16px;"> | |
<div class="w3-half"> | |
<label>From</label> | |
<input class="w3-input w3-border" type="text" placeholder="Departing from"> | |
</div> | |
<div class="w3-half"> | |
<label>To</label> | |
<input class="w3-input w3-border" type="text" placeholder="Arriving at"> | |
</div> | |
</div> | |
<p><button class="w3-button w3-dark-grey">Search and find dates</button></p> | |
</div> | |
<div id="Hotel" class="w3-container w3-white w3-padding-16 myLink"> | |
<h3>Find the best hotels</h3> | |
<p>Book a hotel with us and get the best fares and promotions.</p> | |
<p>We know hotels - we know comfort.</p> | |
<p><button class="w3-button w3-dark-grey">Search Hotels</button></p> | |
</div> | |
<div id="Car" class="w3-container w3-white w3-padding-16 myLink"> | |
<h3>Best car rental in the world!</h3> | |
<p><span class="w3-tag w3-deep-orange">DISCOUNT!</span> Special offer if you book today: 25% off anywhere in the world with CarServiceRentalRUs</p> | |
<input class="w3-input w3-border" type="text" placeholder="Pick-up point"> | |
<p><button class="w3-button w3-dark-grey">Search Availability</button></p> | |
</div> | |
</div> | |
</header> | |
<!-- Page content --> | |
<div class="w3-content" style="max-width:1100px;"> | |
<!-- Explore Nature --> | |
<div class="w3-container"> | |
<h3>Explore Nature</h3> | |
<p>Travel with us and see nature at its finest.</p> | |
</div> | |
<div class="w3-row-padding"> | |
<div class="w3-half w3-margin-bottom"> | |
<img src="/w3images/ocean2.jpg" alt="Norway" style="width:100%"> | |
<div class="w3-container w3-white"> | |
<h3>West Coast, Norway</h3> | |
<p class="w3-opacity">Roundtrip from $79</p> | |
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p> | |
<button class="w3-button w3-margin-bottom">Buy Tickets</button> | |
</div> | |
</div> | |
<div class="w3-half w3-margin-bottom"> | |
<img src="/w3images/mountains2.jpg" alt="Austria" style="width:100%"> | |
<div class="w3-container w3-white"> | |
<h3>Mountains, Austria</h3> | |
<p class="w3-opacity">One-way from $39</p> | |
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p> | |
<button class="w3-button w3-margin-bottom">Buy Tickets</button> | |
</div> | |
</div> | |
</div> | |
<!-- Newsletter --> | |
<div class="w3-container"> | |
<div class="w3-panel w3-padding-16 w3-black w3-opacity w3-card-2 w3-hover-opacity-off"> | |
<h2>Get the best offers first!</h2> | |
<p>Join our newsletter.</p> | |
<label>E-mail</label> | |
<input class="w3-input w3-border" type="text" placeholder="Your Email address"> | |
<button type="button" class="w3-button w3-red w3-margin-top">Subscribe</button> | |
</div> | |
</div> | |
<!-- Contact --> | |
<div class="w3-container"> | |
<h2>Contact</h2> | |
<p>Let us book your next trip!</p> | |
<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br> | |
<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br> | |
<i class="fa fa-envelope" style="width:30px"> </i> Email: mail@mail.com<br> | |
<form action="/action_page.php" target="_blank"> | |
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p> | |
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Email" required name="Email"></p> | |
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message" required name="Message"></p> | |
<p><button class="w3-button w3-black w3-padding-large" type="submit">SEND MESSAGE</button></p> | |
</form> | |
</div> | |
<!-- End page content --> | |
</div> | |
<!-- Footer --> | |
<footer class="w3-container w3-center w3-opacity w3-margin-bottom"> | |
<h5>Find Us On</h5> | |
<div class="w3-xlarge w3-padding-16"> | |
<i class="fa fa-facebook-official w3-hover-opacity"></i> | |
<i class="fa fa-instagram w3-hover-opacity"></i> | |
<i class="fa fa-snapchat w3-hover-opacity"></i> | |
<i class="fa fa-pinterest-p w3-hover-opacity"></i> | |
<i class="fa fa-twitter w3-hover-opacity"></i> | |
<i class="fa fa-linkedin w3-hover-opacity"></i> | |
</div> | |
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p> | |
</footer> | |
<script> | |
// Tabs | |
function openLink(evt, linkName) { | |
var i, x, tablinks; | |
x = document.getElementsByClassName("myLink"); | |
for (i = 0; i < x.length; i++) { | |
x[i].style.display = "none"; | |
} | |
tablinks = document.getElementsByClassName("tablink"); | |
for (i = 0; i < x.length; i++) { | |
tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); | |
} | |
document.getElementById(linkName).style.display = "block"; | |
evt.currentTarget.className += " w3-red"; | |
} | |
// Click on the first tablink on load | |
document.getElementsByClassName("tablink")[0].click(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment