Hc first draft
How do I make an hc first draft?
What is a hc first draft? How do you make a hc first draft? This script and codes were developed by Stephen Fray on 20 January 2023, Friday.
Hc first draft - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hc first draft</title> <link href="https://fonts.googleapis.com/css?family=Montserrat|Questrial" rel="stylesheet"/> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="s1" class="flex_wrp"> <div class="col _fill-area"> <div class="l flex"> <div class="bx"> <div class="bkg o"> </div> <div class="bkg s"> </div> <div class="l"> </div> <div class="m"> </div> <div class="r"> </div> </div> </div> <div class="r"> <h1>Testing Test</h1> <p>test | test | test</p> <p>Line of text goes here</p> <div class="sidebar"> <p><a href="#s1">top</a></p> <p><a href="#s2">section 2</a></p> <p><a href="#s3">section 3</a></p> <p><a href="#s4">section 4</a></p> <p><a href="#s5">section 5</a></p> </div> </div> </div>
</section>
<section id="s2" class="flex_wrp"> <div class="col _fill-area"> <div class="col _fill-area"> <div class="t flex"> <div class="bob_bx_wrp"> <div class="bob_bx"></div> <div class="bk_bob_1"></div> <div class="bk_bob_2"></div> </div> </div> <div class="t flex"> <div class="bob_bx_wrp"> <div class="bob_bx"></div> <div class="bk_bob_1"></div> <div class="bk_bob_2"></div> </div> </div> <div class="t flex"> <div class="bob_bx_wrp"> <div class="bob_bx"></div> <div class="bk_bob_1"></div> <div class="bk_bob_2"></div> </div> </div> </div> </div>
</section>
<section id="s3">
</section>
<section id="s4">
</section>
<section id="s5" class="flex_wrp"> <div class="col _fill-area"> <form action="/"> <label for="name">Name:</label> <input type="text" id="name"> <label for="tel">Contact Number:</label> <input type="text" id="tel"> <label for="email">Email:</label> <input type="email" id="email"> <label for="msg">Message:</label> <textarea rows="4" cols="50" id="msg"></textarea> <input type="submit" value="Send"> </from> </div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hc first draft - Script Codes CSS Codes
body { margin: 0; padding: 0;
}
img { max-width: 100%;
}
.sidebar { z-index: 9999; float: right; text-align: right;
}
.sidebar._sticky { position: fixed;
}
.sidebar a { border: 4px solid #000; padding: 10px 30px; color: #000; text-decoration: none;
}
.sidebar a:hover { background-color: #000; color: #fff;
}
.flex_wrp { display: flex; height: 100%; align-items: stretch; flex-wrap: wrap;
}
.flex { height: 100%; flex-wrap: wrap; display: flex; flex-direction: column; justify-content: center;
}
._start { justify-content: flex-start;
}
._fill-area { display: flex; flex-direction: row; justify-content: flex-start; /* align items in Main Axis */ align-items: stretch; /* align items in Cross Axis */ align-content: stretch; /* Extra space in Cross Axis */ width: 100%;
}
section { min-height: calc(100vh - 100px); margin: 0; padding: 50px 300px 50px 50px;
}
section:nth-of-type(1) { background-color: #BBE4E5; padding: 50px;
}
section:nth-of-type(2) { background-color: #D6C4D0;
}
section:nth-of-type(3) { background-color: #F6EDC2;
}
section:nth-of-type(4) { background-color: #718CFF;
}
section:nth-of-type(5) { background-color: #EEF7FF;
}
.col { max-width: 1300px; margin: auto;
}
.col > .l { width: 60%;
}
.col > .r { width: 40%; text-align: right;
}
.col > .t { width: 33.333%;
}
body { font-family: 'Questrial', sans-serif; font-weight: 400; font-style: normal; font-size: 1em;
}
h1, h2, h3, h4, h5 { font-family: 'Montserrat', serif;
}
h1 { font-size: 4em; margin: 0; padding: 0 0 .5em; letter-spacing: -3px;
}
h2 { font-size: 1.7em; margin: 0; padding: 1.4em 0 .5em;
}
h3 { font-size: 1.5em; margin: 0; padding: 1.3em 0 .5em;
}
h4 { font-size: 1.3em; margin: 0; padding: 1.2em 0 .5em;
}
h5 { font-size: 1.1em; margin: 0; padding: 1.1em 0 .5em;
}
p { line-height: 2em; margin: 0; padding: .75em 0;
}
ul { padding: .5em 1.5em; margin: 1.5em 0;
}
ul li { padding: .5em 0; margin: 0;
}
section:nth-of-type(1) .bx { text-align: center; width: 100%; position: relative;
}
section:nth-of-type(1) .bx > div:not(.bkg) { border-radius: 5px; position: relative; padding: 30px 15px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); margin: 100px 0;
}
section:nth-of-type(1) .bx > .bkg.o { background-color: rgba(0, 0, 0, 0.1); position: absolute; z-index: 0; width: 300px; height: 300px; border-radius: 50%; border: 50px solid rgba(0, 0, 0, 0.5); animation: wob 12s infinite ease; transition: all 12s ease-in; top: 0; left: 0;
}
section:nth-of-type(1) .bx > .bkg.s { background-color: rgba(0, 0, 0, 0.1); position: absolute; z-index: 0; width: 50px; height: 250px; animation: wob_2 12s infinite ease; transition: all 12s ease-in; transform: rotate(45deg); bottom: 0; right: 0;
}
section:nth-of-type(1) .bx > .l { width: calc(25% - 30px); min-height: 250px; float: left; z-index: 1; left: 15px; top: 70px;
}
section:nth-of-type(1) .bx > .m { width: calc(50% - 30px); float: left; z-index: 2; min-height: 400px; background-color: #fff;
}
section:nth-of-type(1) .bx > .r { width: calc(25% - 30px); min-height: 250px; float: right; z-index: 1; left: -15px; top: 15px;
}
@keyframes wob { 0% { top: 0; left: 0; opacity: 0; } 25% { top: 5px; left: -5px; opacity: 0.5; } 75% { top: 10px; left: 10px; opacity: 0.4; } 100% { top: 0; left: 0; opacity: 0; }
}
@keyframes wob_2 { 0% { bottom: 0; right: 0; opacity: 0.5; } 35% { bottom: 5px; right: -5px; opacity: 0; } 65% { bottom: 50px; right: 10px; opacity: 0.7; transform: rotate(65deg); } 100% { bottom: 0; right: 0; opacity: 0.5; }
}
.bob_bx_wrp { position: relative; margin: 50px;
}
.bob_bx_wrp .bob_bx { position: relative; background-color: #fff; z-index: 3; padding: 50px;
}
.bob_bx_wrp .bk_bob_1, .bob_bx_wrp .bk_bob_2 { top: 0; left: 0; right: 0; bottom: 0; position: absolute; transition: all 0.5s cubic-bezier(0.05, 1.66, 0.65, 1);
}
.bob_bx_wrp .bk_bob_1 { background-color: red; z-index: 2;
}
.bob_bx_wrp .bk_bob_2 { background-color: blue; z-index: 1;
}
.bob_bx_wrp:hover .bk_bob_1 { top: -50px; transform: rotate(5deg); transform-origin: bottom right;
}
.bob_bx_wrp:hover .bk_bob_2 { top: -35px; transform: rotate(-2deg); transform-origin: bottom right;
}
Hc first draft - Script Codes JS Codes
// Sticky Nav
$(function(){ var $sb = $(".sidebar"), $offset = $sb.offset(), $w = $sb.width(); stickyNav($offset,$w,$sb);
});
$( window ).resize(function() { var $sb = $(".sidebar"), $offset = $sb.offset(), $w = $sb.width(); $sb.removeClass("_sticky"); $sb.removeAttr( 'style' ); stickyNav($offset,$w,$sb);
});
function stickyNav($offset,$w,$sb){ $(window).scroll(function() { $sb.addClass("_sticky").css({ 'top' : $offset.top, 'left' : $offset.left, 'width' : $w }); });
}
// Smooth scrolling
var $root = $('html, body');
$('a').click(function() { $root.animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false;
});
Developer | Stephen Fray |
Username | stepfray |
Uploaded | January 20, 2023 |
Rating | 3 |
Size | 5,104 Kb |
Views | 4,048 |
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 |
Simple Stripped Element Background for Text | 1,534 Kb |
A Pen by stephen fray | 5,080 Kb |
Form Submit - Tick Confirmation | 3,007 Kb |
Super Simple Modal | 3,182 Kb |
Fixed width, fluid Background with one element | 1,897 Kb |
Full Screen slider mk3 | 4,244 Kb |
Adaptive Font Sized Lined Paper | 1,856 Kb |
Flexbox Test Centered Content | 1,734 Kb |
CSS Processing Button | 3,605 Kb |
Hexagon img | 1,778 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 |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Cool audio | Bigliam | 1,868 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Vue Transition | Chenming142 | 4,561 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!