Skip to content

Instantly share code, notes, and snippets.

@failamir

failamir/full-website-layout.markdown

Created May 17, 2019 05:48
Show Gist options
  • Save failamir/0faf7dc767cd67b9a5c9408ec3105b5a to your computer and use it in GitHub Desktop.
Save failamir/0faf7dc767cd67b9a5c9408ec3105b5a to your computer and use it in GitHub Desktop.
Download ZIP
Full Website Layout
Raw
full-website-layout.markdown
Raw
index.html
<div id="home" data-type="parallax_section" data-speed="500">
<header id="navigation-header">
<div class="content clearfix">
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Project</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</header>
<h1>Jesus Mendoza</h1>
<ul class="nav">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
<div id="services">
<div class="content">
<h1>Services</h1>
<div class="service web clearfix">
<img src="http://www.splitshire.com/wp-content/uploads/2015/04/SplitShire-0400-970x500.jpg" alt="">
<div class="service-text">
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor velit id neque rutrum, ac tincidunt neque rutrum. Donec sit amet nibh in velit varius tempor. Mauris et enim tortor. Nunc fermentum accumsan mauris sit amet molestie. Sed sed elementum augue, ac malesuada mi. Morbi quis laoreet tortor. Sed sed aliquam metus. Sed id nulla a lacus tempor pellentesque non ac tellus. Donec tristique hendrerit facilisis. Nam rutrum semper diam vel euismod. Pellentesque nec risus sem. Morbi non feugiat enim.</p>
</div>
</div>
<div class="service design clearfix">
<img src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/U9OICYV79O.jpg" alt="">
<div class="service-text">
<h2>Photography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor velit id neque rutrum, ac tincidunt neque rutrum. Donec sit amet nibh in velit varius tempor. Mauris et enim tortor. Nunc fermentum accumsan mauris sit amet molestie. Sed sed elementum augue, ac malesuada mi. Morbi quis laoreet tortor. Sed sed aliquam metus. Sed id nulla a lacus tempor pellentesque non ac tellus. Donec tristique hendrerit facilisis. Nam rutrum semper diam vel euismod. Pellentesque nec risus sem. Morbi non feugiat enim.</p>
</div>
</div>
</div>
</div>
<div id="promo">
<div class="content">
<h1>Interested in working with us?</h1>
<a href="#contact">Contact Me!</a>
</div>
</div>
<div id="projects" class="clearfix">
<div class="content">
<h1>My<br>projects</h1>
<ul>
<li>Web Design</li>
<li>Photography</li>
</ul>
</div>
<div class="img-wrapper">
<h3>Project Title</h3>
<img src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/KFDVJUL4M1.jpg" alt="">
</div>
<div class="img-wrapper">
<h3>Project Title</h3>
<img src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/KXGN1DBI7Z.jpg" alt="">
</div>
<div class="img-wrapper">
<h3>Project Title</h3>
<img src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/IP40ANAFMF.jpg" alt="">
</div>
</div>
<div id="contact">
<div class="content">
<h1>Get<br>in touch</h1>
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="contact@example.com">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<input type="button" value="Submit">
</form>
</div>
</div>
<footer>
<div class="content clearfix">
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Project</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav social">
<li><a href="#home">Twitter</a></li>
<li><a href="#services">Facebook</a></li>
<li><a href="#projects">Instagram</a></li>
</ul>
</div>
</footer>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
@import "compass";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900);
$black: #06070E;
$green: #29524A;
$cream: #94A187;
*, *::before, *::after {
margin: 0;
padding: 0;
@include box-sizing(border-box);
font-family: 'Source Sans Pro';
color: $black;
}
html, body {
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
body {
@include background-image(image-url('https://yourpage.com.au/wp-content/uploads/2015/06/Web-Design-Wallpapers-11.jpg'));
background-position: center;
background-attachment: fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
}
p {
line-height: 1.4;
}
.nav {
list-style-type: none;
li {
display: inline-block;
margin: 0 5px;
a {
display: block;
text-decoration: none;
font-weight: 400;
}
}
}
.nav-fixed {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
}
header {
.nav {
float: right;
@include display-flex;
@include flex-flow(row);
}
li {
display: inline-block;
a {
color: $black;
padding: .25em .5em;
}
}
}
#home {
min-height: 100%;
position: relative;
text-align: center;
h1 {
display: inline-block;
position: relative;
padding-left: 20px;
margin-top: 15%;
color: #111;
font-weight: 700;
border: 3px solid #111;
letter-spacing: 5px;
@media screen and (min-width: 960px) {
font-size: 3em;
letter-spacing: 15px;
margin-top: 10%;
}
@media screen and (min-width: 1280px) {
font-size: 3.5em;
letter-spacing: 20px;
}
}
.nav {
a {
color: $black;
}
}
}
.content {
width: 100%;
padding: 50px;
margin: 0 auto;
text-align: center;
@media screen and (min-width: 960px) {
width: 960px;
}
h1 {
font-size: 3em;
position: relative;
color: $cream;
line-height: .9;
}
.service {
margin-top: 50px;
img {
height: 300px;
width: 100%;
@media screen and (min-width: 960px) {
width: 49%;
margin-bottom: 0;
}
}
.service-text {
@media screen and (min-width: 960px) {
width: 48%;
padding: 0 25px;
}
}
}
}
#services {
position: relative;
background: #f6f6f6;
.service {
background-color: lighten($cream, 25%);
padding: 10%;
}
.web {
img {
@media screen and (min-width: 960px) {
float: left;
}
}
.service-text {
text-align: left;
@media screen and (min-width: 960px) {
float: right;
}
}
}
.design {
img {
@media screen and (min-width: 960px) {
float: right;
}
}
.service-text {
text-align: left;
@media screen and (min-width: 960px) {
float: right;
}
}
}
}
#promo {
background: rgba(15,15,15,.8);
padding: 75px 50px;
h1 {
color: #f6f6f6;
}
a {
display: inline-block;
color: #f6f6f6;
padding: .75em 2em;
border: 2px solid $green;
text-decoration: none;
font-weight: 700;
@include transition(all 250ms);
margin-top: 25px;
&:hover {
background: $green;
}
}
}
#projects {
background: #e4e4e4;
ul {
list-style-type: none;
margin-top: 25px;
li {
display: inline-block;
cursor: pointer;
padding: .5em 1em;
font-weight: 400;
&:hover {
color: $green;
}
&:nth-of-type(2) {
border: 1px solid $green;
border-top-width: 0;
border-bottom-width: 0;
}
}
}
.img-wrapper {
display: inline-block;
overflow: hidden;
height: 400px;
position: relative;
margin-bottom: -5px;
@media screen and (min-width: 960px) {
float: left;
width: 33.3333%;
height: 350px;
}
h3 {
position: absolute;
padding: 25px;
top: -100%;
width: 100%;
left: 0;
display: inline-block;
@include transition(all 500ms);
z-index: 1;
background: rgba($green,.7);
text-transform: uppercase;
color: #f6f6f6;
}
img {
width: 100%;
@include transition(all 500ms 250ms);
height: 100%;
margin-bottom: -5px;
}
&:hover {
h3 {
top: 0;
@include transition(all 500ms 250ms);
}
img {
@include transform(scale(1.1));
@include transition(all 500ms);
}
}
}
}
#contact {
background: #f6f6f6;
form {
margin-top: 50px;
text-align: right;
background-color: lighten($cream, 25%);;
padding: 5%;
input[type="text"], input[type="email"] {
width: 100%;
@media screen and (min-width: 960px) {
width: 33%;
}
}
input, textarea {
display: inline-block;
border: 0;
outline: none;
color: $cream;
padding: .5em 1.5em;
font-size: 1em;
margin-top: 15px;
}
textarea {
width: 100%;
font-family: 'Source Sans Pro';
resize: none;
height: 250px;
}
input[type="button"] {
color: #f6f6f6;
padding: .75em 2em;
text-decoration: none;
font-weight: 700;
@include transition(all 250ms);
margin-top: 25px;
background: $green;
cursor: pointer;
&:hover {
background: darken($green, 10%);
}
}
}
}
footer {
background: $black;
.nav {
float: left;
text-align: left;
width: 50%;
&.social {
float:right;
text-align: right;
}
a {
color: #f6f6f6;
padding: 0;
}
}
}
.clearfix::after {
display: table;
content: '';
clear: both;
}
Raw
styles
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment