A Pen by NM

Developer
NM
Size
3,805 Kb
Views
20,240
  1. A Pen by NM Previews
  2. A Pen by NM HTML Codes
  3. A Pen by NM CSS Codes
  4. A Pen by NM JS Codes

How do I make an a pen by nm?

What is a a pen by nm? How do you make a a pen by nm? This script and codes were developed by NM on 22 October 2022, Saturday.

A Pen by NM Previews
IQ Test

A Pen by NM - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by NM</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="group"> <div class="inner"> <div id="logotype"><a href="/">Thomas Skou Photography</a></div> <div id="navigation"> <ul> <li><a href="work.php">Work</a></li> <li><a href="info.php">Info</a></li> </ul> </div> </div>
</header>
<section id="hero" class="light"></section>
<section id="modules" data-title="Featured work"> <div class="inner"> <article class="module image w2 p1"> <a href="single-work.php"> <figure><img src="http://www.thomasskou.com/files/gimgs/52_dsf7027finalthomasskou.jpg" class="ri"></figure> </a> </article> <article class="module image w3 p2"> <a href="single-work.php"> <figure><img src="http://www.thomasskou.com/files/gimgs/145_dsf5652.jpg" class="ri"></figure> </a> </article> <article class="module text w2"> <h4>About</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit et lacus ac condimentum. Pellentesque a <a href="#">turpis at nunc</a> dapibus viverra. Nullam ac dictum turpis. Pellentesque convallis facilisis ante, sit amet dapibus purus viverra nec. Integer ut neque non erat imperdiet feugiat.</p> <p>Quisque tristique egestas arcu, eu pretium metus sodales eu. Etiam ullamcorper mattis eros, eu hendrerit metus porttitor at. Morbi at urna vitae nibh varius consequat. Proin rutrum a dolor at volutpat.</p> </article> <article class="module text w2 p3"> <h4>Clients</h4> <p>Etiam, Eros urna, Condimentum, Dignissim, Feugiat, Magna, Proin, Imperdiet, Sagittis, Tristique, Ullamcorper, Curabitur, Sollicitudin, Dapibus, Dondimentum, Aenean, Feugiat, Arcu, Sapien, Amet tristique, Fusce, Dignissim, Lacus, Semper Semper</p> </article> <article class="module text w2 p1"> <h4>Contact</h4> <p>Fusce nec fringilla dolor, ac auctor tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Mauris vitae ornare risus <a href="#">Blink Productions</a></p> </article> </div>
</section>
<footer> <div class="inner"> <div id="title"></div> <div id="scroll">&darr;</div> </div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by NM - Script Codes CSS Codes

html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
/* typography */
html {font-size: 1em;}
body { background-color: white; font-family: 'Libre Baskerville', serif; font-weight: 400; line-height: 1.45; color: #333;
}
p {margin-bottom: 1.3em;}
h1, h2, h3, h4 { margin: 1.414em 0 0.5em; font-weight: inherit; line-height: 1.2;
}
h1 { margin-top: 0; font-size: 2.074em;
}
h2 {font-size: 1.728em;}
h3 {font-size: 1.44em;}
h4 {font-size: 1.2em;}
small, .font_small {font-size: 0.833em;}
/* body */
body { margin: 0;
}
/* images */
figure { margin: 0;
}
img.ri { position: relative; width: 100%; height: auto; display: block;
}
/* links */
a { color: black; text-decoration: none;
}
a:hover { border-bottom: 1px solid black;
}
/* colors */
.light { color: white;
}
.light a { color: white;
}
.light a:hover { border-bottom: 1px solid white;
}
.black { color: black;
}
.black a { color: black;
}
.black a:hover { border-bottom: 1px solid black;
}
/* clear floats */
.group:after { content: ""; display: table; clear: both;
}
/* wrapper */
.inner { position: relative; margin: 0 auto; max-width: 1440px;
}
/* header */
header { position: fixed; top: 0; right: 0; left: 0; z-index: 1;
}
#logotype { float: left; padding: 25px; width: 100%; max-width: 50%;
}
#navigation { float: right; padding: 25px;
}
#navigation ul { list-style-type: none; margin: 0; padding: 0;
}
#navigation ul li { display: inline-block;
}
#navigation ul li + li { margin-left: 10px;
}
/* hero */
#hero { position: relative; height: 100vh; background-image: url(http://thomasskou.com/development/v1/assets/images/hero-1800x1200.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed;
}
#hero .inner { height: 100vh;
}
/* modules */
#modules { padding: 50px 25px;
}
#modules .module { position: relative; background-color: lightgrey;
}
#modules .module + .module { margin-top: 50px;
}
@media (min-width: 768px) { #modules .module.w2 { width: 40%; } #modules .module.w3 { width: 60%; } #modules .module.p1 { margin-left: 20%; } #modules .module.p2 { margin-left: 40%; } #modules .module.p3 { margin-left: 60%; }
}
#modules .module.text p { margin-bottom: 0;
}
/* footer */
footer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1;
}
#title { position: absolute; bottom: 0; left: 0; padding: 25px; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
#scroll { position: absolute; bottom: 0; right: 0; padding: 25px; z-index: 1; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
#scroll.hide { opacity: 0;
}

A Pen by NM - Script Codes JS Codes

$(function() { var headerWaypoint = new Waypoint({ element: document.getElementById('modules'), handler: function(direction) { if(direction == 'down') { $('header').addClass('black'); } else { $('header').removeClass('black'); } }, offset: 25
}); var heroWaypoint = new Waypoint({ element: document.getElementById('hero'), handler: function(direction) { if(direction == 'down') { $('#title').text($('#modules').data('title')); $('#scroll').addClass('black'); $('#scroll').addClass('up'); $('#scroll').html('&uarr;'); } else { $('#title').empty(); $('#scroll').removeClass('black'); $('#scroll').removeClass('up'); $('#scroll').html('&darr;'); } }, offset: -50
}); $("#scroll").click(function(e){ e.preventDefault(); if($(this).hasClass('up')){ $("html,body").animate({ scrollTop: 0 }, 500); } else { var windowHeight = $(window).height(); $("html,body").animate({ scrollTop: windowHeight }, 500); } return false;
}); if($('#hero').length) { if($('#hero').hasClass('light')) { $('header').addClass('light'); $('#scroll').addClass('light'); } }
});
A Pen by NM - Script Codes
A Pen by NM - Script Codes
Home Page Home
Developer NM
Username tokant
Uploaded October 22, 2022
Rating 3
Size 3,805 Kb
Views 20,240
Do you need developer help for A Pen by NM?

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!

NM (tokant) Script Codes
Name
Horisontal scroll site
Google Charts API - Dual Y-axis Line Chart v2
Google Maps Javascript API - Geolocation
Continuous smooth-scrollbar
Google Chart API - Basic Bar Chart
Case
Template V2
Google Chart API - Multi Series Bar Chart
Template 2
Google Chart API - Data from Google Spreadsheet
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!