basic Html css page
simple Landing page with use of html and some 😉🖳css.
below you find the html code and a simple screen screeshot of final product
you will find this landing page in 3 images
1. This is preview of carousel part below here👇
# This is second image
# this is the last image
After that you will find whole static page html and css code below👇
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>CafeWOW</title>
<link href="project-2.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row" id="op">
<div class="col-md-12 text-center" >
<h1 id="logo">CAFE-WOW</h1>
</div>
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<div class="row yp" >
<div class="col-md-12">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pappu3.jpg" class="img-fluid " alt="Responsive image" >
<div class="carousel-caption">
<h1>Freshley made juice</h1>
</div>
</div>
<div class="carousel-item">
<img src="images/papu3.jpg" class="img-fluid " alt="Responsive image">
<div class="carousel-caption">
<h1>shakes makes you crazy</h1>
</div>
</div>
<div class="carousel-item">
<img src="images/pappu2.jpg" class="img-fluid " alt="Responsive image">
<div class="carousel-caption">
<h1>Moktails</h1>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="row" id="lt">
<div class = "col-sm-4 offset-sm-1 text-center">
<img src="images/4box.jpeg" class="img-fluid " alt="Responsive image">
<h1 class="textontop">100% Fresh</h1>
</div>
<div class="col-sm-4 offset-sm-2 text-center">
<img src="images/boximage2.jpeg" class="img-fluid " alt="Responsive image">
<h1 class="textontop">Tastey</h1>
</div>
</div>
<div class="row"id="lp">
<div class = "col-sm-4 offset-sm-1 text-center">
<img src="images/boximage3.jpeg" class="img-fluid " alt="Responsive image">
<h1 class="textontop">Mouth-watering</h1>
</div>
<div class="col-sm-4 offset-sm-2 text-center">
<img src="images/boximage4.jpg" class="img-fluid " alt="Responsive image">
<h1 class="textontop">Hand Made</h1>
</div>
</div>
<div class="row " id="pp">
<div class="col-md-12 text-center">
<h1> <i class='fas fa-phone-alt'></i>Order-now<i class='fas fa-phone-alt'></i></h1>
<h1>91-8989023059</h1>
</div>
</div>
<div class="row" id="lg">
<h1 class='mx-auto'>Stay connected online</h1>
</div>
<div class="row " id="yt">
<div class="col-md-4 text-center">
<a href="http://www.google.com"><i class="fa fa-instagram fa-5x"></i></a>
</div>
<div class="col-md-4 text-center"><i class="fa fa-facebook-official fa-5x"></i>
</div>
<div class="col-md-4 text-center"><i class="fa fa-twitter-square fa-5x "></i>
</div>
</div>
Applied css is here
#logo{
font-family: 'Fruktur', cursive;
}
.textontop{
position: absolute;
width: 100%;
top: 50%;
color: yellow;
font-size: 20px;
}
#lt{
padding-top: 20px;
padding-bottom: 20px;
background-color: orange;
}
#lp{
padding-top: 20px;
padding-bottom: 20px;
background-color: orange;
}
.yp{
background-color: orange;
}
#map{
height: 300px;
}
#pp{
background-color:pink;
}
#yt{
padding-bottom: 30px!important;
}
#op{
background-color: azure!important;
}
#lg{
background-color: cornsilk;
}
Comments