123

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.

            
              <!DOCTYPE html>
<html lang="en">
<head>
	<title>personal webpage</title>
	 <!-- add bootstrap css file -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      
      <link rel="stylesheet" type="text/css" href="css/main.css">
<linl rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</head>
<body>
  <!-- navbar -->

  <nav class="navbar navbar-expand-lg fixed-top ">
	  <a class="navbar-brand" href="#">Home</a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	    <span class="navbar-toggler-icon"></span>
	  </button>

	  <div class="collapse navbar-collapse " id="navbarSupportedContent">
	    <ul class="navbar-nav mr-4">
	      
	      <li class="nav-item">
	        <a class="nav-link" data-value="about" href="#">About</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="blog" href="#">Blog</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="team" href="#">
	        Team</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="contact" href="#">Contact</a>
	      </li>
	    </ul>
	    
	  </div>
</nav>
<!-- header -->
<header class="header" >
  <div class="overlay"></div>
   <div class="container">
   	  <div class="description ">
  	<h1>
  		Hello ,Welcome To My official Website
  		<p>
  		Whether you create a single-page site or a larger portfolio, the web resume serves as a more personalized option for sharing information and demonstrating your technological skills -- and it can be used by all types of job seekers..</p>
  		<button class="btn btn-outline-secondary btn-lg">See more</button>
  	</h1>
  </div>
   </div>
  
</header>

<!-- about section -->
<div class="about" id="about">
	<div class="container">
	  <h1 class="text-center">About Me</h1>
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="https://image.ibb.co/fZQbH7/serv4.jpg" alt="team_3"  class="img-fluid">
				<span class="text-justify">S.Web Developer</span>
			</div>
			<div class="col-lg-8 col-md-8 col-sm-12 desc">
			  
				<h3>Ahmad Bilal</h3>
				<p>
				   First, let me introduce myself. My name is Ahmad Bilal, and I’m a full-time front end developer with 2 years experience. In that time, I’ve worked as a front-end developer for both a Forbes 500 consulting firm and a small company.

This may not sound like a lot of experience, but finishing my second year as a developer has been a huge milestone for me. This is because I had no real experience doing web development — and not much programming experience in general beyond some basic C# and Java training I got from a few online courses. I also didn’t have a computer science degree since I graduated with a degree in IT project management.

I’d never written about my experience despite all the help I’ve received from wonderful resources like Medium, Stack Overflow, and Reddit’s programming subreddits. So today, I decided to change that. Today I’m going to fill you in on what went right, and what didn’t, so that if you’re embarking on this journey, you’ll have better luck than I did.
				</p>
			</div>
		</div>
	</div>
</div>

<!-- portfolio -->
<div class="portfolio" id="portfolio">
     <h1 class="text-center">Portfolio</h1>
	<div class="container">
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="https://image.ibb.co/bUqtx7/g1.jpg" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="https://preview.ibb.co/nnMSPn/c2.jpg" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="https://image.ibb.co/d0M5AS/g2.jpg" class="img-fluid">
			</div>

			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="https://image.ibb.co/bD6u4n/g6.jpg" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="https://image.ibb.co/noCOx7/g8.jpg" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="https://image.ibb.co/i5DkAS/gal66.jpg" class="img-fluid">
			</div>

			
		</div>
	</div>
</div>


<!-- Posts section -->
<div class="blog" id="blog">
	<div class="container">
	<h1 class="text-center">Blog</h1>
		<div class="row">
			<div class="col-md-4 col-lg-4 col-sm-12">
				<div class="card">
					<div class="card-img">
						<img src="https://image.ibb.co/b0L7qS/4.jpg"class="img-fluid">
					</div>
					
					<div class="card-body">
					<h4 class="card-title">How to find users for your usability test</h4>
						<p class="card-text">
							
							Of all the tools in the UX toolkit, usability testing is one of the most prevalent and, arguably, the most…
						</p>
					</div>
					<div class="card-footer">
						<a href="" class="card-link">Read more</a>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-lg-4 col-sm-12">
				<div class="card">
					<div class="card-img">
						<img src="https://preview.ibb.co/bQvbH7/template_main.jpg" class="img-fluid">
					</div>
					
					<div class="card-body">
					   <h4 class="card-title">Fundamental Tools for Math in 2018</h4>
						<p class="card-text">
							
							Math education teaches one how to prove theorems and perform calculations. In one sense, the only thing that…
						</p>
					</div>
					<div class="card-footer">
						<a href="" class="card-link">Read more</a>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-lg-4 col-sm-12">
				<div class="card">
					<div class="card-img">
						<img src="https://image.ibb.co/igYGjn/05.jpg" class="img-fluid">
					</div>
					
					<div class="card-body">
					<h4 class="card-title">Data compression using images</h4>
						<p class="card-text">
							
							Beating gzip with a compression algorithm based on WebP ,JPG ,JIF ,vector and PNG images...
						</p>
					</div>
					<div class="card-footer">
						<a href="" class="card-link">Read more</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Team section -->
<div class="team" id="team">
	<div class="container">
	   <h1 class="text-center">Our Team</h1>
		<div class="row">
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="https://image.ibb.co/b0L7qS/4.jpg" class="img-fluid" alt="team">
				<div class="des">
				 Freshta sadaat
				 </div>
				<span class="text-muted">Manager</span>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="https://image.ibb.co/bwnRjn/b3.jpg"class="img-fluid" alt="team">
				<div class="des">
				 	 Maryam Ahmadi
				 </div>
				<span class="text-muted">S.enginner</span>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="https://image.ibb.co/nKzmk7/team_3.jpg" class="img-fluid" alt="team">
				<div class="des">
				 	 Sayed Abdullah 
				 </div>
				<span class="text-muted">Front End Developer</span>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="https://image.ibb.co/hUFqAS/team_img4.jpg"class="img-fluid" alt="team">
				 <div class="des">
				 Hadia Ahmadi
				 </div>
				<span class="text-muted">Team Manger</span>
			</div>
		</div>
	</div>
</div>

<!-- Contact form -->
<div class="contact-form" id="contact">
	<div class="container">
		<form>
			<div class="row">
				<div class="col-lg-4 col-md-4 col-sm-12">
				  <h1>Get in Touch</h1>	
				</div>
				<div class="col-lg-8 col-md-8 col-sm-12 right">
				   <div class="form-group">
				   	 <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
				   </div>
				   <div class="form-group">
				   	 <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
				   </div>
				   <div class="form-group">
				   	 <textarea class="form-control form-control-lg">
				   	 	
				   	 </textarea>
				   </div>
				   <input type="submit" class="btn btn-primary btn-block" value="Send" name="">
				</div>
			</div>
		</form>
	</div>
</div>
  <div  class="footer">
  <div class="copyright-w3-agileits">
	<div class="container" >
		<p class="copyright">© 2018 work. All Rights Reserved | Design by AhmadBilal<a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
    
	</div>
</div>
  </div>
<!-- add Javasscript file from js file -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src='js/main.js'></script>

</body>
</html>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Raleway');

body{
	padding: 0;
	margin: 0;
	background:#f4f4f4;
}
html,h1,h2,h3,h4,h5,h6,a{
	font-family: "Raleway";
}
.navbar{
	background:#0073e6;
}
.nav-link , .navbar-brand{
	color: #fff;
	cursor: pointer;
}
.nav-link{
	margin-right: 1em !important;
}
.nav-link:hover{
	background: #fff;
	

}
.navbar-collapse{
 justify-content: flex-end;
}
.navbar-toggler{
  background:#fff !important;
}

/*header style*/
.header{
	position: relative;
	background-image:url("https://preview.ibb.co/ihyOXn/headerback.jpg");
 
	background-size: cover;
	background-position: center;
  

}
.footer{
  
  background-color:#0073e6;
  padding:10px;
}
.copyright{
  
  margin-top:5px;
}

.overlay{
	position: absolute;
	min-height: 100%;
	min-width: 100%;
  
	left: 0;
	top: 0;
	background: rgba(244, 244, 244, 0.79);
}
.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;

}
.description h1{
	color:#0073e6 ;
}
.description p{
	color:#666;
	font-size: 20px;
	width: 60%;
	line-height: 1,5;
}
.description button{
	border:1px  solid #0073e6;
	background:#0073e6;
	color:#fff;
}
.about{
	margin: 4em 0;
	padding: 1em;
	position: relative;
}
.about h1{
	color:#0073e6;
	margin: 2em;
}
.about img{
	height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
	display: block;
	color: #888;
	position: absolute;
	left: 115px;
}
.about .desc{
	padding: 2em;
	border-left:4px solid #0073e6;
}
.about .desc h3{
	color: #0073e6;
}
.about .desc p{
	line-height:2;
	color:#888;
}


/*Portfolio*/
.portfolio{
	margin: 4em 0;
    position: relative;	
}
.portfolio h1{
	color:#0073e6;
	margin: 2em;	
}
.portfolio img{
	 height: 15rem;
	 width: 100%;
	 margin: 1em;

	

}

/*blog style*/

.blog{
	margin: 4em 0;
	position: relative;	
}
.blog h1{
	color:#0073e6;
	margin: 2em;	
}
.blog .card{
	box-shadow: 0 0 20px #ccc;
}
.blog .card img{
	width: 100%;
	height: 12em;
}
@media and (max-width: 768px){
 .team .item img{
 	width: 100%;
 }	
}
.blog .card-title{
	color:#0073e6;
	 
}
.blog .card-body{
	padding: 1em;
}
.team{
	margin: 4em 0;
	position: relative;

}
.team h1{
	color:#0073e6;
	margin: 2em;	
}
.team .item{
	position: relative;
	overflow: hidden;	
}
.team .des{
	background: #0073e6;
	color: #fff;
  opacity: 0.6;
	text-align: center;
	border-top-right-radius: 93%;
	transition:.3s ease-in-out;
	position: absolute;
	width: 88%;
	bottom: 24px;


}
.team .item:hover .des{
	height: 100%;
	background:#0073e6;
    position: absolute;
	width: 89%;
	padding: 5em;
	top: 0;
	border-top-right-radius: 0;
}
.contact-form{
	margin: 6em 0;
	position: relative;		
}

.contact-form h1{
	padding:2em 1px;
	color: #0073e6; 
}
.contact-form .right{
	max-width: 600px;
}
.contact-form .right .btn-secondary{
	background:  #F97300;
	color: #fff;
	border:0;
}
.contact-form .right .form-control::placeholder{
	color: #888;
	font-size: 16px;
}
            
          
!
            
              $(document).ready(function(){
 $('.header').height($(window).height());

 $(".navbar a").click(function(){
 	$("body,html").animate({
 		scrollTop:$("#" + $(this).data('value')).offset().top
 	},1000)
  
 })

})
$(".navbar a").click(function(){
  $("body,html").animate({
   scrollTop:$("#" + $(this).data('value')).offset().top
  },1000)
  
 })
            
          
!
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.

Console