Skip to content

Instantly share code, notes, and snippets.

@earthddx

earthddx/index.html

Created March 1, 2019 22:56
Show Gist options
  • Save earthddx/87e3296caee6233f5aaad802896f81c3 to your computer and use it in GitHub Desktop.
Save earthddx/87e3296caee6233f5aaad802896f81c3 to your computer and use it in GitHub Desktop.
Download ZIP
XOzXWr
Raw
index.html
<header>
<img src="https://cdn.discordapp.com/attachments/286511049388326912/550525054241341450/Company-Logo.png" alt="Creative inc. logo" class="logo">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<section class="home-hero parallax--bg">
<div class="container">
<h1 class="title title-hero">MAXX <strong>POTENTIAL</strong> <span>dolore magna aliqua</span>
</h1>
<a href="" class="button button-accent">Join us</a>
</div>
</section>
<div class="container">
<section class="home-about">
<div class="home-about-textbox one parallax--box">
<h1>Our company</h1>
<p><img src='https://maxxpotential.com/wp-content/uploads/2017/06/Working-Apprentice-Outline1.png' class="home-about-img-one">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="home-about-textbox two parallax--box">
<h1>Our values</h1>
<p><img src='https://maxxpotential.com/wp-content/uploads/2017/06/Company-with-work1.png' class="home-about-img-two">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="home-about-textbox three parallax--box">
<h1>Our goals</h1>
<p><img src='https://maxxpotential.com/wp-content/uploads/2017/06/Build-Skills-Outline1.png' class="home-about-img-three">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
</div>
<section class="portfolio">
<h1>Check out some of our work</h1>
<!-- portfolio item 01 -->
<figure class="port-item">
<img src="https://cdn.discordapp.com/attachments/286511049388326912/550555737114411009/company_photo1.jpg" alt="portfolio item">
<figcaption class="port-desc">
<p>TECHNOLINE</p>
<a href="" class="button button-accent button-small">Project details</a>
</figcaption>
</figure>
<!-- portfolio item 02 -->
<figure class="port-item">
<img src="https://cdn.discordapp.com/attachments/286511049388326912/550536838394281988/company_photo2.jpg" alt="portfolio item">
<figcaption class="port-desc">
<p>MAJESTIQUE</p>
<a href="" class="button button-accent button-small">Project details</a>
</figcaption>
</figure>
<!-- portfolio item 03 -->
<figure class="port-item">
<img src="https://cdn.discordapp.com/attachments/286511049388326912/550536847336407050/company_photo3.jpeg" alt="portfolio item">
<figcaption class="port-desc">
<p>SILVERZIM</p>
<a href="" class="button button-accent button-small">Project details</a>
</figcaption>
</figure>
</section>
<section class="cta">
<div class="container">
<h1 class="title title-cta">Excepteur sint occaecat
<span>cupidatat non proident</span>
</h1>
<a href="" class="button button-dark">Hire us</a>
</div>
</section>
<footer>
<div class="container">
<div class="col-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Lorem ipsum</strong></li>
<li>Lorem ipsum!</li>
<li>Lorem ipsum?</li>
<li>Lorem ipsum&</li>
<li>Lorem ipsum#</li>
</ul>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Lorem ipsum</strong></li>
<li>Ready</li>
<li>Steady</li>
<li>Go</li>
</ul>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Lorem ipsum</strong></li>
<li>Ready</li>
<li>Steady</li>
</ul>
</div>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Lorem ipsum</strong></li>
<li>Ready</li>
</ul>
</div>
</div>
<nav class="footer-btm">
<ul>
<li><a href="">Instagram</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">LinkedIn</a></li>
</ul>
</nav>
</footer>
Raw
script.js
$(window).scroll(function(){
parallax();
})
function parallax(){
var wScroll = $(window).scrollTop();
$('.parallax--bg').css('background-position', 'center '+(wScroll*0.25) + 'px');
$('.parallax--box').css('top', -4+ (wScroll*0.005) + 'em');
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:300,400,700,900');
*{
box-sizing: border-box;
transition: all ease-in-out 250ms;
}
.logo{
max-height: 4em;
margin-left: 2em;
}
body{
margin: 0;
font-family: 'Nanum Gothic', sans-serif;
text-align: center;
}
img{
max-width: 100%;
height: auto;
}
.container{
width: 95%;
max-width: 70em;
margin: 0 auto;
}
.clearfix::after,
section::after,
footer::after{
content: '';
display: block;
clear: both;
}
/*Col sys
=============*/
[class^=col-] {
width: 100%;
margin-top: 1em;
}
[class^=col-]:first-child{
margin-top: 0;
}
.col-1{
width: 25%;
float: left;
}
@media(min-width: 40rem){
[class^=col-] {
float: left;
padding: 0 .5em;
margin-top: 0;
}
[class^=col-]:first-child{
padding-left: 0;
}
[class^=col-]:last-child{
padding-right: 0;
}
.col-3{
width: 50%;
}
.col-1{
width: 12.5%;
}
}
/*typography
======================*/
h1{
font-weight:300;
font-size: 1.7rem;
margin-top:0;
}
.title-hero {
text-shadow: 0 .1em rgba(0,0,0,.5);
}
p{
margin-top: 0;
line-height: 1.5;
}
p:last-of-type{
margin-bottom:0;
}
.title{
font-size:2.5rem;
margin-bottom: 1.5em;
font-weight: 900;
margin-top: 1em;
}
.title span{
font-weight: 300;
display: block;
font-size: .9em;
}
.title-cta{
margin: 0 0 .5em;
}
.unstyled-list{
margin: 0;
padding:0;
list-style-type:none;
}
@media (min-width: 60rem){
p{
font-size: 1.2rem;
line-height: 1.6;
}
.title {
font-size: 3.7rem;
}
}
/*buttons*/
.button{
display: inline-block;
font-size: 1.5rem;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
padding: .5em 1.75em;
}
@media (min-width: 60rem){
.button{
font-size: 1.5rem;
}
}
.button-small{
font-size: .7rem;
font-weight: 700;
}
.button-accent{
color:#ecf0f1;
border-color:#ecf0f1;
}
.button-accent:hover,
.button-accent:focus{
background: #e74c3c;
color: #ecf0f1;
}
.button-dark{
color:#FFF;
border-color:#232323;
}
.button-dark:hover,
.button-accent:focus{
background: #FFF;
color: #e74c3c;
}
/*parallax
======================*/
.parallax--bg,
.parallax--box{
transition: initial;
}
/*header
======================*/
header{
position: absolute;
left:0;
right: 0;
margin: 1em;
background-color: rgba(0,0,0,.2);
padding: 1em;
margin:0;
}
nav ul{
margin:0; padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin: 1em;
}
nav a{
font-weight:900;
text-decoration: none;
text-transform: uppercase;
font-size:.8rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus{
color:#e74c3c;
}
@media (min-width: 60rem){
.logo {
float:left;
}
nav {
float:right;
}
}
/*home-hero
======================*/
.home-hero{
background-image: url('https://cdn.discordapp.com/attachments/286511049388326912/550526061683933184/hero1.jpg');
background-position: center;
background-size: cover;
padding: 10em 0;
color: #FFF;
}
@media (min-width:60rem){
.home-hero{
height: 100vh;
padding-top: 35vh;
}
}
/*home about
=================*/
.home-about-textbox{
background-color: #2f3542;
padding: 4em;
width: 100%;
outline: 1px solid #e74c3c;
outline-offset: -.5em;
color: #FFF;
position: relative;
}
.home-about-img-one{
position: absolute;
top: 20%;
left: -32%;
max-height: 7em;
margin: 1em;
}
.home-about-img-two{
position: absolute;
bottom: 15%;
right: -32%;
max-height: 7em;
margin: 1em;
}
.home-about-img-three{
position: absolute;
top: 10%;
left: -32%;
max-height: 7em;
margin: 1em;
}
.home-about-textbox p{
margin-left: 10%;
}
.home-about-textbox h1{
color: #e74c3c;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3em;
background: #2f3542;
padding: 0 .25em;
}
@media (min-width: 25rem) {
h1{
font-size: 2rem;
}
.home-about-textbox h1{
top: 0em;
padding: 0 1em;
}
.one{
margin-bottom: 1em;
}
.two{
margin-bottom: 1em;
}
}
@media (min-width: 60rem) {
h1{
font-size: 2.5rem;
}
.home-about{
padding-bottom: 0em;
background-color: #ecf0f1;
margin-top: 2em;
}
.home-about-textbox{
width: 70%;
padding: 5em;
outline-offset: -1.75em;
text-align: left;
box-shadow: 0 0 3em 0 rgba(0,0,0,.5);
}
.one{
margin-left: 31.5%;
top: -4em;
}
.two{
margin-left: -1.5%;
}
.three{
margin-left: 31.5%;
}
.home-about-textbox h1{
top: .1em;
left: 6rem;
transform: translateX(0);
}
}
/*portfolio
=============*/
.portfolio{
margin: 3em 0 0;
}
.port-item{
margin: 0;
position: relative;
}
.port-item img{
display: block;
}
.port-desc{
position: absolute;
z-index:100;
bottom: 0em;
left: 0em;
right:0em;
color: #FFF;
background: rgba(0,0,0,.6);
padding-bottom: 2em;
}
.port-desc p{
margin: 1em;
}
@media(min-width: 37rem){
.port-item{
width: 100%;
float: left;
}
}
@media(min-width: 60rem){
.port-item{
width: 33.3333334%;
overflow: hidden;
}
.portfolio h1{
margin-top: 2em;
}
.port-desc{
transform: translateY(150%);
}
.port-item:hover .port-desc{
transform: translateY(0%);
}
}
/*cta
=============*/
.cta{
background-color: #e74c3c;
padding:5em 0;
}
.cta span{
color: #FFF;
}
/*footer
=============*/
footer{
position: relative;
background: #232323;
color: #FFF;
text-align: left;
padding: 7em 0;
}
.footer-btm{
position: absolute;
right:0;
left:0;
bottom:0;
background-color: black;
}
@earthddx
Copy link
Author

earthddx commented Mar 1, 2019

Updated main page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment