Exercise - Build a Tribute Page

Developer
Roksana
Size
5,463 Kb
Views
18,216
  1. Exercise - Build a Tribute Page Previews
  2. Exercise - Build a Tribute Page HTML Codes
  3. Exercise - Build a Tribute Page CSS Codes
  4. Exercise - Build a Tribute Page JS Codes

How do I make an exercise - build a tribute page?

What is a exercise - build a tribute page? How do you make a exercise - build a tribute page? This script and codes were developed by Roksana on 22 November 2022, Tuesday.

Exercise - Build a Tribute Page Previews
IQ Test

Exercise - Build a Tribute Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Exercise - Build a Tribute Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE HTML>
<html lang="en">
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Exercise - Build a Tribute Page</title> <link rel="stylesheet" href="main.css" type="text/css" /> <!--<link rel="stylesheet" href="css/fontello.css" type="text/css" />--> <script src="https://use.fontawesome.com/f9a688749b.js"></script> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"/> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/jquery.scrollTo.min.js"></script>
</head>
<body> <a href="#" class="scrollup"> <i class="fa fa-chevron-up"></i> </a> <header class="header"> <a class="logo-link" href="index.html" alt="Go back to homepage"> <img src="http://qlip.in/images/qlip.png" alt="Logo qlip"> </a> <navigation class="navigation"> <button type="button" title="Open menu" class="menu"> <i class="fa fa-bars"></i> </button> <div style="clear:both"></div> </navigation> </header> <menu class="nav-closed"> <ul class="nav-menu bold"> <li class="about"><a id="link-about" href="#">ABOUT</a></li> <li class="portfolio"><a id="link-portfolio" href="#">PORTFOLIO</a></li> <li class="contact"><a id="link-contact" href="#">CONTACT</a></li> <div style="clear:both"></div> </ul> </menu> <article class="article-container"> <div class="main-article"> <div class="main-text"> <div id="about"> <div class="about-text"> <p>The name is Justin and I'm an UX/UI designeveloper, with extensive practical experience in brand strategy, creative direction and project management; devoted to Functional Programming and Information Architecture. Also a huge fan of semantics and futuristic interfaces.</p> <hr class="short-line-white long-line-white"></hr> <div class="sign">&nbsp; &#x3C; &#x2044; &#x3E; &nbsp;</div> <hr class="short-line-white"></hr> <h2>Web Developer - Graphic Artist - User Experience Designer</h2><br /> </div> <div class="about-picture"> <img src="http://qlip.in/images/avatar.jpg" alt="A picture of Justin looking at San Francisco from across the Golden Gate Bridge."/> </div> </div> <div id="portfolio"> <h1>PORTFOLIO</h1> <div class="sign-box"> <hr class="short-line-gray"></hr> <div class="sign">&nbsp; &#x3C; &#x2044; &#x3E; &nbsp;</div> <hr class="short-line-gray"></hr> </div> <img src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg" class="img-responsive" /> <img src="http://qlip.in/images/webcaballero.jpg" class="img-responsive" /> <img src="http://qlip.in/images/webmarqas.jpg" class="img-responsive"/> <img src="http://qlip.in/images/webbrandaxis.jpg" class="img-responsive"/> <img src="http://qlip.in/images/panacea1.jpg" class="img-responsive"/> <img src="http://qlip.in/images/webgatomalo.jpg" class="img-responsive"/> </div> <div id="contact"> <h1>CONTACT ME</h1> <div class="sign-box"> <hr class="short-line-gray"></hr> <div class="sign">&nbsp; &#x3C; &#x2044; &#x3E; &nbsp;</div> <hr class="short-line-gray"></hr> </div> <div class="forms"> <form action="/send-message-to-the-author"> <ul> <li> <label for="name">Name</label> <input id="name" type="text" placeholder="Name"><br/> </li> <li> <label for="email">Email Address</label> <input id="email" type="text" placeholder="Email Address"><br/> </li> <li> <label for="phone">Phone Number</label> <input id="phone" type="text" placeholder="Phone Number"><br/> </li> <li> <label for="message">Message</label> <textarea id="message" type="text" cols="50" rows="7" placeholder="Message"></textarea><br/> </li> </ul> <button type="button" title="Send"> Send </button> </form> </div> <div class="form-text"> <p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.<br /><br />I promise to reply A.S.A.P.<br /><br />Note: No spam/soliciting pour moi, merci :)</p> </div> </div> </div> </div> </article> <footer> <div class="footer1"> <div class="inf"> <strong class="bold">ABOUT THIS PAGE</strong><br/><br/>Made with <i class="fa fa-coffee"></i> and <i class="fa fa-music"></i><br/>by <a href="http://qlip.in" target="_blank">Justine Sane</a>. </div> <div class="inf"> <strong class="bold">AROUND THE WEB</strong><br/><br/> <div class="icons"> <div class="social"> <a href="https://www.linkedin.com/in/hallaathrad" target="_blank"> <i class="fa fa-linkedin"></i> </a> </div> <div class="social"> <a href="https://github.com/hallaathrad" target="_blank"> <i class="fa fa-github"></i> </a> </div> <div class="social"> <a href="https://twitter.com/hallaathrad" target="_blank"> <i class="fa fa-twitter"></i> </a> </div> <div class="social"> <a href="https://www.flickr.com/photos/hallaathrad" target="_blank"> <i class="fa fa-flickr"></i> </a> </div> <div style="clear: both"></div> </div> </div> <div style="clear:both"></div> </div> <div class="footer2">qlip &copy; 2016. All Rights Reversed</div> </footer> <script src="js/main.js"></script> <script src="js/jquery-3.1.0.min.js"></script>
</body> <script src="js/index.js"></script>
</body>
</html>

Exercise - Build a Tribute Page - Script Codes CSS Codes

body, html { margin: 0; padding: 0;
}
html { font-size: 62.5%;
}
body { font-family: 'Source Sans Pro', sans-serif; font-size: 2.4rem; color: #FFFFFF;
}
.scrollup { color: #FFFFFF; border-radius: 50%; border: 3px solid #FFFFFF; width: 50px; height: 50px; background-color: #800080; position: fixed; right: 30px; bottom: 15px;
}
.scrollup .fa { font-size: 26px; padding: 9px 0 0 12px;
}
.scrollup a { display: block; border-radius: 50%; border: 3px solid #FFFFFF; width: 50px; height: 50px; color: #FFFFFF; background-color: #800080; text-decoration: none;
}
.scrollup:hover { text-decoration: none; color: #800080; border-radius: 50%; border: 3px solid #800080; width: 50px; height: 50px; background-color: #D3D3D3; position: fixed; right: 30px; bottom: 15px; display: none;
}
.header { box-sizing: border-box; position: absolute; top: 0; width: 100%; padding: 27px 0 20px 0; background-color: #800080; border: 1px solid #000000;
}
.sticky-header { width: 100%; position: fixed; left: 0; top: 0;
}
.header .logo-link { display: block; float: left;
}
.header .logo-link img { width: 50px; height: auto; padding: 0 40px;
}
.header .navigation .menu { border-radius: 5px; border: 1px solid #F4F3F3; background-color: #800080; display: inline-block; float: right; margin: 0 40px;
}
.header .navigation .menu .fa { color: #A9A9A9; font-size: 30px; padding: 5px;
}
.header .navigation .menu:hover { background-color: #F4F3F3;
}
.menu-opened { background-color: #F4F3F3 !important;
}
.nav-closed { position: absolute; color: #A9A9A9; padding: 0; margin: 0; width: 80%; margin-left: 10%; background-color: #800080; border-top: 1px solid #FFFFFF; height: 69px; text-align: center; display: none;
}
.nav-opened { display: block; position: fixed;
}
.nav-opened .nav-menu { list-style: none; padding: 0; margin: 0; display: inline-block; margin-right: auto; margin-left: auto; height: 100%;
}
.nav-opened .bold { font-weight: bold; font-size: 26px;
}
.nav-opened .nav-menu li { float: left; height: 150%; display: inline-block; padding-top: 8px;
}
.nav-opened .nav-menu a { display: inline-block; color: #A9A9A9; text-decoration: none; padding: 10px 20px;
}
.nav-opened .nav-menu a:link { color: #A9A9A9; text-decoration: none;
}
.nav-opened .nav-menu a:hover { color: #414141; box-shadow: 0px 2px 6px 0px #606060;
}
.nav-opened .nav-menu a:active { color: #696969; text-decoration: none; background-color: #F4F3F3;
}
/*
chciałam stworzyć klasę, która będzie dodawana, gdy scroll będzie w danym miescu artykułu (about, portfolio, contact)
.active-article { color: #696969; text-decoration: none; background-color: #F4F3F3; }*/ .article-container { width: 100%; background-color: #696969; } .main-article .main-text { padding: 0; background-color: #808080; line-height: 1.5; margin: 0; margin-top: 112px; } .main-article .main-text #about { background-color: #A9A9A9; text-align: center; box-sizing: border-box; padding: 50px 50px; box-shadow: 0px 0px 6px 1px #696969; width: 100%; } .sign { display: inline-block; font-size: 4rem; } .short-line-white { width: 250px; height: 6px; color:#FFFFFF; background: #FFFFFF; border: none; display: inline-block; } .sign-box { width: 100%; margin-bottom: 50px; text-align: center; } .short-line-gray { width: 220px; height: 6px; color: #696969; background: #696969; border: none; display: inline-block; } .main-article .main-text .about-text h2 { font-size: 2.6rem; text-align: center; } .main-article .main-text #about img { border-radius: 50%; text-align: center; width: 300px; } .main-article .main-text #portfolio { background-color: #F5F5F5; width: 100%; margin: 0; padding: 20px 0; box-shadow: 0px 0px 6px 1px #696969; color: #696969; text-align: center; } .main-article .main-text #portfolio .img-responsive { width: 80%; display: block; height: auto; margin-left: auto; margin-right: auto; padding: 30px 0; max-width: 800px; } .main-article .main-text #contact { background-color: #F5F5F5; padding: 20px 0; box-shadow: 0px 0px 6px 1px #D3D3D3; color: #696969; margin: 0; width: 100%; display: inline-block; } .main-article .main-text #contact h1{ text-align: center; } .main-article .main-text #contact .forms { width: 80%; margin-right: auto; margin-left: auto; } .main-article .main-text #contact .forms input[type=text] { font-size: 3.4rem; color: #696969; background-color: #F5F5F5; padding: 20px 0; margin-bottom: 10px; border: none; border-bottom: 1px solid #D3D3D3; width: 100%; font-family: 'Source Sans Pro', sans-serif; } .main-article .main-text #contact .forms li { font-family: 'Source Sans Pro', sans-serif; color: #A9A9A9; font-size: 2rem; opacity: 1; list-style: none; } label { color: #800080; opacity: 1; -webkit-transition: .333s ease top, .333s ease opacity; transition: .333s ease top, .333s ease opacity; } .js-hide-label label { opacity: 0; margin: 0; padding: 0; } .js-unhighlight-label label { color: #999999; } .main-article .main-text #contact .forms textarea { width: 100%; color: #696969; background-color: #F5F5F5; border: none; border-bottom: 1px solid #D3D3D3; padding: 20px 0; font-size: 3.4rem; font-family: 'Source Sans Pro', sans-serif; resize: none; } .main-article .main-text #contact .forms button { font-size: 2.5rem; color: #696969; padding: 10px; margin: 20px 0 20px 40px; } .main-article .main-text #contact .form-text { width: 80%; margin-right: auto; margin-left: auto; padding: 50px 0 50px 40px; } .footer1 { background-color: #A9A9A9; padding: 50px ; box-shadow: 0px 0px 6px 1px #A9A9A9; } .footer1 .inf { width: 100%; text-align: center; padding: 20px 0; } .footer1 .inf a:link { color: #800080; text-decoration: none; } .footer1 .inf a:visited { color: #800080; text-decoration: none; } .footer1 .inf a:hover { color: #700070; text-decoration: underline; } .footer1 .inf a:active { color: #700070; text-decoration: underline; } .footer1 .inf .icons { margin-left: auto; margin-right: auto; display: inline-block; } .footer1 .inf .icons .social { border-radius: 50%; border: 3px solid #FFFFFF; width: 50px; height: 50px; float: left; margin: 5px; } .footer1 .inf .icons .social a { display: block; border-radius: 50%; width: 50px; height: 50px; color: #FFFFFF; text-decoration: none; } .footer1 .inf .icons .social .fa { padding-top: 14px } .footer1 .inf .icons .social a:link { color: #FFFFFF; } .footer1 .inf .icons .social a:hover { color: #800080; background-color: #FFFFFF; } .footer1 .inf .icons .social a:active { color: #800080; } .footer2 { background-color: #800080; text-align: center; padding: 22px 0 22px 0; box-shadow: 0px 0px 6px 1px #696969; } @media (min-width: 40em) { .footer1 .inf { float: left; width: 50%; text-align: center; } } @media (min-width: 60em) { .header .navigation .menu { display: none; } .header img { margin: 0; } .nav-closed { position: fixed; top: 21.5px; right: 5%; width: 440px; padding: 0; color: #A9A9A9; margin: 0; background-color: #800080; border: none; height: 69px; display: block; margin-right: auto; margin-left: auto; } .nav-closed .bold { font-weight: bold; font-size: 26px; margin: 0; padding: 0; } .nav-closed .nav-menu li { height: 150%; display: inline-block; padding-top: 8px; } .nav-closed .nav-menu a { display: inline-block; color: #A9A9A9; text-decoration: none; padding: 10px 20px; } .nav-closed .nav-menu a:link { color: #A9A9A9; text-decoration: none; } .nav-closed .nav-menu a:hover { color: #414141; box-shadow: 0px 2px 6px 0px #606060; } .nav-closed .nav-menu a:active { color: #696969; text-decoration: none; background-color: #F4F3F3; } .sign { display: inline-block; font-size: 4rem; } .short-line-white { display: none; } .long-line-white { width: 500px; height: 6px; color:#FFFFFF; background: #FFFFFF; border: none; display: inline-block; } .sign-box { width: 100%; margin-bottom: 50px; text-align: center; } .main-article .main-text #contact { width: 100%; display: inline-block; } .main-article .main-text #contact .forms { width: 40%; float: left; padding-left: 40px; } .main-article .main-text #contact .form-text { width: 40%; float: right; padding-right: 40px; } .main-article .main-text #portfolio .img-responsive { max-width: 40%; padding: 10px; text-align: center; display: inline-block; text-align: center; vertical-align: top; } .scrollup { display: none; }
}
@media (min-width: 70em) { .header { padding-left: 5%; padding-right: 5%; } .main-article .main-text { min-width: 80%; max-width: 90%; margin-right: auto; margin-left: auto; } .main-article .main-text #about { display: inline-block; text-align: center; padding: 0; margin: 0; width: 100%; } .main-article .main-text .about-text { width: 60%; margin: 0; padding: 50px 0; display: inline-block; text-align: right; } .main-article .main-text .about-text h2, .main-article .main-text .about-text p { text-align: right !important; } .main-article .main-text .about-picture { width: 30%; margin: 0; padding: 50px 0; display: inline-block; } .main-article .main-text .about-picture img { vertical-align: 100%; }
}

Exercise - Build a Tribute Page - Script Codes JS Codes

var menu = document.querySelector(".menu");
menu.addEventListener("click", function() {	document.querySelector(".nav-closed").classList.toggle("nav-opened");
}, false);
var menu = document.querySelector(".menu");
menu.addEventListener("click", function() {	document.querySelector(".menu").classList.toggle("menu-opened");
}, false);
Exercise - Build a Tribute Page - Script Codes
Exercise - Build a Tribute Page - Script Codes
Home Page Home
Developer Roksana
Username roksanaop
Uploaded November 22, 2022
Rating 3
Size 5,463 Kb
Views 18,216
Do you need developer help for Exercise - Build a Tribute Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Roksana (roksanaop) Script Codes
Name
Build a Pomodoro Clock
Build a Wikipedia Viewer - FCC
Use the Twitchtv JSON API
Exercise - Build a Random Quote Machine
Weather App
Built a Tribute Page
Build a JavaScript Calculator
Build a Tic Tac Toe Game
Image Processing
Build a Simon Game
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!