<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,300,700" rel="stylesheet" type="text/css">
<title>Cuda Flat Design</title>
</head>

<body>
   <div id="cover">
     <button id="hide">&#10006;</button>
     <p>This webpage took its original deisgn from a PSD which can be found <a href="http://www.freepik.com/free-psd/creative-psd-template-with-flat-design_688843.htm" target="_blank">here</a>.</p>
    </div>
	<header>
    	<div class="wrapper">
    	<nav>
        	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/logo.png">
            <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#services">SERVICES</a></li>
            <li><a href="#portfolio">WORK</a></li>
            <li><a href="#reviews">CLIENTS</a></li>
            <li><a href="#in_touch">CONTACT</a></li>
            </ul>
        </nav>
        </div>

    </header>
    <main>
    <section id="intro">
    	<div class="wrapper">
            <h1>Hi there! We are the new kids on the block<br>
    and we build awesome websites and mobile apps.</h1>
            <a href="#"><button>WORK WITH US</button></a>
        </div>
    </section>
    
    <section id="services">
    	<div class="wrapper">
    	<h1> SERVICES WE PROVIDE</h1>
        <hr id="style1">
        <p> We are working with both individuals and businesses from all over the globe <br> to create awesome websites and applications.</p>
        <ul>
        	<li>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Branding.png">
            <h3>Branding</h3>
            <p>Lorem ipsum dolor sit amet,<br>consectetuer adipiscing elit,<br> sed diam nonummy nibh.</p>
            </li>
            
            <li>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Design.png">
            <h3>Design</h3>
            <p>Sed ut perspiciatis unde<br> omnis iste natus error sit<br> voluptatem</p>
            </li>
            
            <li>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/development.png">
            <h3>Development</h3>
            <p>At vero eos et accusamus et<br> iusto odio dignissimos qui<br> blanditiis praesentium.</p>
            </li>
            
            <li>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Rocket.png">
            <h3>Rocket Science</h3>
            <p>Et harum quidem rerum<br> est et expedita distinctio. Nam<br> libero tempore.</p>
            </li>
        </ul>
        </div>
	</section>
    
    <section id="team">
    	<div class="wrapper">
        	<h1> MEET OUR BEAUTUFUL TEAM</h1>
            <hr id="style2">
            <p>We are a small team of designers and developers, who help brands with big ideas.</p>
            
            <ul>
            	<li class="team_info">
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Base_photos.png">
                    <h3>ANNE HATHAWAY</h3>
                    <h4>CEO / Marketing Guru</h4>
                    <p>Lorem ipsum dolor sit amet,<br>consectetuer adipiscing elit,<br>sed diam nonummy nibh<br> euismod tincidunt ut laoreet<br>dolore magna.</p>
                    <ul>
                    	<li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Facebook_Icon.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Twitter.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/LinkedIn_icon.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/mail.png"></li>
                    </ul>
                </li>
                <li class="team_info">
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Base_photos.png">
                    <h3>Kate Upton</h3>
                    <h4>Creative Director</h4>
                    <p>Duis aute irure dolor in in<br> voluptate velit esse cillum<br> dolore fugiat nulla pariatur.<br> Excepteur sint occaecat non<br> diam proident.</p>
                    <ul>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Twitter.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/LinkedIn_icon.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/mail.png"></li>
                    </ul>
                </li>
                <li class="team_info">
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Base_photos.png">
                    <h3>Olivia Wilde</h3>
                    <h4>Lead Designer</h4>
                    <p>Nemo enim ipsam voluptas<br>sit aspernatur aut odit aut<br>fugit, sed quia consequuntur<br>magni dolores eos qui ratione<br>voluptatem nesciunt.</p>
                    <ul>
                    	<li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Facebook_Icon.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Twitter.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/LinkedIn_icon.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/mail.png"></li>
                    </ul>
                </li>
                <li class="team_info">
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Base_photos.png">
                    <h3>Ashley Greene</h3>
                    <h4>SEO / Developer</h4>
                    <p>Sed ut perspiciatis unde<br>omnis iste natus error sit<br>voluptatem accusantium<br>doloremque laudantium,<br>totam rem aperiam.
</p>
                    <ul>
                    	<li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Facebook_Icon.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Twitter.png"></li>
                        <li class="social_media"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/mail.png"></li>
                    </ul>
                </li>
            </ul>
        </div>
    </section>
    
    <section id="skills">
    	<div class="wrapper">
        	<h1>WE GOT SKILLS!</h1>
            <hr id="style3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br>tempor incididunt ut labore et dolore magna aliqua.</p>
			<ul>
            	<li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/Web_Design.png">
                    <h3>WEB DESIGN</h3>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/HTML.png">
                    <h3>HTML/CSS</h3>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/graphiv.png">
                    <h3>GRAPHIC DESIGN</h3>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/UI.png">
                    <h3> UI/UX</h3>
                </li>
            </ul>
        </div>
    </section>
    
    <section id="portfolio">
    	<div class="wrapper">
        	<h1>OUR PORTFOLIO</h1>
            <hr id="style4">
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet<br>consectetur, adipisci velit, sed quia non numquam</p>
            <ul id="project_type">
            	<li><a href="#">ALL</a></li>
                <li><a href="#">WEB</a></li>
                <li><a href="#">APPS</a></li>
                <li><a href="#">ICONS</a></li>
            </ul>
            
            <ul id="works">
            	<li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/1.png">
                    <p>ISOMETRIC PERSPECTIVE MOCK-UP</p>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/2.png">
                    <p>TIME ZONE APP UI</p>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/3.png">
                    <p>VIRO MEDIA PLAYERS UI</p>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/4.png">
                    <p>BLOG/MAGAZINE FLAT UI KIT</p>
                </li>
            </ul>
            
            <a href="#"><button>LOAD MORE PROJECTS</button></a>

        </div>
    </section>
    
    <section id="reviews">
    	<div class="wrapper">
        	<h1>WHAT PEOPLE SAY ABOUT US</h1>
            <hr id="style5">
            <p>Our clients love us!</p>
            
            <ul>
            	<li >
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/profile_pic.png">
                	<p class="style_text">“Nullam dapibus blandit orci, viverra<br>gravida dui lobortis eget. Maecenas<br>fringilla urna eu nisl scelerisque.”</p>
                    <h4 class="style_text">CHANEL IMAN</h4>
                    <p class="style_text">CEO of Pintrest</p>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/profile_pic.png">
                	<p class="style_text">“Vivamus luctus urna sed urna ultricies<br>ac tempor dui sagittis. In condimentum<br>facilisis porta.”</p>
                    <h4 class="style_text">ADRIANA LIMA</h4>
                    <p class="style_text">Founder of Instagram</p>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/profile_pic.png">
                	<p class="style_text">“Vivamus luctus urna sed urna ultricies<br>ac tempor dui sagittis. In condimentum<br>facilisis porta.”</p>
                    <h4 class="style_text">ANNE HATHAWAY</h4>
                    <p class="style_text">Lead Designer at Behance</p>
                </li>
                <li>
                	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/336265/profile_pic.png">
                	<p class="style_text">“Phasellus non purus vel arcu tempor<br>commodo. Fusce semper, purus vel luctus<br>molestie, risus sem cursus neque.”</p>
                    <h4 class="style_text">EMMA STONE</h4>
                    <p class="style_text">Co-Founder fo Shazam</p>
                </li>
            </ul>
        </div>
    </section>
    </main>
    <footer id="in_touch">
    	<div class="wrapper">
        	<h1>GET IN TOUCH</h1>
            <hr id="style6">
            <p>1600 Pennsylvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</p>
            <form id="contact">
            	<input type="text" placeholder="Name" name="name" required class="user_name_email">

  <input type="email" placeholder="Email" name="email" required class="user_name_email">

  <textarea placeholder="Message" name="message" required id="user_msg"></textarea>
            </form>
            
            
        </div>
        
        <div id="social_media">
        	<div class="wrapper">
            	<ul>
                	<li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Google+</a></li>
                    <li><a href="#">LinkedIn</a></li>
                    <li><a href="#">Behance</a></li>
                    <li><a href="#">Dribbble</a></li>
                    <li><a href="#">GitHub</a></li>
                </ul>
                </div>
            </div>
    </footer>
  
</body>
</html>
#cover{
  color:#000000;
  background-color:#ffffff;
  height: 100%;
  font-family: 'Titillium Web', sans-serif;
}
body, ul, li{
    margin: 0;
    padding: 0;
    
}

.wrapper{
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%;
    overflow:hidden;
    
	
}

body{
	background-color: #87509c;
}

header{
	margin-top: 25px;
	margin-bottom: 156px;
}

header nav{
    
	text-align:center;
	
}

header nav img{
	margin-right: 60px;
}

header nav ul{
	display:inline-block;
    float: right;
	margin-right: 90px;

}

header nav li{
	list-style-type: none;
	display: inline-block;
	margin: 15px 25px;
	
		
}

header nav a{
	text-decoration:none;
	font-family: 'Titillium Web', sans-serif;
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 18px;
}

header nav a:hover{
	
	border-radius: 4px;
	background-color: #643a79;
}


main #intro h1{
	text-align:center;
	font-family: 'Titillium Web', sans-serif;
	color: #f7f3eb;
	font-size: 25.83px;
	font-weight: 700;
	line-height: 29.907px;
	
}

main  button{
	width: 160px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0);
	border: 3px solid #ffffff;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	cursor: pointer;
	text-align:center;
	margin: 0 520px;
}

main #services{
	
	background-color: #17c2a4 !important;
	font-family: 'Titillium Web', sans-serif;
	color: #f7f3eb;
	margin-top: 100px;
	text-align:center;
	position:relative;
	
}

main #services h1{
	color: #ffffff;
	font-size: 40px;
	font-weight: 700;
	line-height: 29.907px;
	padding-top: 50px;
}
	
 hr#style1{
	border: 4px solid rgba(0, 0, 0, 0.15);	
	background-color:  #17c2a4 ;
	width: 87px; 
	
}

main #services p:nth-child(1){
	font-size: 18px;
	font-weight: 400;
	line-height: 26px ;
	
	}
	
main #services ul{
	margin-top: 80px;
}


main #services li{
	list-style-type:none;
	display:inline-block;
	padding: 0 25px;
}

main #services h3{
	font-size: 24px;
	font-weight: 700;
	line-height: 18px;
}

main #services li p{
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	padding-bottom: 50px;
}

/*team section */

main #team{
	background-color: #e7f1f8;
	font-family: 'Titillium Web', sans-serif;
	color: #3c4661;
	line-height: 29.907px;
	text-align:center;
	margin-top: -33px;
	}
	
main #team h1{
	
	padding-top: 50px;
	font-size:40px;
	font-weight:700;
	line-height: 29.907px;
	
}

 hr#style2{
	border: 4px solid rgba(0, 0, 0, 0.15);	
	background-color: #e7f1f8;
	width: 87px; 
	
}

main #team p:nth-child(1){
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

main #team ul{
	margin-top: 80px;

}

main #team .team_info{
	list-style-type:none;
	display:inline-block;
	padding: 0 25px;
}

main #team .team_info h3{
	font-size: 24px;
	font-weight: 700;
	line-height: 18px;
}

main #team .team_info h4{
	color: #30bae7;
	font-size: 16px;
	font-weight: 400;
	line-height: 18px;
}

main #team .team_info p{
	color:#3c4761;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}



main #team .social_media{
	list-style-type:none;
	display:inline-block;
	padding: 5px;
	
}

main #team ul ul{
	margin-top: 0;
	padding-bottom: 50px;
}

main #skills {
	background-color: #ffffff !important;
	font-family: 'Titillium Web', sans-serif;
	color: #3c4761;
	text-align:center;
	margin-top: -33px;
	

}

main #skills h1{
	
	color: #3c4761;
	font-size: 40px;
	font-weight: 700;
	line-height: 29.907px;
	padding-top: 35px;
}
 hr#style3{
	border: 4px solid rgba(0, 0, 0, 0.15);
	width: 87px; 
	background-color: #dfe8ed;
}


main #skills p{
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

main #skills ul{
	padding: 55px 0;
}

main #skills li{
	list-style-type:none;
	display:inline-block;
	margin: 0 35px;
}

main #portfolio{
	background-color: #ffdd99 !important;
	font-family: 'Titillium Web', sans-serif;
	color: #393939;
	text-align:center;
	margin-top: -33px;

}

main #portfolio h1{
	font-size:40px;
	font-weight: 700;
	line-height: 29.907px;
	padding-top:35px;
}

 hr#style4{
	border: 4px solid rgba(0, 0, 0, 0.15);
	width: 87px; 
	background-color: #e5c37f;
}

main #portfolio p{
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

main #portfolio button:nth-child(1){
	width: 84px;
	height: 38px;
	background-color: rgba(0, 0, 0, 0.08);
	border: 3px solid #ffdd99;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 400;
	color: #393939;
	line-height: 19.5px;
	cursor: pointer;
	text-align:center;
	margin: 0 520px;
	
}

main #portfolio button:nth-child(1):hover{
	background-color: #ffffff;
}

main #project_type ul{
	text-align:center;
}

main #project_type li{
	list-style-type:none;
	display:inline-block;
	background-color: rgba(0, 0, 0, 0.08);
	border: 3px solid #ffdd99;
	width: 84px;
	height: 38px;
	margin-bottom: 25px;
}

main #project_type li a{
	text-decoration:none;
	color:#393939;
	line-height:19.5px;
	font-weight:400;
	font-size:18px;
	}

main #project_type li:hover{
	background-color:#ffffff;
}

main #works li {
	list-style-type: none;
	display:inline-block;
}

main #works p{
	color:#393939;
	font-size: 18px;
	font-weight: 400;
	line-height: 19.5px;
}


#portfolio button{
	color:#ffffff !important;
	font-size: 13.4px !important;
	font-weight:600 !important;
	line-height:19.5px !important;
	background-color: #17c2a4 !important;
	border-radius: 4px !important;
	border: solid #17c2a4 !important;
	margin-bottom: 80px !important;
	
	
	
}

main #reviews{
	background-color: #d74680;
	font-family: 'Titillium Web', sans-serif;
	color: #ffffff;
	text-align:center;
	margin-top: -33px;
}

main #reviews h1{
	font-size:40px;
	font-weight: 700;
	line-height: 29.907px;
	padding-top:50px;
}

 hr#style5{
	border: 4px solid rgba(0, 0, 0, 0.15);
	width: 87px; 
	background-color: #d74680;
}

main #reviews p{
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

main #reviews li{
	display:inline-block;
	list-style-type:none;
	color: #ffffff;
	font-size: 17.5px;
	font-style: italic;
	line-height: 26px;
	padding: 25px 50px;
	
}


main #reviews img{
	float: left;
}

main .style_text{
	text-align:left;
	padding-left: 125px;
}

footer{
	background-color: #3c5499;
	font-family: 'Titillium Web', sans-serif;
	color: #ffffff;
	text-align:center;
	margin-top: -33px;
}

footer h1{
	padding-top:50px;
	color: #ffffff;
	font-size: 40px;
	font-weight: 700;
	line-height: 29.907px;
}

 hr#style6{
	border: 4px solid rgba(0, 0, 0, 0.15);
	width: 87px; 
	background-color: #3c5499;
}

footer p{
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

footer .user_name_email{
	background-color: #273a71;
	border:none;
	border-radius: 4px;
	width: 414px;
	height: 56px;
	text-align:center;
	display:inline-block;
	margin: 15px 15px;
}

footer #user_msg{
	text-align:center;
	width: 860px;
	height: 200px;
	background-color: #273a71;
	border-radius: 4px;
	border:none;
	margin-top:30px;
}

footer #social_media{
	background-color:#344b8e;
	text-align:center;
	height: 112px;
}

footer #social_media ul{
	margin-top: 50px;
	padding-top:50px;
}

footer #social_media li{
	display: inline-block;
	list-style-type:none;
	padding:10px;
}

footer #social_media a{
	font-family: 'Titillium Web', sans-serif;
	color: #ffffff;
	font-weight: 600;
	font-size: 24px;
	line-height: 29.907px;
	text-decoration:none;
	
}

footer #social_media a:hover{
	color: #30bae7;
}


	
$(document).ready(function(){
  //hide the psd disclaimer note
    $("#hide").click(function(){
        $("#cover").hide();
    });
  
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
	

  });
  
  	$(window).on('scroll', function(){
		var scrolltop = $(this).scrollTop();
		
		if(scrolltop >= 215) {
			$('#fixedbar').fadeIn(250);
		} 
		else if(scrolltop <= 210){
			$('#fixedbar').fadeOut(250);
		}
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.1.0.min.js