Hc first draft

Developer
Stephen Fray
Size
5,104 Kb
Views
4,046
  1. Hc first draft Previews
  2. Hc first draft HTML Codes
  3. Hc first draft CSS Codes
  4. Hc first draft JS Codes

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 Previews
IQ Test

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;
});
Hc first draft - Script Codes
Hc first draft - Script Codes
Home Page Home
Developer Stephen Fray
Username stepfray
Uploaded January 20, 2023
Rating 3
Size 5,104 Kb
Views 4,046
Do you need developer help for Hc first draft?

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!

Stephen Fray (stepfray) Script Codes
Name
Simple Stripped Element Background for Text
Form Submit - Tick Confirmation
Blur Filter
Fixed width, fluid Background with one element
A Pen by stephen fray
Flexbox Test Centered Content
CSS Processing Button
Flexbox Test
Message Sent Test
Full screen slider mk2
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!