HTML CODE:-
<!DOCTYPE html>
<html>
<head>
<title>Net-Salution</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="topnav" id="myTopnav">
<a href="index.html" >Home</a>
<a href="our services.html">Services</a>
<a href="offer.html">Latest Offer</a>
<a href="sign up.html">Sign Up</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active item_slider">
<img src="img/s1.jpg" alt="Los Angeles" class="simage" >
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item item_slider">
<img src="img/s2.jpg" alt="Chicago" class="simage" >
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item item_slider">
<img src="img/s3.jpg" alt="New York" class="simage">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="hot_deal">
<h1>Latest offer</h1>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj74t-FUav_WMyX5zE6pAaQBBVnLwIXwtcUdCGqZxFVJ6HwbGR" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj74t-FUav_WMyX5zE6pAaQBBVnLwIXwtcUdCGqZxFVJ6HwbGR" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj74t-FUav_WMyX5zE6pAaQBBVnLwIXwtcUdCGqZxFVJ6HwbGR" alt="New york" style="width:100%;">
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="hot_deal">
<h1>Hot Deals</h1>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj74t-FUav_WMyX5zE6pAaQBBVnLwIXwtcUdCGqZxFVJ6HwbGR" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj74t-FUav_WMyX5zE6pAaQBBVnLwIXwtcUdCGqZxFVJ6HwbGR" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj74t-FUav_WMyX5zE6pAaQBBVnLwIXwtcUdCGqZxFVJ6HwbGR" alt="New york" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="offline_service">
<h1>Offline Services</h1>
<h4>
<ol>
<li>Web & Graphics Design</li>
<li>Web & Software Development</li>
<li>Digital Marketting</li>
<li>Social Media Services Sell</li>
</ol>
</h4>
<button><a href="#"> Bid Now</a></button>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="online_service">
<h1>Online Services</h1>
<h4>
<ol>
<li>Web & Graphics Design</li>
<li>Web & Software Development</li>
<li>Digital Marketting</li>
<li>Social Media Services Sell</li>
</ol>
</h4>
<button><a href="">Login Now</a></button>
</div>
</div>
</div>
<div class="subscribe">
<h3>Subscribe</h3>
</div>
<div class="sub_input">
<div class="row">
<div class="col-xs-9 col-sm-9 col-lg-9">
<input type="text" name="" placeholder="Enter Your Email Id....">
</div>
<div class="col-xs-3 col-sm-3 col-lg-3">
<a href="">
<input type="submit" name="" id="submit" >
</a>
</div>
</div>
</div>
<div class="live_project">
<h1>Our Live Project</h1>
</div>
<div class="live_project_image">
<img class="img-responsive" src="img/vc.png" alt="Chania" align="middle">
<div class="centered"> VC sites-The Unlimited Services</div>
<div class="details">
<h2><a href=""> Details... </a></h2>
</div>
</div>
<div class="recent_bid">
<h1>Recent Bid</h1>
</div>
<div class="bid">
<div class="bid_name"><b>school website desighn</b></div>
<div class="bid_des"><p style="color:grey;">i need a website to design the the whole website using gst management dhfd j dujkf ifhd idv jhd jhd..........</p>
</div>
<div class="amount"><b>Rate:- </b> 12343242345453 Euro to 4564778678688689 Euro </div>
<i>Pay Using </i>Netbanking<br>
<i>Submit Last Date</i>2018-10-27
<i>Category:-</i>Website_design
</div>
<div class="bid">
<div class="bid_name"><b>school website desighn</b></div>
<div class="bid_des"><p style="color:grey;">i need a website to design the the whole website using gst management dhfd j dujkf ifhd idv jhd jhd..........</p></div>
<div class="amount"><b>Rate:- </b> 12343242345453 Euro to 4564778678688689 Euro </div>
<i>Pay Using </i>Netbanking<br>
<i>Submit Last Date</i>2018-10-27
<i>Category:-</i>Website_design
</div>
<div class="get_request">
<button class="button_get"><a href="#">Gets/Request</a></button>
</div>
<div class="more_service">
<marquee>More Services Coming Soon....</marquee>
</div>
<div class="Footer">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="address">
<h5 class="follow_us">Contacts</h5>
<dl class="contact-list">
<dt>Address:</dt>
<dd>798 South Park Avenue, Jaipur, Raj</dd>
</dl>
<dl class="contact-list">
<dt>email:</dt>
<dd><a href="mailto:#">dkstudioin@gmail.com</a></dd>
</dl>
<dl class="contact-list">
<dt>phones:</dt>
<dd><a href="tel:#">+91 7568543012</a> <span>or</span> <a href="tel:#">+91 9571195353</a>
</dd>
</dl>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="address">
<div class="follow_us">Follow us</div>
<ul class="social-network social-circle">
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</script>
</body>
</html>
CSS CODING:-
body {
font-family: "Lato", sans-serif;
}
.hot_deal{
margin: 0px;
box-shadow: 3px 4px 3px #6b5e5e;
}
.hot_deal h1{
border: 2px solid #09F;
text-align: center;
background-color: #89a587cc;
color: orange;
text-shadow: 2px 2px 0px #fcfffd;
}
.offline_service h1{
border: 2px solid #09F;
text-align: center;
background-color: #89a587cc;
color: orange;
text-shadow: 2px 2px 0px #fcfffd;
box-shadow: 2px 5px 3px #6b5e5e;
}
.offline_service{
box-shadow: 2px 5px 3px #6b5e5e;
margin-top: 8px;
}
.offline_service button{
border: 2px solid red;
margin-left: 40%;
font-size: 20px;
background-color: #89a587cc;
border-radius: 10px;
margin-bottom: 5px;
}
.offline_service button:hover{
margin-left: 40%;
font-size: 20px;
background-color: green;
border-radius: 10px;
color: #fff;
border: 2px solid orange;
}
.offline_service a:hover{
color: #fff;
}
.online_service{
box-shadow: 2px 5px 3px ;
margin-bottom: 10px;
margin-top: 8px;
}
.online_service h1{
border: 2px solid #09F;
text-align: center;
background-color: #89a587cc;
color: orange;
text-shadow: 2px 2px 0px #fcfffd;
box-shadow: 2px 5px 3px #6b5e5e;
}
.online_service button{
border: 2px solid red;
margin-left: 40%;
font-size: 20px;
background-color: orange;
border-radius: 10px;
margin-bottom: 5px;
}
.online_service button:hover{
margin-left: 40%;
border: 2px solid orange;
font-size: 20px;
background-color: green;
border-radius: 10px;
color: #fff;
}
.online_service a:hover{
color: #fff;
}
.subscribe{
background-color: #89a587cc;
text-shadow: 2px 2px 0px #fcfffd;
box-shadow: 2px 5px 3px #6b5e5e;
}
.subscribe h3{
text-align: center;
}
.sub_input{
}
.sub_input input{
border: 2px solid green;
width:100%;
margin-top: 5px;
height: 38px;
background-color: #d8d8d8;
}
#submit{
width: 100%;
border-radius: 10px;
margin-right: 5px;
}
#submit:hover{
background-color: orange;
color: red;
}
.live_project{
border: 2px solid #09F;
text-align: center;
text-shadow: 3px 3px 3px;
color: #202f20;
margin-top: 5px;
box-shadow: 5px 5px 5px #3b3c3b;
margin-bottom: 8px;
}
.live_project_image{
border: 2px solid #09F;
background-color: #2e504b;
box-shadow: 3px 4px 6px #373837;
}
.live_project_image img{
height: 2%;
margin: auto;
width: 50%;
}
.live_project_image .centered{
border: 2px solid #277ab1;
color: #8c3131;
text-align: center;
font-size: 25px;
width: 100%;
background-color: #DCDCDC;
text-shadow: 2px 2px 0px #3dd26f;
}
.live_project_image .details h2:hover{
color: red;
}
.live_project_image .details h2{
text-align: center;
color: #ffffff;
font-size: 30px;
margin-left: 40%;
width: 120px;
}
.recent_bid{
border: 2px solid #0099ff;
text-align: center;
text-shadow: 3px 3px 3px #ff008170;
color: #042322d1;
margin-top: 8px;
box-shadow: 5px 5px 5px #373837;
}
.bid{
background-color:black;
box-shadow: 5px 6px 7px black;
text-shadow: 0 0 2px black;
color:blue;
width:100%;
border-radius:10px;
margin-top: 10px;
}
.bid b{
font-family: all;
font-size:20px;
color:white;
margin-left: 9px;
}
.bid a{
text-decoration: none;
}
.bid i{
color:white;
font-weight: bold;
margin-left: 9px;
}
.bid p{
margin-left: 9px;
}
.button_get{
background-color: gray;
width: 100%;
margin-top: 10px;
height: 50px;
color: red;
}
.button_get a{
color: red;
font-size: 30px;
text-shadow: 3px 3px 3px green;
}
.button_get:hover{
color: #fff;
}
.button_get a:hover{
color: #fff;
text-decoration: none;
text-shadow: 3px 3px 3px red;
}
.more_service{
color: red;
width: 100%;
background-color: orange;
margin-top: 10px;
height: 50px;
line-height: 50px;
font-size: 25px;
text-shadow: 3px 3px 3px;
margin-bottom: 10px;
}
.Footer{
background-color: #9a9191;
box-shadow: 8px 8px #627C62;
margin-bottom: 20px;
border-radius: 10px;
}
.address{
margin: auto;
text-align: center;
padding: 5px;
margin-bottom: 10px;
}
.address ul{
margin-top: 50px;
}
.address h5{
text-align: center;
font-size: 25px;
color: #fff;
text-shadow: 3px 3px 3px #272323fa;
}
.address dl{
margin-left: 20px;
}
.address dt,dd{
text-align: left;
}
.follow_us{
text-shadow: 3px 3px 3px;
font-size: 25px;
color: #fff;
text-shadow: 3px 3px 3px #272323fa;
padding: 30px;
text-align: center;
}
.follow_us:hover{
font-weight: bold;
text-shadow: 3px 3px 3px red;
}
/* footer social icons */
ul.social-network {
list-style: none;
display: inline;
padding: 0;
margin: auto;
text-align: center;
width: 100%;
}
ul.social-network li {
display: inline;
margin: auto;
text-align: center;
}
/* footer social icons */
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-circle a {
background-color: #2f2d2f;;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.item_slider{
height: 400px;
width: 100%;
}
.item_slider img{
width: 100%;
height: 400px;
background-size: cover;
}
.image{
height: 150px;
width: 200px;
padding: 30px;
border-radius: 50%;
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@media screen and (max-height: 600px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
0 Comments