LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


we design things

Sed porttitor lectus nibh. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada.

print design

Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt.

app design

Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt.

web design

Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt.

print design

Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt.

ourworks

Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
Vestibulum ac diam sit amet quam vehicula.

abazoo website

Nulla quis lorem ut libero malesuada feugiat.

abazoo website

Nulla quis lorem ut libero malesuada feugiat.

abazoo website

Nulla quis lorem ut libero malesuada feugiat.

abazoo website

Nulla quis lorem ut libero malesuada feugiat.

abazoo website

Nulla quis lorem ut libero malesuada feugiat.

abazoo website

Nulla quis lorem ut libero malesuada feugiat.

Proin eget tortor risus. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque

Omar Farouk

our team

Proin eget tortor risus. Proin eget tortor risus.

omar 3aesha

faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque

omar 3aesha

faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque

omar 3aesha

faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque

omar 3aesha

faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque

sayhello

Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
Vestibulum ac diam sit amet quam vehicula.

CSS
/*
main color: #F15C00
font color : #050505

*/

/*start our framework */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Open Sans', sans-serif;
}
.container{
    width: 80%;
    margin: auto
}

.text-center{
    text-align: center
}

.upper{
    text-transform: uppercase
}
.color{
    color: #F15C00
}
.back-color{
    background-color: #F15C00
}
.hidden{
    display: none
}

/*end our framework*/

/*Start header*/
header{
    height: 100vh;
    background-image: url(https://wallpaperscraft.com/image/laptop_macbook_iphone_apple_journal_glasses_113949_1920x1080.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    color: #FFF
}
header nav{
    overflow: hidden;
    padding: 20px 0 ;
    text-transform: capitalize
}
header nav .links{
    float: right
}

header nav .links i{
    margin-left: 7px;
    cursor: pointer
}

header .intro{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
header .intro h1{
    font-weight: 800;
    font-size: 40px
}
header .intro p{
    margin: 5px 0 30px;
    line-height: 1.8;
    color: :#e2e2e2;
    letter-spacing: 1px
}
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(49,55,61,.8)
}
header .buttons button{
    background: transparent;
    padding: 10px 20px ;
    margin: 10px;
    border: 1px solid #909090;
    color: #FFF;
    border-radius: 7px;
    cursor: pointer;
    transition: .3s ease-in-out
}
header .buttons button:hover{
    background-color: #F15C00;
    border: 1px solid #F15C00;
}
header .arrow{
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 22px;
    cursor: pointer
}
/*End header*/

/*Start features*/
.features{
    display: flex;
    align-items: center;
    justify-content:space-between;
    line-height: 1.7;
    margin-top: 50px;
    margin-bottom: 50px;
    flex-wrap: wrap
}
.features .box{
    width:200px;
    margin: 15px 0
    
}
.features .box i{
    font-size: 30px;
    width:120px;
    height: 120px;
    line-height: 120px;
    border: 1px solid #CCC;
    border-radius: 50%;
    transition: .4s ease-in-out;
    cursor: pointer
}
.features .box i:hover{
    color:#FFF;
    background: #F15C00;
    border: 1px solid #F15C00;
}
.features .box h3{
    font-weight: normal;
    color: #505050;
    margin: 7px 0 5px
}
.features .box p{
    color: #777;
    font-size: 14px
}

/*End features*/

/*Start Subscribe*/
.subscribe{
    height: 200px;
    margin: 50px 0;
    background-image: url(http://3x41ph2k8spe2pexwi2ddtx8.wpengine.netdna-cdn.com/wp-content/uploads/2015/03/awhCbhLqRceCdjcPQUnn_IMG_0249-e1427733371270-800x450.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}
.flex{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

.flex input[type="email"]{
    border: 0;
    width: 100%;
    padding: 10px 15px 10px 27px;
    outline: 0;
    color: #090909
}
.handle{
    position: relative;
    width: 300px;
    margin: 0 10px;
    overflow: hidden;
    border-radius: 10px;
}
.handle i{
    position: absolute;
    left: 3px;
    top: 9px;
    color: #777
}
.flex input[type="submit"]{
    width: 150px;
    border: 0;
    border-radius: 7px;
    color: #FFF;
    padding: 10px 15px;
    margin: 0 5px;
    text-transform: capitalize;
    outline: 0;
    cursor: pointer
}
/*End Subscribe*/

/*Start our work*/
.our-work{
    margin: 50px 0 70px
}
.our-work h1{
    font-size: 35px;
    font-weight: 500;
    color: #555
}
.our-work h1 ~ p{
    line-height: 2;
    margin: 10px 0 40px;
    color: #777;
    font-size: 14px
}
.item-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:14px 
}
.item{
    width:300px;
    height: 250px;
    overflow: hidden;
    margin-bottom:14px;
    border-radius: 10px;
    position: relative;
    cursor: pointer
}
.our-work .show-more{
    margin-top: 20px;
    background-color: transparent;
    border: 1px solid #CCC;
    outline: 0;
    padding: 10px 20px ;
    border-radius: 5px;
    letter-spacing: 1px;
    color: #090909;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.our-work .show-more:hover{
    background-color: #F15C00;
    border: 1px solid #F15C00;
    color: #FFF
}
.our-work .item-box .item .over{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(247,96,14,.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    color: aliceblue;
    opacity: 0;
    transition: .5s ease-in-out;
    transform: scale(0);
    transition-delay: .3s
}
.item .over h4{
    margin: -10px 0 10px
}
.item .over p{
    margin: 10px 0 
}
.item .over button,
.contact form button{
    margin-top: 20px;
    background-color: transparent;
    border: 1px solid #CCC;
    padding: 10px 20px ;
    border-radius: 5px;
    letter-spacing: 1px;
    color: #FFF;
    cursor: pointer;
    transition: .5s ease-in-out
}
.item .over button:hover{
    background-color: white;
    color: #F15C00;
    border: 1px solid #F15C00
}
.our-work .item-box .item:hover .over{
    opacity: 1;
    transform: scale(1)
}

/*End Our Work*/

/*Start testimonial*/
.testim{
    height: 300px;
    margin: 50px 0;
    background-image: url(https://4.bp.blogspot.com/-lNe8FpXlGMs/VxNd83gyIGI/AAAAAAAB__o/X-W4RwkNtBARHvI3jUFJIZ6PpCtV87iOQCKgB/s0/Apple_Mac_iPhone_iPad_Vintage_Camera_uhd.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}
.client {
    color: aliceblue;
    font-size: 14px;
    padding: 50px 0 
}

.client img{
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    filter: grayscale(100%)
}
.client p{
    line-height: 2;
    font-style:italic;
    letter-spacing: 1px;
    padding: 10px 0
}
.client span{
    text-transform: capitalize
}
.testim i{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #999;
    cursor: pointer
}
.testim .fa-chevron-left{
    left: 50px
}
.testim .fa-chevron-right{
    right: 50px
}
/*End testimonial*/

/*start our team*/
.our-team .flex{
    justify-content: space-between;
    flex-wrap: wrap;
}
.our-team h2{
    color: #555;
}
.our-team  h2 ~ p{
    color: #999;
    padding: 10px 0
}
.member{
    width:200px;
    overflow: hidden;
    margin-top:20px;
    transform: scale(.95);
    filter: grayscale(100%);
    transition: .3s ease-in-out;
    cursor: pointer;
    
}
.member:hover{
    transform: scale(1);
    filter: grayscale(0);
}
.member h3{
    padding: 10px 0;
    color: #262626;
    text-transform: capitalize
}
.member img{
    height: 200px;
    width: 100%;
    margin: 10px 0 15px ;
    border-radius: 10px;
    box-shadow: 1px 1px 7px #222
}
.member i,
.contact i{
    color: aliceblue;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 5px;
    cursor: pointer
}
.fa-facebook{
    background-color: #3b5998
}
.fa-google-plus{
    background-color: #dd4b39
}
.fa-twitter{
    background-color: #55acee
}
.fa-codepen{
    background-color: #45668e
}
.member p{
    color: #555;
    padding: 10px 0
}
/*End our team*/
/*Start say hello*/
.contact{
 background-image: url(http://wallpapercave.com/wp/tLMXA8y.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 500px;
    color: aliceblue;
    margin: 50px 0 0
}
.contact .overlay{
    padding: 50px 0;
    background-color: rgba(49,55,61,.95)
}
.contact form{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}
.contact form input[type="text"]{
    width: 45%;
    border: 0;
    outline: 0;
    padding: 10px;
    margin: 20px 0 10px;
    background-color: transparent;
    border:3px solid #F15C00;
    color: aliceblue;
    border-radius: 5px
}

.contact form textarea{
    width: 100%;
    padding: 10px;
    margin: 10px 0 20px;
    height: 100px;
    border: 0;
    outline: 0;
    background-color: transparent;
    border: 3px solid #F15C00;
    color: aliceblue;
    border-radius: 10px
}
.contact form button{
    margin-top: 0;
    padding: 10px 30px
}

.contact form button:hover{
    background-color: #F15C00;
    color: white;
    border: 1px solid #F15C00
}
/*End say hello*/

footer{
    background-color: #3b434c;
    color: aliceblue;
    padding: 30px 0;
    text-transform: capitalize;
}










JS
/*global $ ,alert, console*/

$(function() {
	"use strict";

	//Trigger Nice scroll plugin
	$("html").niceScroll();

	//Scroll to features
	$("header .arrow i").on("click", function() {
		$("html, body").animate(
			{
				scrollTop: $(".features").offset().top
			},
			1000
		);
	});
	//show the rest of work
	$(".show-more").on("click", function() {
		$(".hidden").fadeIn(500);
	});
	//check testimonials
	var leftArrow = $(".testim .fa-chevron-left"),
		rightArrow = $(".testim .fa-chevron-right");
	function arrow() {
		if ($(".client:first").hasClass("active")) {
			leftArrow.fadeOut();
		} else {
			leftArrow.fadeIn();
		}
		if ($(".client:last").hasClass("active")) {
			rightArrow.fadeOut();
		} else {
			rightArrow.fadeIn();
		}
	}
	arrow();

	$(".testim i").on("click", function() {
		if ($(this).hasClass("fa-chevron-right")) {
			$(".testim .active").fadeOut(200, function() {
				$(this)
					.removeClass("active")
					.next(".client")
					.addClass("active")
					.fadeIn();
				arrow();
			});
		} else {
			$(".testim .active").fadeOut(200, function() {
				$(this)
					.removeClass("active")
					.prev(".client")
					.addClass("active")
					.fadeIn();
				arrow();
			});
		}
	});
});
Host Instantly Drag and Drop Website Builder

 

Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID