web development:

For using these code first you have to make a folder on your desktop with name website. Then make two different folders in the website folder with the name of index.html and style.css. Download some photo from google save them in img folder with extension.jpg.

web development tutorial- HTML code

<!DOCTYPE html>
<html>
<head>
      <title>Website</title>
      <link rel="stylesheet" type="text/css" href="css/style.css">
	  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
     <div class="container">
         <div class="main">
	 <nav>
	<div class="logo">
	<h1> MASTER </h1>
	</div>
	 <ul>

        <li class="active"><ahref="#">Home</a></li>
	<li><a href="#">services</a></li>
	<li><a href="#">contact us</a></li>
	<li><a href="#">About us</a></li>
	<li><a href="#">Blog</a></li>
</ul>
</nav>
</div>
	<div class="slider">
	  <div class="title">
	    <h1> We Believe <span> Great Design Make </span> Great Business</h1>
	     <p>Professional creativity clean featured website template for your business Let's start an awesome business</p> 
	<a href="#" class="btn">GET MORE!</a>
	<a href="#" class="btn">PURCHASE NOW</a>
  </div>
 </div>
 
<div class="main">
	<div class="flex-container">
		<div class="flex-items">
		<i class="fa fa-newspaper-o text-blue"></i>
			<h5>unlimited layout</h5>
			<p>hello everyone help us</p>
		</div>
		<div class="flex-items">
		<i class="fa fa-code text-blue"></i>
			<h5>unlimited layout</h5>
			<p>hello everyone help us</p>
		</div>
		<div class="flex-items">
		<i class="fa fa-pinterest text-blue"></i>
			<h5>pin article</h5>
			<p>hello everyone help us</p>
		</div>
		<div class="flex-items">
		<i class="fa fa-deaf text-blue"></i>
			<h5>new article</h5>
			<p>hello everyone help us</p>
		</div>
	</div>
	
	<div class="flex-container">
		<div class="flex-items2">
			<h6>Easy way to build web</h6>
			<h3>perfect powerful theme for designer</h3>
			<p>we provide a large collection of home and inner page,
			unlimited power and clear code, carefully created elements, and easily customise template</p>
			<a href="#" class="read">READ MORE</a>
		</div>
		
		<div class="flex-items2">
			<div class="zoom">
				<img src="img/2.jpg">
				</div>
		<div class="title-line margin-top"></div>
			<div class="para">
				<p class="margin-top-1">lorem Ipsum is simply the textprinting dummy file, 
				which is used for informal purpose</p>
		</div>
	
	
	</div>
	
	<div class="flex-items2">
			<div class="zoom">
				<img src="img/3.jpg">
				</div>
		<div class="title-line margin-top"></div>
			<div class="para">
				<p class="margin-top-1">lorem Ipsum is simply the textprinting dummy file, 
				which is used for informal purpose</p>
		</div>
	
	
	</div>
</div>	
</div>
</div>
<section class="who-we-are">
	<div class="main">
		<div class="heading">
			<h2>Who we are</h2>
			<p> There are variation available majority suffered altertion words which look to be available</p>
			</div>
	 <div class="col-1">
      <img src="img/5.jpg">		
		<div class="text-box">
			<h4>Global strategy</h4>
			<p>There are variation available majority suffered altertion words which look to be available </p> 
			</div>
		</div>
		<div class="col-1">
      <img src="img/5.jpg">		
		<div class="text-box">
			<h4>Global strategy</h4>
			<p>There are variation available majority suffered altertion words which look to be available </p> 
			</div>
		</div>
		<div class="col-1">
      <img src="img/5.jpg">		
		<div class="text-box">
			<h4>Global strategy</h4>
			<p>There are variation available majority suffered altertion words which look to be available </p> 
			</div>
		</div>
		</div>
</section>	
<section class="full-dark">
	<div class="main">
		<div class="col-md-1">
			<div class="icon">
				<i class="fa fa-leaf"></i>
			</div>
				<div class="text-box-1">
				    <h5>Award-winning design</h5>
					<p> lorem epsum dolar amet consectetuer elit sit suspension</p>
					</div>
				</div>
				<div class="col-md-1">
			<div class="icon">
				<i class="fa fa-mobile"></i>
			</div>
				<div class="text-box-1">
				    <h5>Responsive theme</h5>
					<p> lorem epsum dolar amet consectetuer elit sit suspension</p>
					</div>
				</div>
				<div class="col-md-1">
			<div class="icon">
				<i class="fa fa-magic"></i>
			</div>
				<div class="text-box-1">
				    <h5>Bootstrap Support</h5>
					<p> lorem epsum dolar amet consectetuer elit sit suspension</p>
					</div>
				</div>
				<div class="col-md-1">
			<div class="icon">
				<i class="fa fa-heart"></i>
			</div>
				<div class="text-box-1">
				    <h5>portfolio of works</h5>
					<p> lorem epsum dolar amet consectetuer elit sit suspension</p>
					</div>
				</div>
				<div class="col-md-1">
			<div class="icon">
				<i class="fa fa-share-alt"></i>
			</div>
				<div class="text-box-1">
				    <h5>Awesome slidershows</h5>
					<p> lorem epsum dolar amet consectetuer elit sit suspension</p>
					</div>
				</div>
				<div class="col-md-1">
			<div class="icon">
				<i class="fa fa-lightbulb-o"></i>
			</div>
				<div class="text-box-1">
				    <h5>Tons of featured</h5>
					<p> lorem epsum dolar amet consectetuer elit sit suspension</p>
					</div>
				</div>
			</div>
</section>	
<section class="full-light">
	<div class="main">
		<div class="heading">
			<h2>Our services</h2>
			<p>These are the various services which we provide through the online and offline portal</p> 
			</div>
			
			<div class="col-md-2">
				<div class="inner">
					<img src="img/8.png">
					<h6>6 Different Header menu style.</h6>
					<p>The differnt style as the needs of programmer and web developer</p>
		             </div>
				</div>
				<div class="col-md-2">
				<div class="inner">
					<img src="img/9.png">
					<h6>Unlimited useful shortcut.</h6>
					<p>The differnt style as the needs of programmer and web developer</p>
		             </div>
				</div>
				<div class="col-md-2">
				<div class="inner">
					<img src="img/10.png">
					<h6>Multi Purpose design template.</h6>
					<p>The differnt style as the needs of programmer and web developer</p>
		             </div>
				</div>
				<div class="col-md-2">
				<div class="inner">
					<img src="img/11.png">
					<h6>Setup any website quick & easy.</h6>
					<p>The differnt style as the needs of programmer and web developer</p>
		             </div>
				</div>
			</div>
			</section>
			
			<section class="parallax">
				<div class="main">
					<div class="heading">
					   <h2>Visually Stunning website</h2>
					      <p>Loreum Ipsum as you can 
						  change anything you want about your the way layout.</p>
						  </div>
						  
						  <div class="col-md-1">
							<div class="icon">
								<i class="fa fa-laptop"></i>
								</div>
								<div class="text-box-1">
									<h5>Responsive template</h5>
									<P>Web page editors now use Loreum Ipsum as their default model text, and search various over the year</p>
									</div>
								</div>
								<div class="col-md-1">
							<div class="icon">
								<i class="fa fa-user"></i>
								</div>
								<div class="text-box-1">
									<h5>MULTI PURPOSE USE</h5>
					
									<P>Web page editors now use Loreum Ipsum as their default model text, and search various over the year</p>
									</div>
								</div>
								<div class="col-md-1">
							<div class="icon">
								<i class="fa fa-edit"></i>
								</div>
								<div class="text-box-1">
									<h5>EXCELLENT SUPPORT</h5>
									<P>Web page editors now use Loreum Ipsum as their default model text, and search various over the year</p>
									</div>
								</div>
								<div class="col-md-1">
							<div class="icon">
								<i class="fa fa-tablet"></i>
								</div>
								<div class="text-box-1">
									<h5>DESIGN & BRANDING</h5>
									<P>Web page editors now use Loreum Ipsum as their default model text, and search various over the year</p>
									</div>
								</div>
								<div class="col-md-1">
							<div class="icon">
								<i class="fa fa-superscript"></i>
								</div>
								<div class="text-box-1">
									<h5>WEB DEVELOPMENT</h5>
									<P>Web page editors now use Loreum Ipsum as their default model text, and search various over the year</p>
									</div>
								</div>
								<div class="col-md-1">
							<div class="icon">
								<i class="fa fa-exchange"></i>
								</div>
								<div class="text-box-1">
									<h5>CUSTOMER CARE</h5>
									<P>Web page editors now use Loreum Ipsum as their default model text, and search various over the year</p>
									</div>
								</div>
							</div>
						</section>	
						
			
			
			
</body>
</html>

web development tutorial- CSS code

*{
  	margin: 0;
  	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
.container{
	
	width: 100%;
	height: auto;
	background-color: #fff;
}
.main{
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
}
nav{
 	width: 100%;
	height: 100px;l
	background-color: #fff;
}
nav ul{
	float: right;
}
nav ul li{
	display: inline-block;
	list-style-type: none;
}
nav ul li a{
	text-decoration: none;
	color: #272727;
	line-height: 100px;
	padding: 35px 10px;
	font-size: 13px;
 	letter-spacing: 0.5px;
}
.logo{
	float: left;
	line-height: 100px;
}
.slider{
	width: 100%;
	height: 430px;
	background-image: url(../img/1.jpg);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	}
.slider .title{
	width: 40%;
	height: auto;
	position: absolute;
	left: 18.5%;
}
.slider .title h1{
	font-size: 37px;
	color: #fff;
	line-height: 45px;
}
.slider .title h1 span{
	color: #01d7a7 !important;
}
.slider .title p{
	font-size: 15px;
	color:#fff;
	line-height: 20.5px;
	margin-top: 20px;
	margin-right: 30px;
}
.slider .title .btn{
	color: #fff;
	background-color: #01d7a7;
	border-radius: 3px;
	padding: 16px 36px;
	text-align: center;
	Letter-spacing: 0.5px;
	text-decoration: none;
	margin-right: 10px;
	line-height: 26px;
	display: inline-block;
	font-size: 16px;
	margin-top: 15px;
	transition: 0.3s all;
}
.slider .title .btn:hover{
	background-color: #272727;
}
.flex-container{
	margin-top: 80px;
	clear: both;
	flex-direction: left;
}
.main .flex-container .flex-items{
	width: 20%;
	display: inline-block;
	text-align: center;
	margin-left: 46px;
}
.main .flex-container .flex-items h5{
	font-size: 18px;
	Letter-spacing: 0.5px;
	margin: 20px 0px;
}
.main .flex-container .flex-items p{
	color: #727272;
}
.main .flex-container .flex-items .text-blue{
	font-size: 40px;
	color: #3278fa !important;
}
.flex-items2{
	width: 33.06%;
	height: auto;
	float: left;
	padding: 0 15px;
}
.flex-items2 h6{
	Letter-spacing: 3px;
	font-size: 16px;
	margin-bottom: 15px;
	color: #3278fa;
}
.flex-items2 h3{
	color: #272727;
	font-size: 27px;
	line-height: 35px;
	Letter-spacing: 0.5px;
	margin-bottom: 20px;
}
.flex-items2 .read{
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	border: 1px solid #272727;
	background-color: #272727;
	padding: 10px 25px;
	transition: 0.3s all;
	border-radius: 20px;
}
.flex-items2 p{
	padding-bottom: 40px;
	color: rgb(114,114,114);
	margin: 0 0 10px;
	font-size: 14px;
}
.flex-items2 .zoom img{
	max-width: 100%;
}
.title-line{
	width: 30px;
	border-bottom: 3px solid #3278fa;
	text-align: center;
}
.margin-top{
	float: left;
	margin-top: 20px;
	margin-left: 20px;
}
.para{
	width: 83.333%;
	padding-right: 20px;
	padding-left: 20px;
	float: right;
	margin-top: 8px;
}
.margin-top-1{
	float: left;
	margin-top: 10px;
	width: 100%;
}
.who-we-are{
	width: 100%;
	padding: 72px 0px 72px 0px;
	background-image: url(../img/4.jpg);
	background-size: cover;
	clear: both;
	float: left;
}
.who-we-are .heading h2{
	font-size: 35px;
	line-height: 35px;
	margin-bottom: 20px;
	Letter-spacing: 0.5px;
	text-align: center;
	color: #fff;
}
.who-we-are .heading p{
	width: 60%;
	margin: 0 auto;
	text-align: center;
	line-height: 25px;
	color: #fff;
}
.who-we-are .col-1{
	width: 33.333%;
	float: left;
	padding: 0 15px;
	margin-top: 60px;
}
.who-we-are .col-1 img{
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
.who-we-are .col-1 .text-box{
	padding: 10%;
	background-color: #f3f3f3;
	width: 100%;
	text-align: center;
}
.who-we-are .col-1 .text-box h4{
	margin-bottom: 9px;
	text-transform: uppercase;
	font-size: 22px;
	line-height: 25px;
	letter-spacing:0.5px;
}
.who-we-are .col-1 .text-box p{
	color: #727272;
	line-height: 23px;
	text-align: center;
	margin: 0 0 10px;
	font-size: 14px;
}
.full-dark{
	width: 100%;
	padding: 72px 0 72px 0;
	background-color: #121212;
	float: left;
	clear: both;
}
.full-dark .col-md-1{
	width: 33.333%;
	float: left;
	padding-right: 15px;
	padding-left: 15px;
	margin-top: 40px;
}
.full-dark .col-md-1 .icon{
	float: left;
	margin: 0px 20px 0px 0px;
	color: #01d7a7 !important;
	font-size: 32px;
}
.full-dark .col-md-1 .text-box-1{
	padding: 0px 0px 0px 60px;
	display: block;
}
.full-dark .col-md-1 .text-box-1 h5{

	font-size: 18px;
	line-height: 23px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	margin-bottom: 5px;
}
.full-dark .col-md-1 .text-box-1 p{
	font-size: 14px;
	margin: 0px 0px 10px;
	line-height: 23px;
	color: #fff;
	opacity: 0.5;
}
.full-light{
	width: 100%;
	padding: 72px 0px 72px 0px;
	float: left;
	clear: both;
	display: block;
	background-color: #f3f3f3;
}
.full-light .heading{
	padding-bottom: 40px;
}
.full-light .heading h2{
	font-size: 35px;
	line-height: 35px;
	margin-bottom: 20px;
	letter-spacing: 0.5px;
	text-align: center;
	color: #272727;
}
.full-light .heading p{
	width: 60%;
	margin: 0 auto;
	text-align: center;
	line-height: 25px;
	color: #727272;
	font-size: 14px;
}
.full-light .col-md-2{
	width: 25%;
	float: left;
	padding: 0 15px;
}
	
.full-light .col-md-2 .inner{
	padding: 20px;
	text-align:center;
	font-size: 14px;
	background-color: #fff;
}
.full-light .col-md-2 .inner img{
	max-width: 33.333%;
	height: auto;
	margin-bottom: 20px;
	vertical-align: middle;
}
.full-light .col-md-2 .inner h6{
	margin-top: 10px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 21px;
}

.full-light .col-md-2 .inner p{
	line-height: 23px;
	color: #727272;
	margin: 0 0 10px;
}
.parallax{
	width: 100%;
	padding: 100px 0 90px 0;
	background: url(../img/12.jpg) 50% 0 no-repeat fixed;
	float: left;
    clear: both;
}
.parallax .main .heading h2{
	font-size: 35px;
	line-height: 40px;
	color: #fff;
	margin-bottom: 10px;
	text-align: center;
}
.parallax .main .heading p{
	width: 50%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 14px;
}
.parallax .main .col-md-1 {
	width:33.333%;
	float: left;
	color: #fff;
	margin-top: 60px;
}

.parallax .main .col-md-1 .icon{
	float: left;
	margin: 0px 20px 0px 0px;
	font-size: 32px;
}
.parallax .main .col-md-1 .text-box-1 {
	padding: 0 0 0 60px;
	display: block;
	width: 83.333%;
}
.parallax .main .col-md-1 .text-box-1 h5{
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 0.5px;
	margin-bottom: 5px;
	text-transform: uppercase;
}
.parallax .main .col-md-1 .text-box-1 p{
	font-size: 14px;
	margin: 0 0 10px;
	line-height: 23px;
}