<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--navigation-->
<div class="head" id="navbar">
<a href="" class="logo">LOGO HERE</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#team">Meet</a></li>
<li><a href="#skills">Service</a></li>
<li><a href="#portfolio">Gallery</a></li>
<li><a href="#testimonial">Testimonial</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- Header Section-->
<header id="header">
<div class="title">
<h1 class="heading">Simple</h1>
<h2 class="heading">Just a sample website
</h2></div><div class="scroll-down"></div>
</header>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<h2>About</h2>
<div class="block"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores rc ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="row">
<div class="six columns">
<h3><span class="typcn typcn-device-desktop icon"></span>Our Process</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="six columns">
<h3><span class="typcn typcn-pen icon"></span>Our Approach</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="row">
<div class="six columns">
<h3><span class="typcn typcn-cog-outline icon"></span>Our Goal</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="six columns">
<h3><span class="typcn typcn-lightbulb icon"></span>Our Mission</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</section>
/* Base Styles*/
html {font-size: 61%;
scroll-behavior: smooth;}
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
margin: 0px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
color: #222;}
/* Grid */
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0px 20px;
box-sizing: border-box;}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box;}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0;}}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {width: 80%;}
.column,.columns {margin-left: 31px;}
.column:first-child,.columns:first-child {
margin-left: 0;}
.one.column,.one.columns{width:4.66666666667%;}
.two.columns {width: 13.3333333333%;}
.three.columns {width: 100%;}
.three.columns h6{margin-bottom:-23px;height:38px;font-size:17px;}
.four.columns {width: 100%;}
.five.columns {width: 39.3333333333%;}
.six.columns {width: 48%;}
.seven.columns {width: 56.6666666667%;}
.eight.columns {width: 65.3333333333%;}
.nine.columns {width: 74.0%;}
.ten.columns {width: 82.6666666667%;}
.eleven.columns {width: 91.3333333333%;}
.twelve.columns {width: 100%;margin-left: 0;}
.one-third.column {width: 30.6666666667%;}
.two-thirds.column {width: 65.3333333333%;}
.one-half.column {width: 48%;}
/* Offsets */
.offset-by-one.column,.offset-by-one.columns {margin-left: 8.66666666667%;}
.offset-by-two.column,.offset-by-two.columns {margin-left: 17.3333333333%;}
.offset-by-three.column,.offset-by-three.columns {margin-left: 26%;}
.offset-by-four.column,.offset-by-four.columns {margin-left: 34.6666666667%;}
.offset-by-five.column, .offset-by-five.columns {margin-left: 43.3333333333%;}
.offset-by-six.column, .offset-by-six.columns {margin-left: 52%;}
.offset-by-seven.column, .offset-by-seven.columns {margin-left: 60.6666666667%;}
.offset-by-eight.column, .offset-by-eight.columns {margin-left: 69.3333333333%;}
.offset-by-nine.column, .offset-by-nine.columns {margin-left: 78.0%;}
.offset-by-ten.column, .offset-by-ten.columns {margin-left: 86.6666666667%;}
.offset-by-eleven.column, .offset-by-eleven.columns {margin-left: 95.3333333333%;}
.offset-by-one-third.column,.offset-by-one-third.columns {margin-left:34.6666666667%;}
.offset-by-two-thirds.column,.offset-by-two-thirds.columns {margin-left:69.3333333333%;}
.offset-by-one-half.column, .offset-by-one-half.columns {margin-left: 52%;}}
/* Typography */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 1rem;
font-weight: 300;}
h1 {
font-size: 2rem;
line-height: 1.2;
letter-spacing: -.1rem;}
h2 {
font-weight: bold;
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;}
h6 {
font-size: 2.0rem;
line-height: 1.35;
letter-spacing: -.08rem;
font-weight: 550;}
/* Larger than tablet */
@media (min-width: 550px) {
h1 {font-size: 5.0rem;}
h2 {font-size: 4.2rem;}
h3 {font-size: 3.6rem;}
h4 {font-size: 3.0rem;}
h5 {font-size: 2.4rem;}
h6 {font-size: 1.5rem;}}
p { margin-top: 0;}
/* Links */
a {color: #1EAEDB;}
a:hover {color: #0FA0CE;}
/*navigation*/
a {color: #000;}
.head {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;}
.head ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;}
.head li a {
display: block;
padding: 16px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;}
.head li a:hover,
.head .menu-btn:hover {
background-color: #f4f4f4;}
.head .logo {
display: block;
float: left;
font-size: 2em;
padding : 6px 5px 5.6px 5px;
text-decoration: none;}
/* menu */
#navbar {
top: -77px;
display: block;
transition: top 0.3s;}
.head .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;}
/* menu icon */
.head .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;}
.head .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
width: 19px;
position: relative;
transition: background .2s ease-out;}
.head .menu-icon .navicon:before,
.head .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;}
.head .menu-icon .navicon:before{top: 5px;}
.head .menu-icon .navicon:after{top: -5px;}
/* menu btn */
.head .menu-btn { display: none;}
.head .menu-btn:checked ~ .menu {
max-height: 540px;}
.head .menu-btn:checked ~ .menu-icon .navicon { background: transparent;}
.head .menu-btn:checked ~ .menu-icon
.navicon:before {transform: rotate(-45deg);}
.head .menu-btn:checked ~ .menu-icon
.navicon:after { transform: rotate(45deg);}
.head .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.head .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0;}
/* 48em = 768px */
@media (min-width: 48em) {
.head li { float: left;}
.head li a {padding: 20px 20px; }
.head .menu {
clear: none;
float: right;
max-height: none;}
.head .menu-icon {display: none;}
.head .logo {padding : 8.3px 8px 8.3px 8px;}}
/* Header Section* */
header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100vh;
background: #e55d87;
background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);}
.title {
align-self: center;
padding: 2rem;
max-width: 960px;
text-align: center;}
.title h1 {
font-size: 80px;
font-weight: 300;
text-transform: uppercase;
margin-bottom: 28px;
margin: 0;
color: #FFFFFF;}
.title h2 {
color: #FFFFFF;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: 50px;}
@media only screen and (max-width: 500px) {
.title h1 {font-size: 40px;}}
@media only screen and (max-width: 500px) {
.title h2 {font-size: 4px;}}
.scroll-down {
position: absolute;
left: 50%;
bottom: 5vh;
text-align: center;
text-decoration: none;
text-shadow: 0;
width: 27px;
height: 27px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
animation: fade_move_down 2s ease-in-out infinite;}
/*animated scroll arrow animation*/
@keyframes fade_move_down {
0%{
transform:translate(0, -10px) rotate(45deg);
opacity: 0;}
50% {opacity: 1;}
100% {transform:translate(0, 10px) rotate(45deg); opacity: 0;}}
/* About Section */
#about {padding: 70px 0px 70px 0px;}
/* navigation*/
window.onscroll = function(){scrollFunction();};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";} else {
document.getElementById("navbar").style.top =
"-77px";}}
/*navigation end*/
