<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <title>Diana Badas</title> </head> <body> <!-- Navigation --> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li style="float:left"><a class="active" href="#">Diana Badas</a></li> </ul> <!-- Slide Show --> <section> <img class="mySlides" src = "https://s5.postimg.cc/3prpgvdlj/pexels-photo-774731.jpg" style="width:100%"> <img class="mySlides" src="https://s5.postimg.cc/dzu4g4b6v/pexels-photo-937596.jpg" style="width:100%"> </section> <!-- Main Text --> <section class="mainTextContainer"> <h1 class="intro">My projects</h1> <p class="important"><i>Find below a selection of my projects </i></p> <p class="generalText">More info</p> </section> <!-- Articles --> <section class="container"> <article class="leftpane"> <h1 class="intro">Project x</h1> </article> <article class="middlepane"> <h1 class="intro">Project Y</h1> </article> <article class="rightpane"> <h1 class="intro">Project Z</h1> </article> </section> <!-- Footer --> <footer class="footer"> <h1 class="intro">This is my footer</h1> <a href="#"><i class="fa fa-facebook-official"></i></a> <a href="#"><i class="fa fa-pinterest-p"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-flickr"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </footer> <script> // Automatic Slideshow - change image every 5 seconds var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 5000); } </script> </body> </html>
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e7e7e7; background-color: #f3f3f3; font-family:"Courier New"; } li { float: right; } li a { display: block; color: rgb(134, 131, 133); text-align: center; padding: 14px 16px; text-decoration: none; font-family:"Courier New"; } li a:hover:not(.active) { background-color: rgb(238, 206, 228); } li a.active { color: white; background-color: rgb(228, 125, 211); } h1.intro { color: black; text-align:center; font-family:"Courier New"; } p.important { color: gray; text-align:center; font-family:"Courier New"; } p.generalText { color: black; text-align:center; font-family:"Courier New"; } .mainTextContainer { width:100%; height:100%; background-color: rgb(159, 159, 216); } .textContainerPortfolio { width:100%; height:25%; } h2, p { font-family:"Courier New"; } body, html { width: 100%; height: 100%; margin: 0; } * { box-sizing: border-box; } /* Style container Home page */ .container { width: 100%; height: 100%; } .leftpane { width: 25%; height: 100%; float: left; background-color: aliceblue; border-collapse: collapse; } .middlepane { width: 50%; height: 100%; float: left; background-color: antiquewhite; border-collapse: collapse; } .rightpane { width: 25%; height: 100%; position: relative; float: right; background-color: azure; border-collapse: collapse; } .footer { left: 0; bottom: 0; width: 100%; background-color: #f3f3f3; color: rgb(134, 131, 133); text-align: center; } /* Style inputs */ input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; margin-top: 6px; margin-bottom: 16px; resize: vertical; font-family:"Courier New"; } input[type=submit] { background-color: rgb(228, 125, 211); color: white; padding: 12px 20px; border: none; cursor: pointer; font-family:"Courier New"; } input[type=submit]:hover { background-color: blueviolet; font-family:"Courier New"; } /* Style the container/contact section */ .containerContactPage { border-radius: 5px; background-color: #f2f2f2; padding: 10px; } /* Create two columns that float next to eachother */ .column { float: left; width: 50%; margin-top: 6px; padding: 20px; font-family:"Courier New"; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column, input[type=submit] { width: 100%; margin-top: 0; font-family:"Courier New"; } }