css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="home">
<nav id="navgtn" class="navbar navbar-default">
    <div class="container-fluid">
       <div class="navbar-header">
         <a id="brandname"class="navbar-brand" href="#"><h1 class="text-center">Afnan Web Studio</h1></a>
				 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
			</div>
<div class="collapse navbar-collapse" id="myNavbar">
 <ul class="nav navbar-nav navbar-right">
		      
	 <li><a href="#home"><h3>Home</h3></a></li>
	 <li><a href="#about"><h3>About</h3></a></li>
	 <li><a href="#team"><h3>Team</h3></a></li>
	 <li><a href="#services"><h3>Services</h3></a></li>
	 <li><a href="#portfolio"><h3>Portfolio</h3></a></li>
	 <li><a href="#contact"><h3>Contact</h3></a></li>
	</ul>
       </div>
   </div>
 </nav>
<div class="jumbotron">
	<div  id="imagejumbo" class="container-fluid">
		<img class="img-responsive" src="http://i58.photobucket.com/albums/g268/siyafazila/snappa_1468500471_zpsazgczz2t.jpg">
  </div>
</div>
	
	<div id="main-content" class="container-fluid">
		<hr>
		   <div id="about">
				 <h3 class="text-center hdng">About</h3>
				 <hr>
				 <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac ipsum elementum, consectetur quam sed, ornare erat. Ut quis nulla lobortis, auctor nisi a, elementum diam. In vulputate enim et mattis aliquam. Fusce sit amet libero maximus, lacinia ipsum id, convallis dolor. Nulla facilisi. Suspendisse aliquam posuere nulla vestibulum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sed finibus mauris, id tincidunt nulla. Nullam facilisis, tellus sed euismod rhoncus, nunc leo condimentum urna, vel ultrices augue mi id nisl.</p>

<p class="para">Mauris elementum lorem vel sem tincidunt, quis bibendum nunc sodales. Integer posuere leo vel tempor pretium. Praesent metus purus, fermentum in sapien ut, mattis porttitor nisi. Fusce vel ante id libero commodo bibendum. Phasellus ut dictum nunc. Aliquam quis turpis semper, sodales leo sit amet, aliquam odio. In vehicula neque nec libero lobortis, eu congue justo varius. Sed interdum, augue ut posuere aliquam, dolor quam ullamcorper nulla, vitae vehicula felis nulla id est. Proin ut nunc maximus, posuere massa quis, dignissim leo. Nunc ut gravida nisl, at porta nunc. Mauris ut nulla in sapien ultricies dictum nec sit amet dolor.</p>
		   </div>
		<hr>
		<div id="team">
			<h3 class="text-center hdng">Team</h3>
			<hr>
			<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac ipsum elementum, consectetur quam sed, ornare erat. Ut quis nulla lobortis, auctor nisi a, elementum diam. In vulputate enim et mattis aliquam. Fusce sit amet libero maximus, lacinia ipsum id, convallis dolor. Nulla facilisi. Suspendisse aliquam posuere nulla vestibulum malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sed finibus mauris, id tincidunt nulla. Nullam facilisis, tellus sed euismod rhoncus, nunc leo condimentum urna, vel ultrices augue mi id nisl.

</p>
		</div>
		<hr>
		
		<div id="services">
			<h3 class="text-center hdng">Services</h3>
			<hr>
			<p class="para">Mauris elementum lorem vel sem tincidunt, quis bibendum nunc sodales. Integer posuere leo vel tempor pretium. Praesent metus purus, fermentum in sapien ut, mattis porttitor nisi. Fusce vel ante id libero commodo bibendum. Phasellus ut dictum nunc. Aliquam quis turpis semper, sodales leo sit amet, aliquam odio. In vehicula neque nec libero lobortis, eu congue justo varius. Sed interdum, augue ut posuere aliquam, dolor quam ullamcorper nulla, vitae vehicula felis nulla id est. Proin ut nunc maximus, posuere massa quis, dignissim leo. Nunc ut gravida nisl, at porta nunc. Mauris ut nulla in sapien ultricies dictum nec sit amet dolor.</p>

<p class="para">Donec pretium nulla id sagittis mattis. Maecenas fringilla massa massa, id bibendum lectus viverra ut. Nunc non sem sodales, vehicula dui id, lobortis nisl. Nam lorem massa, varius a interdum vel, dictum et velit. Integer id felis ultrices, sagittis velit eu, aliquet mi. Etiam sollicitudin urna vel eros tincidunt, ut accumsan lorem pulvinar. Donec sed ex a enim faucibus hendrerit. Etiam eu eleifend lorem. Cras a turpis non mi maximus consectetur. Donec id diam eu dolor tristique bibendum. Vivamus vulputate fermentum bibendum. Vestibulum rhoncus arcu ac quam porttitor, ac porttitor nibh condimentum. Fusce tristique nunc dui, et lacinia nibh mattis id. Maecenas luctus urna at dui eleifend condimentum. Nullam gravida placerat orci sed pretium. Pellentesque tempor, neque sed feugiat dignissim, purus magna semper metus, id congue ipsum justo tempor ex.</p>

<p class="para">Sed quis commodo nunc, at mollis quam. Maecenas euismod dolor at ipsum facilisis ultrices. Donec eu purus at dolor maximus vestibulum sed in ante. Donec justo ipsum, cursus non est vel, pulvinar ullamcorper metus. Quisque in eros mi. Nulla eget purus venenatis, sagittis ex id, dapibus erat. Sed euismod ornare auctor. Nulla porta odio a porttitor convallis. Proin vitae ipsum ante. Pellentesque venenatis tortor eros, lacinia tempus augue posuere at. Nulla finibus, augue vitae feugiat ultricies, elit quam volutpat nisi, finibus cursus ante orci ut libero. Aenean mattis vitae mauris viverra consectetur. Vestibulum ac luctus lectus. Nulla aliquam eu erat nec porta. Nulla dictum eros eget lacus gravida cursus. Quisque nec aliquam leo, sed convallis dui.</p>

<p class="para">Donec eget sapien eu nisi sodales egestas. Nam dignissim nisi in venenatis auctor. Nam porttitor lacus sit amet magna molestie, nec volutpat diam lobortis. Vivamus luctus pretium tortor, id tempus leo porta sed. Donec lacinia, lorem et efficitur bibendum, purus tortor porta magna, in vehicula nibh sem facilisis tellus. Aliquam tellus nisl, volutpat fermentum mauris nec, luctus gravida neque. Donec sit amet gravida felis. Vestibulum in massa justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent vitae risus eu orci rhoncus rhoncus quis et mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce libero mauris, consectetur a arcu eu, feugiat aliquet ante. Sed vitae risus vulputate, hendrerit erat vitae, tincidunt ante. Suspendisse non purus commodo turpis maximus lobortis ac id risus.

</p>
		</div>
	</div>
		
		<div id="portfolio" class="container-fluid">
			<hr>
			<h3 class="text-center hdng">Portfolio</h3>
			<hr>

					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
			<div id="image" class="thumbnail">
		 
    <img  src="http://www.placehold.it/300/6a5750/f6f1ed" alt="Founder & Web Developer">
 
  <div class="caption text-center">Founder & Web Developer</div>
				</div>
				</div>
							
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
			<div class="thumbnail" id="image">
				
      <img src="http://www.placehold.it/300/6a5750/f6f1ed" alt="Web Designer">
  <div class="caption text-center">Web Designer</div>
		</div>
				</div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
			<div class="thumbnail" id="image">
				  
    <img src="http://www.placehold.it/300/6a5750/f6f1ed" alt="Head Support">
  
  <div class="caption text-center">Head Support</div>
</div>
				
						</div>
					</div>
	</div>
		
					
		<div id="contact" class="container-fluid">
			<hr>
			<h3 class="text-center hdng">Contact Us</h3>
			<hr>
			<form role="form">
				<fieldset>
    <div class="form-group">
      <label for="usr">Name</label>
      <input type="text" class="form-control" id="usr">
    </div>
        <div class="form-group">
      <label for="email">Email</label>
      <input type="text" class="form-control" id="email">
    </div>
				<div class="form-group">
  <label for="message">Message</label>
  <textarea class="form-control" rows="6" id="message"></textarea>
</div>
					<fieldset>
						<div class="form-group">
				     <input type="submit" name="submit" value="Send message" id="submit" class="btn btn-sm btn-dark">
						</div>
			</form>
		</div>
				<hr>										
	<footer>
		<div id="footer-section" class="text-center">
	<div class="container-fluid">
				<div class="row">
					<div class="col-sm-8 col-sm-offset-2">
						<ul id="social-links">
							<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>&nbsp;Facebook</a></li>
							<li><a href="#"><i class="fa fa-github" aria-hidden="true"></i>&nbsp;Github</a></li>
							<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i>&nbsp;Twitter</a></li>
							<li><a href="https://codepen.io/siyafazila"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;Codepen</a></li>
							<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i>&nbsp;Linkedin</a></li>
						</ul>
						<hr>
						<p class="copyright">&copy 2016 Afnan Web Studio. All rights reserved.</p>
						<hr>

</div>
		</div>
			</div>
		</div>
	</footer>
				
            
          
!
            
              body {
	position: relative;
	font-family: 'Noto Serif', serif;
	background-color: #f6f1ed;
	line-height: 24px;
	 letter-spacing: 1.2px;

}

#navgtn {
	background-color: #f6f1ed;
	border-radius: 0px;
}

#brandname h1{
	font-family: 'Lobster Two', cursive;
	color: #30231d;
	font-size: 2em;
	margin-top: 10px;
	text-shadow: 1px 1px 3px #b5a397;

	}

#myNavbar ul li {
	margin-bottom: 10px;
	margin-right: -10px;
}

#myNavbar ul li h3 {
	font-size: 1.25em;
	color: #30231d;
	font-family: 'Noto Serif', serif;
}


#myNavbar a:hover, #myNavbar a:focus ,#myNavbar a:hover h3, #myNavbar a:focus h3 {
	text-decoration: none;
	background-color: #6a5750;
	color: #f6f1ed;
	margin-top: 10px;
	
}

.navbar-brand a:hover, .navbar-brand a:focus {
	text-decoration: none;
}

@media (min-width: 1200px) {
 
#imagejumbo img {
	
	width: 100%;
	height: auto;
	margin-bottom: -30px;
	}

}

@media (min-width: 992px) and (max-width: 1199px) {
	#brandname h1{
		font-size: 1.90em;
	}
#myNavbar ul li h3 {
	font-size: 1.20em;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
		#brandname h1{
		font-size: 1.60em;
	}
	#myNavbar ul li h3 {
	font-size: 1em;
	}

}

@media (max-width: 767px) {
		#brandname h1{
		font-size: 1.40em;
			margin-top: -1px;
	  		
	}
	
	#myNavbar ul li h3 {
	font-size: 1em;
	}
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbr-toggle:hover {
    background-color: #b5a397;
}

button.navbar-toggle.collapsed {
	border: 2px solid #30231d;
	background-color: #f6f1ed;
	
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #f6f1ed;
	
}

button.navbar-toggle.collapsed .icon-bar {
    border: 2px solid #30231d;
}
 
button.navbar-toggle {
 	border: 2px solid #6a5750;
 	
 }

button.navbar-toggle .icon-bar {
 	border: 2px solid #6a5750;
 }

#myNavbar ul li a {
            text-align: center;
}

.jumbotron #imagejumbo {
	margin-top: -70px;
	background-color: #f6f1ed;
	padding: 0px;
	margin-bottom: -15px;
}

#imagejumbo img {
	
	width: 100%;
	height: auto;
	margin-bottom: -30px;
	}

#main-content {
	margin-top: -10px;
	background-color: #f6f1ed;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

#main-content p.para {
	line-height: 24px;
	color: #6a5750;
	line-height: 24px;
	 letter-spacing: 1.2px;
}

#main-content h3.hdng{
	font-weight: bold;
	letter-spacing: 1.2px;
	color: #30231d;
}

#portfolio div#image {
  margin-left: auto;
	margin-right: auto;
  border: 1px solid #6a5750;
	width: 95%;
	height: auto; 
	margin-bottom: 40px;
}

#portfolio div#image:hover {
    border: 1px solid #b5a397;
}

#portfolio div#image img {
    width: 100%;
    height: auto;
	
}

#portfolio div.caption {
    padding: 15px;
    text-align: center;
	color: #6a5750;
}
#contact {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
#contact h3 {
	color: #30231d;
	font-weight: bold;
	
}
#contact .form-group .form-control {
	font-size: 13px;
	color: #6a5750;
	border: 1px solid #b5a397;
	background-color: #f6f1ed;
	
}
.form-group label {
	color: #6a5750;
}
.btn-dark {
	color: #f6f1ed;
	background-color: #30231d;
	text-transform: uppercase;
	border-color: #30231d;
}
.btn-dark:hover, .btn-dark:active, .btn-dark:focus, .btn-dark:visited {
	color: #f6f1ed;
	background-color: #6a5750;
}
#contact .form-group #submit {
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	font-size: 13px;
}
#footer-section {
	border-top: 1px solid #30231d;
	border-bottom: 1px solid #30231d;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	
}
ul#social-links {
	list-style-type: none;
	
}
ul#social-links li a{
	display: block;
	color: #6a5750;
	font-size: 15px;
	text-transform: uppercase;
	margin-top: 15px;
	text-decoration: none;
}
p.copyright {
	color: #30231d;
	font-weight: bold;
	font-size: 15px;
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console