A Pen by Chris Wachtman

Developer
Chris Wachtman
Size
5,171 Kb
Views
24,288
  1. A Pen by Chris Wachtman Previews
  2. A Pen by Chris Wachtman HTML Codes
  3. A Pen by Chris Wachtman CSS Codes
  4. A Pen by Chris Wachtman JS Codes

How do I make an a pen by chris wachtman?

What is a a pen by chris wachtman? How do you make a a pen by chris wachtman? This script and codes were developed by Chris Wachtman on 17 October 2022, Monday.

A Pen by Chris Wachtman Previews
IQ Test

A Pen by Chris Wachtman - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Chris Wachtman</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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>
<button class="fa" id="infobutton">&#xf129</button>
<button class="fa" id="searchbutton">&#xf002</button>
<div class="toppane"> <h1>WEBSITE</h1>
</div>
<div class="leftpane"> <ul class="social"> <li><a class="fa" href="/tagged/parkour">&#xf082</a></li> <li><a class="fa" href="/tagged/cycling">&#xf081</a></li> <li><a class="fa" href="/tagged/parkour">&#xf0d4</a></li> <li><a class="fa" href="/tagged/parkour">&#xf143</a></li> </ul> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus sint nemo laudantium perspiciatis itaque quae quo adipisci beatae inventore repudiandae.</p>
</div>
<div class="rightpane"> <input id="search" type="search" placeholder="Search"/> <ul id="tags"> <li><a href="/tagged/parkour">#parkour</a></li> <li><a href="/tagged/cycling">#cycling</a></li> <li><a href="/tagged/parkour">#web-dev</a></li> <li><a href="/tagged/parkour">#googleglass</a></li> </ul>
</div>
<div id="content"> <article><img src="https://31.media.tumblr.com/83c3d7998522e8f88c065ecdde81a6b2/tumblr_n0776xh1651t7b5qro1_1280.png"/> <h3>Lorem ipsum dolor sit.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat veritatis ratione dolorum assumenda itaque maiores architecto eius aspernatur delectus iusto?</p> </article>
</div>
<div id="pagination"><a class="back fa" href="#">&#xf053</a><span>1</span><a class="next fa" href="#">&#xf054</a></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Chris Wachtman - Script Codes CSS Codes

@font-face { font-family: 'FontAwesome'; src: url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.eot?v=3.2.1"); src: url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
}
.fa { font-family: FontAwesome; -webkit-font-smoothing: antialiased;
}
body { text-align: center;
}
*:focus { outline: none;
}
.toppane { background: #DA4747; position: fixed; top: 0; width: 100%; height: 260px; z-index: 999; color: white;
}
.toppane.scroll { height: 60px; position: fixed;
}
h1 { text-align: center; padding: 0; margin: 0; font-size: 150px; line-height: 260px;
}
#infobutton, #searchbutton { position: fixed; top: 10px; background: none; border: 1px solid white; border-radius: 50%; width: 40px; height: 40px; color: white; font-size: 25px; z-index: 1001;
}
#infobutton:hover, #searchbutton:hover { background: #EE9797; color: #DA4747;
}
#infobutton.pinned, #searchbutton.pinned { background: white; color: #DA4747;
}
#infobutton { left: 10px;
}
#searchbutton { right: 10px;
}
.leftpane, .rightpane { background: #DA4747; position: fixed; width: 240px; height: 100%; top: 0; z-index: 1000; transition: all 0.3s ease; overflow: auto; color: white; text-align: left;
}
.leftpane { left: -240px;
}
.leftpane h2 { padding-left: 60px;
}
.leftpane.open, .leftpane.hover, .leftpane:hover { left: 0px; border-right: 1px solid white;
}
.rightpane { right: -240px;
}
.rightpane.open, .rightpane.hover, .rightpane:hover { right: 0px; border-left: 1px solid white;
}
.social { margin: 0 0 0 50px; padding: 10px; white-space: nowrap; text-align: center;
}
.social li { list-style: none; width: 40px; display: inline-block;
}
.social li a { text-decoration: none; font-size: 40px; color: white;
}
.leftpane p { margin: 10px; font-size: 1.1em;
}
input[type=search] { width: 150px; margin: 13px 10px; height: 20px; border-radius: 6px; border: none; padding: 7px 10px; box-sizing: content-box;
}
#tags { padding: 0; margin: 0; list-style: none;
}
#tags a { border-bottom: 1px solid white; display: block; color: white; text-decoration: none; font-size: 1.2em; padding: 12px;
}
#tags a:hover { background: #EE9797;
}
#content { margin: 300px auto 10px; min-height: 800px; max-width: 600px; text-align: left;
}
#pagination { font-size: 5em; color: #ee9797; border: 1px solid #EE9797; display: inline-block; margin: 300px auto; border-radius: 50px;
}
#pagination a { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-decoration: none; color: #DA4747;
}
#pagination a:hover { background: #EE9797;
}
#pagination a:first-child { border-radius: 50% 0 0 50%;
}
#pagination a:last-child { border-radius: 0 50% 50% 0;
}
article { text-align: center; margin: 20px 0;
}

A Pen by Chris Wachtman - Script Codes JS Codes

$('#infobutton').click(function() { $(this).toggleClass('pinned' ); $('.leftpane').toggleClass('open' );
}).hover(function() { $('.leftpane').toggleClass('hover' );
},function() { $('.leftpane').toggleClass('hover' );
});
$('#searchbutton').click(function() { $(this).toggleClass('pinned' ); $('.rightpane').toggleClass('open' ); if($('.rightpane').hasClass('open')){ $('#search').focus(); }
}).hover(function() { $('.rightpane').toggleClass('hover' );
},function() { $('.rightpane').toggleClass('hover' );
});
$( window ).scroll(function() { var scroll=$(window).scrollTop(); if( scroll > 200){ $( ".toppane" ).addClass('scroll' ); $('h1').css('margin-top', '0px'); $('h1').css('font-size', 40+'px'); $('h1').css('line-height', 60+'px'); $('.toppane').css('height', 60+'px'); }else{ $( ".toppane" ).removeClass('scroll' ); console.log(Math.max(40,150-scroll)); $('h1').css('font-size', Math.max(40,150-scroll)+'px'); $('h1').css('line-height', 260-scroll+'px'); $('.toppane').css('height', 260-scroll+'px'); }
});
A Pen by Chris Wachtman - Script Codes
A Pen by Chris Wachtman - Script Codes
Home Page Home
Developer Chris Wachtman
Username cwacht
Uploaded October 17, 2022
Rating 3
Size 5,171 Kb
Views 24,288
Do you need developer help for A Pen by Chris Wachtman?

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!

Chris Wachtman (cwacht) Script Codes
Name
NASA Responsive Mockup
Icon Orb
CSS Pie Chart
Responsive Grid for Dynamic Layouts
Destiny Weapon Inventory
Personal Webpage Brainstorm
NASA Concept
Dragonboat App
Single Element ChromeCast Icon
What Does the Fox Say Soundboard
Create amazing sales emails 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!