Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
- <style>
- body {
- margin: 0;
- }
- .Header {
- position: fixed;
- z-index:1;
- width: 100%;
- height: 70px;
- background-color: black;
- text-align: right;
- }
- .socialmedia {
- position: fixed;
- right: 100px;
- top: 35px;
- transform: translate(0, -50%);
- display: flex;
- /* add this */
- align-items: center;
- /* add this */
- }
- .preorder button {
- background-color: white;
- border: 0;
- height: 35px;
- width: 110px;
- margin-left: 35px;
- }
- .footer {
- display: flex;
- align-items: center;
- width: 100%;
- height: 90px;
- background-color: black;
- }
- .photoSection {
- position: relative;
- background-color: black;
- overflow: hidden;
- }
- .mySlides~.mySlides {
- position: absolute;
- top: 0;
- left: 100%;
- transition: 0.8s;
- }
- </style>
- </head>
- <body>
- <div class="Header" id="myHeader">
- <a class = "headerLogo">
- <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
- text-align: center;">Some Title</h1></a>
- <style>
- a{text-decoration: none}
- </style>
- </a>
- <div class="socialmedia">
- <a class = "Facebook">
- <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
- </a>
- <a class = "Instagram">
- <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
- </a>
- <a class = "Youtube">
- <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
- </a>
- <a class = preorder>
- <button style = "background-color: white;">Pre-Order</button>
- </a>
- </div>
- </div>
- <div class="photoSection">
- <img class="mySlides" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" style="width:100%; height:785px;">
- <img class="mySlides" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" style="width:100%; height: 785px">
- <img class="mySlides" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" style="width:100%; height: 785px">
- </div>
- <div class="section1" style = "background-color: black; color: white; padding-top: 150px;" >
- <a class = "header1" style="padding-left: 200px; display:inline-block; width:85.2%">
- <img src = "FoldingIcon.PNG">
- <h1 style = "font-family: Verdana;font-size: x-large; text-align: start;">Some Title</h1>
- <p style = "margin-bottom: 200px; font-family: Verdana; color: gray;">
- </p>
- <img src="Backpack.PNG">
- <h2 style = "font-family: Verdana; font-size: x-large; text-align:start">Some Title</h2>
- <p style = "margin-bottom: 300px"></p>
- </a>
- <p style = "color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%">
- ____________________________________________________________________________________________________________________________________________________________</p>
- </div>
- <div class = "section2" style = "background-color: black; color: white; padding-bottom: 500px;">
- </div>
- <script>
- var myIndex = 0;
- carousel();
- function carousel() {
- var i;
- var x = document.getElementsByClassName("mySlides");
- myIndex++;
- if (myIndex > x.length) {
- myIndex = 1
- x[myIndex - 1].style.right;
- }
- else {
- x[myIndex - 1].style.left = "0";
- }
- // you may want to add transition-delay , z-index, ... to tune sliding effect
- setTimeout(carousel, 4000); // Change image every 2 seconds
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement