<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">✖</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.