A Pen by Alex Coven
How do I make an a pen by alex coven?
What is a a pen by alex coven? How do you make a a pen by alex coven? This script and codes were developed by Alex Coven on 11 August 2022, Thursday.
A Pen by Alex Coven - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Alex Coven</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mob_btn"> <button> <div></div> <div></div> <div></div> </button>
</div>
<div class="navigation"> <div class="nav-menu"> <ul> <li> <a href="#">home</a> </li> <li> <a href="#">about</a> </li> <li> <a href="#">services</a> </li> <li> <a href="#">contact</a> </li> </ul> </div> <div class="bottom-angle"> </div>
</div>
<div class="header"> <div class="container"> <div class="logo"> <img src="http://i.imgur.com/p6YieSn.jpg"> <img class="hideonmob" src="http://i.imgur.com/5n4LqmP.jpg"> </div> </div> <div class="bottom-angle"> </div>
</div>
<div class="hero">
<div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Alex Coven - Script Codes CSS Codes
.navigation .bottom-angle { margin-top:-20px; border-color: #fe4540 transparent;
}
.top-angle, .bottom-angle { width: 0; height: 0; border-color: rgba(255, 255, 255, 0) #f8f8f8; border-style: solid solid solid dashed; border-width: 400px 0 0 0; margin-top: -200px;
border-right-width: 2666px; border-top-width: 285px;
}
.top-angle, .bottom-angle { border-color: #fff transparent;
}
.hero { background:url('http://pgire.com/wp-content/themes/pgi-theme/images/commercial.jpg'); background-size:cover; width:100%; height:400px; margin-top:-100px;
}
body { margin:0; padding:0;
}
.logo img { display:block; width:150px;
}
.navigation { display:none; z-index:21; position:fixed; width:100%; height:auto;
}
.nav-menu { position: absolute; background:#fe4540;
}
button div:nth-child(1) { top: 0px;
}
button div:nth-child(2) { top: 8px;
}
button div:nth-child(3) { top: 16px;
}
html { padding:0; margin:0; -webkit-font-smoothing: subpixel-antialiased;
}
.header { z-index:20; position:relative;
}
.container { width:100%; padding:20px; box-sizing:border-box;
}
button { position: fixed; z-index:25; top: 20px; right: 20px; width: 30px; height: 30px; transition: all 300ms cubic-bezier(.61, .01, .42, 1); cursor: pointer; background: transparent; border: 0px;
}
button div { height: 0px; border: 1.5px solid #fe4540; width: 22px; display: block; position: absolute; transition: all 300ms cubic-bezier(.61, .01, .42, 1); background:#fff;
}
button:hover { transition-delay: 100ms; transform: scale(1.1);
}
A Pen by Alex Coven - Script Codes JS Codes
function showMobileMenu(){ var mobileVis = jQuery('.navigation').css('display'); if(mobileVis == "none"){ jQuery('.navigation').slideDown('slow'); $('.mob_btn button').toggleClass("mob_open"); $('button div').css('border',' 1.5px solid #fff'); } else{ jQuery('.navigation').slideUp('slow'); $('.mob_btn button').toggleClass("mob_open"); $('button div').css('border',' 1.5px solid #fe4540'); }
};
jQuery('.mob_btn button').click(function(){ showMobileMenu(); return false; });
Developer | Alex Coven |
Username | alcoven |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,569 Kb |
Views | 56,672 |
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!
Name | Size |
For Brian | 2,058 Kb |
Gooey Menu CSS no SVG | 3,719 Kb |
Word randomize and replace. | 2,221 Kb |
Atomic Hamburger Menu CSS | 3,301 Kb |
Buildings Menu | 1,652 Kb |
Hamburger to atom menu CSS | 2,353 Kb |
CSS Heart to X WIP | 1,625 Kb |
Charging Battery CSS | 2,002 Kb |
Squid Swimming Spinning SVG Animation | 4,005 Kb |
Tazo Assets | 2,403 Kb |
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!
Name | Username | Size |
Map Controls | Iliadraznin | 3,721 Kb |
Background Images | Jooonebug | 2,100 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
Main page display | BarryKe | 4,562 Kb |
Ghost | Mghayour | 11,738 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!