Charliejwalter.net

Developer
Charlie Walter
Size
4,688 Kb
Views
6,072
  1. Charliejwalter.net Previews
  2. Charliejwalter.net HTML Codes
  3. Charliejwalter.net CSS Codes

How do I make an charliejwalter.net?

Mario inspired navigation system.Visit actual site. What is a charliejwalter.net? How do you make a charliejwalter.net? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.

Charliejwalter.net Previews
IQ Test

Charliejwalter.net - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>charliejwalter.net</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,800,700,600' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">	<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="main"> <h1 class="my-name">Charlie J. Walter</h1> <nav class="main" role='navigation'> <ul> <!--li><a class="i-w-hidden-span selected " href="#game"><i class="fa fa-gamepad"></i> <span>Play!</span></a></li--><!-- --><li><a class="selected i-w-hidden-span" href="#examples"><i class="fa fa-cubes"></i> <span>Examples</span></a></li><!-- --><li><a class="i-w-hidden-span" href="#projects"><i class="fa fa-rocket"></i> <span>Projects</span></a></li><!-- --><li><a class="i-w-hidden-span" href="#about"><i class="fa fa-question"></i><span>About</span></a></li><!-- --><li><a class="i-w-hidden-span" href="#contact"><i class="fa fa-child"></i> <span>Contact</span></a></li> </ul> </nav> <div id="speech-bubble"> <i class="fa fa-caret-square-o-left"></i> <i class="fa fa-caret-square-o-up"></i> <i class="fa fa-caret-square-o-right"></i> or <i class="fa fa-gamepad"></i> </div> <div id="me"></div>
</header>
<aside> <span class="expertise-title">Web app + game developer</span> <ul class="social"> <li> <a target="_blank" href="https://twitter.com/cjonasw"><i class="fa fa-twitter"></i></a> </li> <li> <a target="_blank" href="https://codepen.io/cjonasw"><i class="fa fa-codepen"></i></a> </li> <li> <a target="_blank" href="https://www.linkedin.com/in/charliejwalter"><i class="fa fa-linkedin"></i></a> </li> </ul>
</aside>
<div id="gameboy"> <div id="arrows"> <div class="buttons" id="left"> <i class="fa fa-arrow-left"></i></div> <div class="buttons" id="middle"> </div> <div class="buttons" id="right"> <i class="fa fa-arrow-right"></i></div> </div> <div id="up"> <i class="fa fa-hand-o-up"></i> </div>
</div>
<div id="pageScroller"> <div> <!--div id="game" class="page"> </div--> <div id="examples" class="page"> <h2>Lorem</h2> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> <h2>Ipsum</h2> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> <h2>Dolor</h2> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> </div> <div id="projects" class="page"> <h2>Current</h2> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> <h2>2013</h2> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> <article> <div class="featured-image"> <img src="" alt="" /> </div> <h2>Lorem ipsum dolor sit amet</h2> <span>Consectetur adipisicing elit. Molestias animi quia nobis hic facilis delectus.</span> </article> </div> <div id="about" class="page"> <h1>I'm Charlie...</h1> </div> <div id="contact" class="page"> <form action="" method="post"> <h1>Say hello!</h1> <input name="name" placeholder="Bob" type="text"> <input name="email" placeholder="[email protected]" type="email"> <textarea name="message" placeholder="They took our jobs!" id="" cols="20" rows="3"></textarea> <button class="i-w-hidden-span" value="Send" type="submit"> <span>Send</span> <i class="fa fa-paper-plane"></i> </button> </form> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://charliejwalter.net/scripts/main.js'></script>
</body>
</html>

Charliejwalter.net - Script Codes CSS Codes

body{ background-color: #c55d22; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 300; min-width: 320px;
}
h1{ font-size: 3em;
}
h2{ font-size: 3em; padding-top: 1.5em; padding-bottom: 0.5em;
}
h2:first-child{ padding-top: 0; }
h2:last-child{ padding-bottom: 0; }
/* Thanks chris! */
/* https://css-tricks.com/overriding-the-default-text-selection-color-with-css/ */
::selection { background: white; /* Safari */ color: #c55d22;
}
::-moz-selection { background: white; /* Firefox */ color: #c55d22;
}
h1::selection { background: #c55d22; /* Safari */ color: white;
}
h1::-moz-selection { background: #c55d22; /* Firefox */ color: white;
}
h1.my-name{ right: 0.25em; bottom: 0.25em; margin-top: -1.25em; float: right; color: #c55d22; position: absolute;
}
header.main{ color: #c55d22; background-color: white; overflow: hidden; padding-top: 2em; padding-bottom: 100px; margin-bottom: 0.75em; position: relative; }
aside{ float: right; color: white; margin-right: 2em;
}
.social{ font-size: 1.5em; text-align: right; margin-top: 0.5em; } .social li { display: inline; } .social a{ margin: 0 0.1em; }
nav.main ul{ position: relative; float: left; z-index: 1; } nav.main li{ display: inline-block; position: relative; } nav.main a{ color: inherit; padding: 1em 2em; font-size: 2em; text-decoration: none; display: block; position: relative; } nav.main a.selected{ background-color: #c55d22; color: white; } nav.main a i{ font-size: 1em; } nav.main a span{ text-align: center; position: absolute; top: 0; left: 0; width: 100%; line-height: 3em; }
article,
section{ color: white; padding-left: 240px; padding-right: 1em; margin-bottom: 2em; position: relative; width: 80%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.5; } article .featured-image, section .featured-image{ width: 200px; height: 100%; background: white; display: inline-block; position: absolute; left: 0; top: 0; } article h2{ font-size: 2em; padding: 0.5em 0 0.25em; line-height: 1.25; }
a{ text-decoration: none; color: white;
}
#pageScroller{ width: 100%; overflow: hidden; padding-top: 1em; } #pageScroller > div{ width: 100000px; }
.page{ float: left; width: 1800px; overflow: hidden; margin: 1px; color: white; padding-left: 2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Form elements */
form input,form button,form textarea{ border: 0; padding: 0.5em; font-size: 2em; display: block; font-family: inherit; font-weight: inherit; margin: 1em 0; color: #c55d22; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
button[type=submit]{ background-color: #c55d22; color: white; width: 50%; text-align: right; cursor: pointer; overflow: hidden; position: relative;
}
button[type=submit] span{ position: absolute; right: 0;
}
.i-w-hidden-span span{ opacity: 0; }
@media all and (min-width : 768px) { .i-w-hidden-span:hover i, .i-w-hidden-span.hit i{ opacity: 0; } .i-w-hidden-span:hover span, .i-w-hidden-span.hit span{ opacity: 1; }
}
/* Game aspect */
#me{ background-color: #c55d22; width: 15px; height: 35px; bottom: 100px; right: 400px; opacity: 0; position: absolute; } #me:before{ content: ". ."; color: white; position: absolute; font-size: 8px; font-weight: 900; text-indent: 1px; font-family: arial; } #me:after{ content: ""; display: block; width: 5px; height: 5px; margin-left: 14px; margin-top: -5px; width: 0; height: 0; border-left: 0px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #c55d22; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #me.moving:after{ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-top: -3px; margin-left: 15px; } #me.jumping:after{ transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); margin-top: 0; margin-left: 14px; } #me.falling.moving:after{ transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); margin-top: -6px; margin-left: 14px; } #me.falling:after{ transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-top: -7px; margin-left: 13px; } #me.right{ -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform:matrix(-1, 0, 0, 1, 0, 0); transform: scale3d(-1, 1, 1); }
#speech-bubble{ width: auto; height: 1em; font-size: 18px; margin: 0 auto 20px; background-color: #c55d22; color: white; padding: 0.5em; position: absolute; opacity: 0; right: -99999999px; } #speech-bubble:after{ content: ""; width: 0; height: 0; border-left: 0px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #c55d22; position: absolute; bottom: -7px; left: 0; }
#gameboy{ display: none;
}
@media all and (max-width : 768px) { form input, form button, form textarea{ width: 85%; } article, section{ width: 100%; padding-left: 0; } article .featured-image, section .featured-image{ display: none; } #speech-bubble{ display: none; } h1{ font-size: 2.25em; } header.main{ margin-bottom: 0; padding-top: 0; padding-bottom: 75px; } nav.main a{ font-size: 1.5em; padding: 1em; } #gameboy{ display: block; height: 60px; float: left; margin-left: 20px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-touch-action: none; user-select: none; } #pageScroller{ padding-top: 0; } nav.main a{ font-size: 1.25em; } h1.my-name{ font-size: 1.5em; } aside{ font-size: 0.8em; margin-right: 0.5em; margin-top: 0.5em; } .buttons{ height: 60px; width: 40px; border: 0; display: block; color: white; font-size: 1.75em; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; padding-top: 0.5em; } #middle{ width: 20px; } #up{ position: absolute; top: 0; right: 0; width: 100%; height: 136px; color: #c55d22; text-align: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 0.5em; padding-top: 2em; font-size: 3em; -webkit-transition: padding-top 0.5s; -moz-transition: padding-top 0.5s; -ms-transition: padding-top 0.5s; -o-transition: padding-top 0.5s; transition: padding-top 0.5s; } #up i, #up span{ opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #up.show{ padding-top: 0.75em; } #up.show i, #up.show span{ opacity: 1; } .page{ padding: 0 20px; } .page form input, .page form textarea, .page form button{ width: 95%; } #right.active{ -webkit-animation: right_wiggle 5s; /* Chrome, Safari, Opera */ animation: right_wiggle 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #left.active{ -webkit-animation: left_wiggle 5s; /* Chrome, Safari, Opera */ animation: left_wiggle 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #right.active, #left.active{ background-color: white; color: #c55d22; } /* Chrome, Safari, Opera */ @-webkit-keyframes right_wiggle { 0% {padding-left: 0;} 50% {padding-left: 10px;} 100% {padding-left: 0;} } /* Standard syntax */ @keyframes right_wiggle { 0% {padding-left: 0;} 50% {padding-left: 10px;} 100% {padding-left: 0;} } /* Chrome, Safari, Opera */ @-webkit-keyframes left_wiggle { 0% {padding-right: 0;} 50% {padding-right: 10px;} 100% {padding-right: 0;} } /* Standard syntax */ @keyframes left_wiggle { 0% {padding-right: 0;} 50% {padding-right: 10px;} 100% {padding-right: 0;} }
}
Charliejwalter.net - Script Codes
Charliejwalter.net - Script Codes
Home Page Home
Developer Charlie Walter
Username cjonasw
Uploaded January 11, 2023
Rating 3.5
Size 4,688 Kb
Views 6,072
Do you need developer help for Charliejwalter.net?

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!

Charlie Walter (cjonasw) Script Codes
Name
Projection - Tank Three.js
Facebook tabs with AngularJS
Collision with walls
Animating Scrolling
Spotify Discover Panel
Login form
Flash CC HTML5 Canvas
Slanty goodness
JQuery countdown
Three.js half circle health bar
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!