FrontEnd Homework

Developer
M&M
Size
9,136 Kb
Views
18,216
  1. FrontEnd Homework Previews
  2. FrontEnd Homework HTML Codes
  3. FrontEnd Homework CSS Codes
  4. FrontEnd Homework JS Codes

How do I make an frontend homework?

What is a frontend homework? How do you make a frontend homework? This script and codes were developed by M&M on 21 November 2022, Monday.

FrontEnd Homework Previews
IQ Test

FrontEnd Homework - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FrontEnd Homework</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta charset="utf-8">
<head>	<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link href='https://fonts.googleapis.com/css?family=Poppins:200,800' rel='stylesheet' type='text/css'>
</head>
<!---Header Section---->
<header> <div class="top"> <div id="usd" class="fa fa-sort-desc" aria-hidden="true">USD</div> <div class="divid"></div> <div id="english" class="fa fa-user" aria-hidden="true">English</div> <div class="divid"></div> <div id="help" class="fa fa-user" aria-hidden="true">Help</div> <div id="menu-icon" class="fa fa-bars" aria-hidden="true"></div> <div id="register" class="fa fa-lock" aria-hidden="true">Register</div> <div id="login" class="fa fa-user" aria-hidden="true">Login</div>
</div> <div class="logo"> <div id="nr" class="fa fa-lock">2300 - 3560 - 222</div> <div class="logo-icon"></div> <div id="checkout"> <div id="basket" class="fa fa-shopping-basket"></div> <div id="items-number"></div> </div> </div> <div class ="menu"> <div id="left-menu"> <div id="category" class=fa>Select a category</div> <form class="form-wrapper"> <input type="search" id="search" placeholder="Search products...." required> <input type="submit" value="" id="submit" class="fa" aria-hidden="true">
</form> </div> <nav> <ul class='dropdown-menu'> <li><a class='dropdown-item' href="">HOME</a> <ul class="hidden-dropdown">	<li><a href="">HOME#1</a></li>	<li><a href="">HOME#2</a></li>	<li><a href="">HOME#3</a></li>	<li><a href="">HOME#4</a></li>	</ul> </li> <li><a class='dropdown-item' href="">FURNITURE</a> </li> <li><a class='dropdown-item' href="">CHAIR</a> </li> <li><a class='dropdown-item' href="">CHAIR</a> </li> <li><a class='dropdown-item' href="">SOFA</a> </li> <li><a class='dropdown-item' href="">BEDROOM</a> </li> <li><a class='dropdown-item' href="">BLOG</a> </li> </ul> </nav> </div>
</header>
<div class="social1">
</div>
<div class="slider-deals"> <div class="hot-deals"> <div> <div class="hot-deals-top">HOT DEALS <li></li> <li></li> <li></li> </div> <div id="add-to-cart" class="fa fa-shopping-basket">ADD TO CART </div><div id="spancolor"> <span></span> <span></span> <span></span> <span></span></div>
</div>
<li id="product-title">Aenean Ru Bristique</li> <div id="star" class="fa fa-star" aria-hidden="true"></div> <div id="star" class="fa fa-star" aria-hidden="true"></div> <div id="star" class="fa fa-star-o" aria-hidden="true"></div> <div id="star" class="fa fa-star-o" aria-hidden="true"></div> <div id="star" class="fa fa-star-o" aria-hidden="true"></div>
<li id="line"></li>
<li id="line1"></li> <div class="ico"> <div id="ico" class="fa fa-eye" aria-hidden="true"></div> <div id="ico" class="fa fa-heart-o" aria-hidden="true"></div> <div id="ico" class="fa fa-exchange" aria-hidden="true"></div> <div id="ico" class="fa fa-exchange" aria-hidden="true"><strike>$350.00</strike></div> <div id="ico" class="fa fa-star" aria-hidden="true">$300.00</div> </div></div> <div class="slides-deals"> <div class="slides-deals-content"> <div class="carousel-wrapper" id="products3"> <ul class="carousel-inner clearfix"> <li class="item"> <p class="promo">INDOOR <b>FURNITURE</b></p> <p class="promo1">save up to 50% of all furniture</p> <input type="button" value="SHOP NOW" id="button"> </li> <li class="item"> <p class="promo">OUTDOOR <b>FURNITURE</b></p> <p class="promo1">save up to 50% of all furniture</p> <input type="button" value="SHOP NOW" id="button"> </li> <li class="item"> <p class="promo">GREEN-STYX SOFA</p> <p class="promo1">50% discount</p> <input type="button" value="SHOP NOW" id="button"> </li> <li class="item"> <p class="promo">"PURPLE DECO" - BEDROOM</p> <p class="promo1">50% discount to all "purple deco" products</p> <input type="button" value="SHOP NOW" id="button"> </li> </ul> <a href="#" class="fa carousel-left"> </a> <a href="#" class="fa carousel-right"></a> </div> </div> <div class="slides-deals-buttons"> <div id="next" class="fa fa-angle-right" aria-hidden="true"></div> <div id="prev" class="fa fa-angle-left" aria-hidden="true"></div> </div> </div> <div class="info-deals"> <div id="info-deals-1"> <ul id="fun">
<div class="circle"> <i class="fa fa-truck" aria-hidden="true" id="icon"></i> </div>
</ul> <p id="shipping"><b>FREE SHIPPING</b></p> <p id="shipping">ALL ORDERS</p> </div> <div id="info-deals-2"> <ul id="fun">
<div class="circle"> <i class="fa fa-headphones" aria-hidden="true" id="icon"></i> </div>
</ul> <p id="shipping"><b>24/7 CUSTOMER</b></p> <p id="shipping">SUPPORT</p> </div> <div id="info-deals-3"> <ul id="fun">
<div class="circle"> <i class="fa fa-reply-all" aria-hidden="true" id="icon"></i> </div>
</ul> <p id="shipping"><b>MONEY BACK</b></p> <p id="shipping">GARANTEE</p> </div> <div id="info-deals-4"> <ul id="fun">
<div class="circle"> <i class="fa fa-money" aria-hidden="true" id="icon"></i> </div>
</ul> <p id="shipping"><b>MEMBER DISCOUNT</b></p> <p id="shipping">FIRST ORDER</p> </div> </div>
</div>
<div class="ads"> <div class="subblock"> <p>GUEST ROOM</p> <p>SOFA</p> <p>-20%</p> </div> <div class="subblock1"> <p><b>OFFICE</b> CHAIR</p> <p>COLLECTION</p> <p>$200.00</p> </div> <div class="subblock2"> <p><b>OFFICE</b> CHAIR</p> <p>COLLECTION</p> <p>$200.00</p> </div>
</div>
<!---Login Form---->
<article id="login-form">	<div class="login"> <a href="#" class="fa fa-times" aria-hidden="true" id="x"></a> <form>
<div id="imglogo"></div> <p id="userinput">username</p> <input type="text" class="text" name="username" id="username" > <p id="passinput">password</p> <input type="password" class="text" name="password" id="password"> <br> <input type="checkbox" id="checkbox-1-1" class="custom-checkbox" /> <label for="checkbox-1-1" id="keep">Keep me Signed in</label> <button class="signin"> Sign In </button> <a href="#" id="forgot">Forgot Password?</a> </form>
</div>	</article>
<!---Sort and filter---->
<footer>
<ul>MY ACCOUNT
<a href="#">About us</a>
<a href="#">Privacy</a>
<a href="#">Conditions</a>
<a href="#">Online support</a> </ul> <ul>INFORMATION <a href="#">About us</a>
<a href="#">Privacy</a>
<a href="#">Conditions</a>
<a href="#">Online support</a> </ul>
<ul>OFFERS <a href="#">About us</a>
<a href="#">Privacy</a>
<a href="#">Conditions</a>
<a href="#">Online support</a> </ul>
<ul>ORDERS <a href="#">About us</a>
<a href="#">Privacy</a>
<a href="#">Conditions</a>
<a href="#">Online support</a>
<div class="orders"></div> </ul>
</footer>
<div class="social"> <a href="#">©Copyright 2016 Bazar | All Rights Reserved</a> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-youtube" aria-hidden="true"></i> <i class="fa fa-linkedin" aria-hidden="true"></i> <i class="fa fa-pinterest" aria-hidden="true"></i> <i class="fa fa-google-plus" aria-hidden="true"></i>
</div>
<!---for clone
<div class="block"> <div class="subblock"></div> <div class="subblock1"></div> <div class="subblock2"></div>
</div>---> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FrontEnd Homework - Script Codes CSS Codes

body { margin: 0; padding: 0; font: 200 'Poppins'; width: 1920px;
}
header { width: 100%; height: 282px; background: #333;
}
.second-line { width: 100%; height: 144px; background: #333;
}
#phone-number { width: 200px; height: 144px; background: white; text-align: center; font-size: 18px; cursor: pointer;
}
#phone-number:before { content: "\f10b"; vertical-align: middle; justify-content: middle; padding: 5px; font-size: 48px; color: orange;
}
.third-line { width: 100%; height: 84px; background: #a99;
}
#usd,#english,#help,#login,#register,#menu-icon{ color:white; cursor: pointer;
}
#login,#register,#menu-icon { float:right; vertical-align: middle; margin-top: 13px; margin-right:35px;
}
#login:before,#register:before{ padding-right:10px;
}
#menu-icon { margin-right: 390px
}
#usd,#english,#help,.divid { float: left; vertical-align: middle; margin-top: 13px; margin-right:10px;
}
#usd:before,#english:before,#help:before{ content:"";
}
#usd:after,#english:after,#help:after
{ content:"\f0dd"; vertical-align: bottom; font-size: 20px; margin-left:10px;
}
#usd { margin-left: 390px;
}
.divid { display: inline-block; vertical-align: middle; background: #fff; width: 1px; height : 20px; margin-top: 15.5px;
}
.top { background: #434343; height: 54px; width: 100%; text-align: center;
}
.top:before { content: ""; display: inline-block; vertical-align: middle; height: 100%;
}
#nr { display: inline-block; vertical-align: middle; height : 50px; color: #fff; font-size: 18px; letter-spacing: 2px; margin-top: 50px; margin-left: 390px; float:left; font-weight: 600; padding-top: 10px;
}
#nr:before { content: "\f10b"; vertical-align: middle; justify-content: middle; padding: 5px; font-size: 30px; color: #d58e32; margin-left: -5px; margin-right: 18px;
}
.logo-icon { display: inline-block; vertical-align: middle; width: 165px; height : 77px; background-image: url("https://i.gyazo.com/f15e2f379afab7c2e2f44988a52ef683.png"); margin-right: 110px;
}
#checkout { display: inline-block; vertical-align: middle; background: #d58e32; width: 50px; height: 50px; float:right; margin-top: 47px; margin-right: 410px; border-radius: 5px
}
#checkout:after {
content: "";
font-size: 50px;
vertical-align: middle;
margin-top: -5px;
}
#items-number { display: inline-block; width: 20px; height: 20px; background: #363636; border-radius: 100%; margin-top: -10px; color: #fff; margin-right: -25px;
}
#items-number:before{ color: #fff; content:"0"; font-size: 13px;
}
#basket { color: #fff; font-size: 18px;
}
.logo { background: #363636; height: 144px; width: 100%; text-align: center;
}
.logo:before { content: ""; display: inline-block; vertical-align: middle; height: 100%;
}
.menu { height: 85px; background: #fff; box-shadow: 0px 2px 22px 0px rgba(42,42,42,1);
}
ul {
margin: 0;
padding: 0;
text-align: right;
margin-right: 390px;
font: 400 14px 'Poppins';
margin-right: 377.5px;
}
li {
display: inline-block;
margin: 0;
padding: 0;
line-height: 85px;
cursor: pointer;
margin-left: 12.5px;
margin-right: 12.5px;
}
.menu li:hover{ background: #d58e32; color: white; padding-left: 15px; padding-right: 15px; border-top:; box-shadow: inset 0px 4px 0px 0px rgba(42,42,42,1);
}
.dropdown-menu li {	position: relative;
}
.dropdown-item {
text-decoration: none; color: #333;
}
.hidden-dropdown {	display: none;	position: absolute; z-index: 9999; background: #333;
}
.hidden-dropdown a { color: #fff; text-decoration: none; line-height: 10px; margin: 0; padding: 0;
}
.hidden-dropdown li { line-height: 40px; margin:0; padding:0; padding: 5px; padding-left: 20px; padding-right: 20px;
}
.hidden-dropdown li:hover{ background: orange;
}
#left-menu { width: 500px; height: 47px; position: absolute; vertical-align: middle; margin-top: 20px; margin-left: 390px;
}
#category { font: 14px ; font-weight: normal; width: 211px; line-height: 45px; text-align: center; cursor: pointer; border: 1px solid; position:absolute;
}
#category:before { content: "\f0ca"; color: #d58e32; font-size: 25px; float: left; margin-left: 15px;
}
#category:after { content: "\f0dd"; float: right; margin-right: 15px;
}
.form-wrapper{
width: 275px;
height: 45px;
float:right;
vertical-align: middle;
text-align: center;
border: 1px solid;
border-left: 0;
margin-right: 12px;
}
#search { background: transparent; width: 270px; height: 42px; padding-left:10px; border: 0 solid; box-shadow: 0 solid; margin-top: 2px; margin-left: -18px !important;
}
#submit {
margin-left: -40px;
background: transparent;
background-image: url("https://i.gyazo.com/015c70d45aebd22c18e9dfeed41b3437.png");
border: 0px solid;
background-size: cover;
cursor: pointer;
}
/*slideshow*/
.hot-deals { display: inline-block; vertical-align: top; background: #f4f5f7; width: 360px; height : 505px; margin-left: 390px; margin-top: 1px; clear: both; border: solid 1px grey;
}
.hot-deals-top { color:#fff; display:inline-block; width: 360px; height: 50px; line-height: 50px; text-align:left; background:rgba(0,0,0,0.75); font-weight: bold;
}
.hot-deals-top:before {
content: "";
padding-left: 30px;
}
.hot-deals-top li { vertical-align: middle; background: grey; padding: 0; margin: 0; border-radius: 100%; width: 15px; height: 15px; display: inline-block; float:right; line-height: 50px; margin-top: 17px; margin-right: 9px;
}
#add-to-cart { background: #333; color: white; height: 37px; width: 200px; line-height: 37px; text-align: center; display: block; margin-top: 96px; margin-bottom: 76px; margin-left: 80px;
}
#add-to-cart:before { padding-right: 10px;
}
#product-title { width: 360px; line-height: 70px; float: middle; font-weight: bold; font-size: 20px; margin:0; text-align: center;
}
#star {
font-size: 25px;
text-align: center;
width: 20px;
color: #333;
line-height: 1px;
}
#star:before{ margin-left: 120px;
}
#line { width: 320px; height: 2px; background: #333; margin:0; text-align: center; margin-left: 20px; margin-bottom: -9px;
}
#line1 { width: 40px; height: 5px; background: orange; margin:0; text-align: center; margin-bottom: 50px; margin-left: 160px;
}
.ico{ width:360px; height: 37px; text-align: center; margin-top: -35px;
}
#ico{ width: 34px; height: 35px; border: solid 1px #333;
}
#ico:nth-of-type(4):before,
#ico:nth-of-type(5):before{ content: "";
}
#ico:nth-of-type(1),
#ico:nth-of-type(2),
#ico:nth-of-type(3),
#ico:nth-of-type(4),
#ico:nth-of-type(5){ line-height: 34px;
}
#ico:nth-of-type(3){ margin-right: 40px
}
#ico:nth-of-type(4){ border:0; width: 57px;
}
#ico:nth-of-type(5){
width:95px;
background: #333;
color: white; }
.slides-deals { display: inline-block; vertical-align: top; width: 751px; height : 505px; margin-left: 26px; margin-top: 1px;
}
.info-deals { display: inline-block; width: auto; height : 161px; margin-top: 70px; margin-left: 390px;
}
#info-deals-1, #info-deals-2, #info-deals-3, #info-deals-4 { width: 258.3px; height : 119px; background: white; display: inline-block; border: 1px solid #777; text-align: center; vertical-align: top;
}
#info-deals-2, #info-deals-3, #info-deals-4 { margin-left: 29px;
}
#info-deals-1 {
cursor: pointer;
}
.circle { width: 70px; height: 70px; background:transparent; border-radius: 100%; border: 1px solid #777;
}
.circle:hover { border: 1px solid #d58e32;
}
#icon {
line-height: 70px;
font-size: 25px;
vertical-align:middle;
cursor: pointer;
}
#icon:before{
border-radius: 50%;
border: solid 1px #777;
padding: 14px;
}
#icon:hover:before{
background: #d58e32;
border: solid 0px #d58e32;
color: white;
}
#fun { background: white; text-align: center; width: 73px; height: 73px; vertical-align: middle; margin-left: 92.6px; margin-top: -36.5px; position: relative;
}
/********************HOT-DEALS************************/
/*******************COUNTDOWN*************************/
span{ margin-left: 20px !important; padding-top: 10px; vertical-align: middle; font-size:19px; color:#fff; display:inline-block; width: 60px; height: 50px; border-radius:120px; text-align:center; background:rgba(0,0,0,0.75);
}
span:after{ font-size:12px; display:block; opacity:.8
}
span:before{ margin-top: 10px; content: "";
}
span:nth-of-type(1):after{content:"DAYS"}
span:nth-of-type(2):after{content:"HRS"}
span:nth-of-type(3):after{content:"MINS"}
span:nth-of-type(4):after{content:"SECS"}
.slides-deals-content { height: 466px; width: 751px; background-size: cover; display: inline-block; margin-bottom: -10px;
}
.slides-deals-buttons { height: 39px; width: 751px; background: green; display: inline-block; vertical-align: bottom; margin-top: 10px; display: none;
}
.promo{ vertical-align: top; width: 751px; height: 214px; color: white; background-color:rgba(0, 0, 0, 0.8); text-align:center; display: inline-block; line-height: 214px; margin-top: 145px; font-size: 49px;
}
.promo1 { color: white; text-align:center; margin-top: -160px; text-transform: uppercase; font-size: 20px;
}
.carousel-wrapper { width: 751px; height: 505px; overflow: hidden; position: absolute;
}
.carousel-inner { height: 466px; width: 761px; position: absolute; transition: all 1s; text-align: center; border: 0;
}
.carousel-inner .item { height: 466px; width: 751px !important; float: left; list-style: none; text-align: center; margin: 0; border: 0;
}
.item:nth-child(1) {
background-size: cover;
background-image: url("https://www.patioproductions.com/images/outdoor-furniture-indoors-kids.jpg");
}
.item:nth-child(2) {
background-size: cover;
background-image: url("http://industrystandarddesign.com/wp-content/uploads/2015/04/contemporary-outdoor-furniture.jpg");
}
.item:nth-child(3) {
background-size: cover;
background-image: url("https://s31.postimg.org/8oo9kxtwb/soft_green_sofa.jpg");
}
.item:nth-child(4) {
background-size: cover;
background-image: url("http://fashionretailnews.com/I/2016/06/modern-new-style-bedroom-design-home-modern-interior-designs-2016-also-download-buttons-bedroom-photo-bedroom-style.jpg");
}
.carousel-left, .carousel-right { text-align: center; width: 375.5px; height: 39px; position: absolute; bottom: 0; background: #333; line-height: 38px; color: white; text-decoration: none;
}
.carousel-left:hover, .carousel-right:hover{ background: orange;
}
.carousel-right { right: 0; text-align: center;
}
.carousel-right:after{ content: "\f105"; color:white; line-height: 38px; font-size: 25px;
}
.carousel-left:after{ content: "\f104"; color:white; line-height: 38px; font-size: 25px;
}
#button {
position: absolute;
text-align: center;
margin-top: -18px;
margin-left: -60px;
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
border: 0;
cursor: pointer;
border-radius: 5px
}
#button:hover { background: orange; color: white;
}
.subblock, .subblock1, .subblock2 { margin-left: 5px; margin-right: 5px;
}
.subblock { margin-right: 25px; display: inline-block; vertical-align: middle; background: #555; width: 489px; height : 355px; border: 32px solid #777; text-align: left; color: white; font-size: 18px; font-weight: normal;
}
.subblock p:nth-of-type(1){ font-size: 30px; margin-left: 20px; margin-top: 170px;
}
.subblock p:nth-of-type(2){ font-size: 50px; margin-top: -30px; margin-left: 20px;
}
.subblock p:nth-of-type(3){ font-size: 40px; margin-left: 20px; border: 5px solid #fff; width: 100px; text-align: center; padding: 5px; margin-top: -45px;
}
.subblock1 { display: inline-block; vertical-align: middle; background: #e8edf7; width: 555px; height : 195px; vertical-align: top;
}
.subblock1 p:nth-of-type(1){ font-size: 25px; margin-left: 20px; justify-content: left; text-align: left; margin-left: 180px; margin-top: 40px;
}
.subblock1 p:nth-of-type(2){ font-size: 17px; margin-left: 20px; justify-content: left; text-align: left; font-weight: bold; margin-top: -20px; margin-left: 180px;
}
.subblock1 p:nth-of-type(3){ font-size: 17px; margin-left: 20px; justify-content: left; text-align: left; font-weight: bold; color: orange; font-size: 35px; margin-top: -10px; margin-left: 180px;
}
.subblock2 p:nth-of-type(1){ font-size: 25px; margin-left: 20px; justify-content: left; text-align: right; margin-left: 180px; margin-top: 40px; margin-right: 20px;
}
.subblock2 p:nth-of-type(2){ font-size: 17px; margin-left: 20px; justify-content: left; text-align: right; font-weight: bold; margin-top: -20px; margin-right: 20px;
}
.subblock2 p:nth-of-type(3){ font-size: 17px; margin-left: 20px; justify-content: left; text-align: right; font-weight: bold; color: orange; font-size: 35px; margin-top: -10px; margin-right: 20px;
}
.subblock2 { display: inline-block; background: #fbf3f7; width: 555px; height : 195px; vertical-align: bottom; margin-left: -565px;
}
.ads { height : 419px; background-clip: padding-box; width: 100%; text-align: center;
}
.ads:before { content: ""; display: inline-block; vertical-align: middle; height: 100%;
}
#x { float:right; margin:0; padding:0; text-decoration: none; color: rgba(255, 255, 255, 0.4); font-size: 30px; margin-right: -50px; padding: 5px;
}
.signin { background-color: #d3d3d3; font-family: 'Montserrat', sans-serif; color: #fff; font-size: 14px; letter-spacing: 1px;
}
#imglogo{ width: 100%; height: 80px; background-image: url("https://i.gyazo.com/f15e2f379afab7c2e2f44988a52ef683.png"); background-repeat: no-repeat; background-position: center; margin-bottom: -70px;
}
#login-form{ width:100%; height:100%; font-family: 'Lato', sans-serif; position: absolute; display: table; top: -300%; text-align: center; z-index: 99999; background:#333;
}
#username { margin-top: 150px; color: white; font-weight: bold; font-size: 10px;
}
.login { position: relative; height: 500px; width: 405px; margin: auto; padding-left: 60px; padding-right: 60px; background: url(http://bestanimations.com/Animals/Birds/Penguins/animated-penguin-gif-5.gif) no-repeat bottom right; background-size: 20%; box-shadow: inset -53px -35px 300px 300px rgba(125,113,91,0.1);
}
#username #password { font-size: 15px; opacity: 0.4; transition: all 0.5s ease-in-out;
}
#username:focus, #password:focus{ box-shadow: 0px 4px 35px -5px orange; cursor: pointer;
}
#userinput{
margin-top: 120px; text-align: left; position: absolute; color: #fff; padding-left: 10px;
}
#passinput{ text-align: left; position: absolute; color: #fff; padding-left: 10px; margin-top: 20px;
}
#keep{ color: orange;
}
.text { border: none; width: 89%; padding: 10px 20px; display: block; height: 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.2); border: 2px solid #777; overflow: hidden; margin-top: 50px; transition: all 0.5s ease-in-out; color: white;
}
.text:focus { outline: 0; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 20px; background: rgba(0, 0, 0, 0); color: white;
}
.text:focus + span { opacity: 0.9; color: orange;
}
.text input { display: inline-block; padding-top: 20px; font-size: 14px;
}
.custom-checkbox { display: inline-block; position: relative; top: 2px;
}
.signin { background-color: orange; color: #FFF; width: 100%; display: block; height: 39px; border-radius: 20px; margin-top: 20px; transition: all 0.5s ease-in-out; border: none; text-transform: uppercase; margin-bottom: -100px;
}
.signin:hover { background: #4082f5; box-shadow: 0px 4px 35px -5px #4082f5; cursor: pointer;
}
.signin:focus { outline: none;
}
#forgot { text-align: center; display: block; top: 120px; position: relative; text-decoration: none; color: rgba(255, 255, 255, 1);
}
/********FOOTER*******/
footer { height: 334px; width: 100%; background: #363636;
}
footer ul:nth-of-type(1),
footer ul:nth-of-type(2),
footer ul:nth-of-type(3),
footer ul:nth-of-type(4){ color: white; margin:0; padding:0; width: 250px; height: 250px; display: inline-block; vertical-align: middle; font-size: 22px; font-weight: bold; text-align: left; margin-top: 62px; line-height: 22px; margin-right: 40px;
}
footer ul:nth-of-type(1) { margin-left: 390px;
}
footer ul a {
list-style: none;
font-size: 18px;
font-weight: normal;
color:#999;
display: block;
text-decoration: none;
padding-top: 5px;
}
footer ul a:nth-of-type(1) { margin-top: 36px;
}
.orders { width: 250px; height: 30px; background-image: url("https://dealsallyear.com/skin/frontend/default/galatitanshop/images/cc_icons.png"); background-repeat: no-repeat; background-size: cover; background-position: center; margin-top: 20px; margin-left: -5px;
}
.social { height: 95px; width: 100%; background: #191919; margin:0; padding:0;
}
.social a { text-decoration: none; color: #999; margin-left: 390px; line-height: 95px;
}
.social i { color: grey; margin-right: 8px; float: right; line-height: 95px;
}
.social i:nth-of-type(1){ margin-right: 20%;
}
.social i:hover {
color: orange;
cursor: pointer;
}
/***********dropdown*******/
/*
.subblock, .subblock1, .subblock2 { margin-left: 5px; margin-right: 5px;
}
.subblock { display: inline-block; vertical-align: middle; background: #b0b8b9; width: 60px; height : 5px;
}
.subblock1 { display: inline-block; vertical-align: middle; background: #e2534b; width: 60px; height : 5px;
}
.subblock2 { display: inline-block; vertical-align: middle; background: #b0b8b9; width: 60px; height : 5px;
}
.block { background: #f3f3f3; height: 50px; background-clip: padding-box; width: 100%; margin-top: 187px; text-align: center;
}
.block:before { content: ""; display: inline-block; vertical-align: middle; height: 100%;
}
/*

FrontEnd Homework - Script Codes JS Codes

// COUNTDOWN///
var s = document.getElementsByTagName('span');
var oneDay = 24 * 60 * 60 * 1000;
var firstDate = new Date("AUG 30, 2016 09:14:00");var secondDate = new Date();
var days = (firstDate.getTime() - secondDate.getTime()) / (oneDay);
var hrs = (days - Math.floor(days)) * 24;
var min = (hrs - Math.floor(hrs)) * 60;
s[0].innerHTML = Math.floor(days);
s[1].innerHTML = Math.floor(hrs);
s[2].innerHTML = Math.floor(min);
s[3].innerHTML = Math.floor((min - Math.floor(min)) * 60);
var i = setInterval(function() {n()}, 1000)
function f(d, x) {s[d].innerHTML = x;s[d - 1].innerHTML = Number(s[d - 1].innerHTML) - 1;}
function n() {s[3].innerHTML = Number(s[3].innerHTML) - 1;
if (s[3].innerHTML == -1) {f(3, 59)
if (s[2].innerHTML == -1) {f(2, 59)
if (s[1].innerHTML == -1) {f(1, 23)
}}}if(s[0].innerHTML <= -1) {clearInterval(i);document.getElementsByTagName('div')[0].innerHTML='<h2>EXPIRED</h2>'}}
/////slider/////
/***** * Carousel control */
var Carousel = function (elId, mode) { var wrapper = document.getElementById(elId); var innerEl = wrapper.getElementsByClassName('carousel-inner')[0]; var leftButton = wrapper.getElementsByClassName('carousel-left')[0]; var rightButton = wrapper.getElementsByClassName('carousel-right')[0]; var items = wrapper.getElementsByClassName('item'); this.carouselSize = items.length; this.itemWidth = null; this.itemOuterWidth = null; this.currentStep = 0; this.itemsAtOnce = 3; this.minItemWidth = 200; this.position = innerEl.style; this.mode = mode; this.init = function (mode) { this.itemsAtOnce = mode; this.calcWidth(wrapper, innerEl, items); cb_addEventListener(leftButton, 'click', this.goLeft.bind(this)); cb_addEventListener(rightButton, 'click', this.goRight.bind(this)); cb_addEventListener(window, 'resize', this.calcWidth.bind(this, wrapper, innerEl, items)); }; return this.init(mode);
};
Carousel.prototype = { goLeft: function(e) { e.preventDefault(); if (this.currentStep) { --this.currentStep; } else { this.currentStep = this.carouselSize - this.itemsAtOnce; } this.makeStep(this.currentStep); return false; }, goRight: function(e) { e.preventDefault(); if (this.currentStep < (this.carouselSize - this.itemsAtOnce)) { ++this.currentStep; } else { this.currentStep = 0; } this.makeStep(this.currentStep); return false; }, makeStep: function(step) { this.position.left = -(this.itemOuterWidth * step) + 'px'; }, calcWidth: function(wrapper, innerEl, items) { this.beResponsive(); var itemStyle = window.getComputedStyle(items[0]); var innerElStyle = innerEl.style; var carouselLength = this.carouselSize; var wrapWidth = wrapper.offsetWidth - parseInt(itemStyle.marginRight, 10) * (this.itemsAtOnce + 1); innerElStyle.display = 'none'; this.itemWidth = wrapWidth / this.itemsAtOnce; this.itemOuterWidth = this.itemWidth + parseInt(itemStyle.marginRight, 10); for (i = 0; i < carouselLength; i++) { items[i].style.width = this.itemWidth + 'px'; } innerElStyle.width = this.itemOuterWidth * this.carouselSize + 'px'; innerElStyle.display = 'block'; }, beResponsive: function() { var winWidth = window.innerWidth; if (winWidth >= 650 && winWidth < 950 && this.itemsAtOnce >= 2) { this.itemsAtOnce = 2; } else if (winWidth < 650) { this.itemsAtOnce = 1; } else { this.itemsAtOnce = this.mode; } }
}
/**
* Cross-browser Event Listener
**/
function cb_addEventListener(obj, evt, fnc) { if (obj && obj.addEventListener) { obj.addEventListener(evt, fnc, false); return true; } else if (obj && obj.attachEvent) { return obj.attachEvent('on' + evt, fnc); } return false;
}
//Initializing carousel
if (document.getElementById('products3')) { var productsCarousel = new Carousel('products3', 1);
}
//DROPDOWN MENU
$(".dropdown-item").hover(function() { $( ".hidden-dropdown" ).show( "fast" );
});
$(window).on('click', function() {	$('.hidden-dropdown').hide( "fast" );	});
$(function(){ $(".hidden-dropdown").hide();
});
////////Login///////////
$( document ).ready(function() {	$('#login').click(function(){	$('#login-form').animate({top:'0%'},200);	});
$(window).on('scroll', function() {	$('#login-form').animate({top:'-300%'},10);	}); $('#x').click(function(){	$('#login-form').animate({top:'-300%',},200);	});
});
FrontEnd Homework - Script Codes
FrontEnd Homework - Script Codes
Home Page Home
Developer M&M
Username shuttershades
Uploaded November 21, 2022
Rating 3
Size 9,136 Kb
Views 18,216
Do you need developer help for FrontEnd Homework?

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!

M&M (shuttershades) Script Codes
Name
Bullet Force Hack for ios and android
Live Stream Embed Silent
Tema JS Tooltip
NBA 2k17 Locker Codes 2017
Generator
Create amazing SEO content 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!