My Village Web Site Design in HTML And CSS:
HTML:
_________________________________________________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fontawesome-free-5.11.2-web (1)\fontawesome-free-5.11.2-web\css\all.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Fascinate+Inline|Titillium+Web&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Yesteryear&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.leaf{
background-image:url('leaf.png');
background-repeat:repeat-x;
background-size:100px 100px;
background-color:rgba(154,205,50 ,0.6)!important;
box-shadow: 2px -3px 19px 3px #5c635a;
}
.navbar-toggler {
color: rgba(0,0,0,.5);
border-color: rgba(29, 29, 29, 0.38);}
.main-div{
width:100%;
height:650px;
background-image:linear-gradient(to left, rgba(154,205,50 ,1), rgba(154,205,50 ,0)),url('main.jpeg');
background-repeat:no-repeat;
background-size:100% 65%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-light navbar-light leaf">
<a class="navbar-brand colo" href="#">MyVillage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link go" href="#">Streets</a>
</li>
<li class="nav-item">
<a class="nav-link go" href="#">Roads</a>
</li>
<li class="nav-item">
<a class="nav-link go" href="#">Fields</a>
</li>
</ul>
</div>
</nav>
<div class="main-div">
<div class="con1">
<h1 class="main-heading">Welcome</h1>
<h2 class="sub-heading">to near the nature</h2>
</div>
<div class="con2" >
<button type="button" class="btn btn-primary btn1">Explore</button>
</div>
</div>
<div class="conee">
<div class="container-fluid co ">
<div class="row">
<div class=" col-md">
<div>
<div class="main">
<i class="fas fa-carrot" style="font-size:125px;color:white;padding:15px 50px 25px 50px;border-style:solid;border-color:white;border-radius:50%;border-width:3px;margin:50px 0px 0px 90px"></i>
<h1 class="headings">Fresh Vegs</h1>
</div>
</div>
</div>
<div class=" col-md ">
<div class="main">
<i class="fas fa-tree tree-icon" style="text-align:center;font-size:125px;color:white;padding:15px 50px 25px 50px;border-style:solid;border-color:white;border-radius:50%;border-width:3px;margin:50px 0px 0px 90px"></i>
<h1 class="headings">Shady Trees</h1>
</div>
</div>
<div class=" col-md ">
<div class="main">
<i class="fas fa-cloud-sun icon" style="font-size:125px;color:white;padding:15px 30px 25px 30px;border-style:solid;border-color:white;border-radius:50%;border-width:3px;margin:50px 0px 0px 90px"></i>
<h1 class="headings">Cool Wather</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
_______________________________________________________________________________
*{
padding:0px;
margin:0px;
}
.colo{
color:black!important;
font-family: 'Yesteryear', cursive;
font-size:23px!important;
}
.go{
color:rgba(0,0,0 ,0.6)!important;
}
.img1{
width:100%;
}
.con1{
position:relative;
top:100px;
left:10%;
width:320px;
}
.con2{
}
.main-heading{
width:100%;
padding:5px 30px 5px 10px;
font-family: 'Fascinate Inline', cursive;
font-size:60px;
background-color:rgba(222,222,222,0.6);
transform: rotate(-20deg);
/* Legacy vendor prefixes that you probably don't need... */
/* Safari */
-webkit-transform: rotate(-10deg);
/* Firefox */
-moz-transform: rotate(-10deg);
/* IE */
-ms-transform: rotate(-10deg);
/* Opera */
-o-transform: rotate(-10deg);
}
.sub-heading{
margin-top:-25px;
margin-left:120px;
background-color:green;
width:75%;
color:white;
padding:5px 0px 5px 10px;
font-weight:600;
font-family: 'Open Sans Condensed', sans-serif;
font-size:30px;
transform: rotate(-20deg);
/* Legacy vendor prefixes that you probably don't need... */
/* Safari */
-webkit-transform: rotate(-10deg);
/* Firefox */
-moz-transform: rotate(-10deg);
/* IE */
-ms-transform: rotate(-10deg);
/* Opera */
-o-transform: rotate(-10deg);
}
.btn1{
display: block!important;
max-width: 500px!important;
margin:180px auto!important;
background:rgba(222,222,222,0.5)!important;
font-weight:600!important;
border-width:4px!important;
border-color:green!important;
border-style:solid!important;
padding:8px 30px 8px 30px!important;
border-radius:30px!important;
}
.co{
margin-top:-228px;
position:relative!important;
background-color:#9ACD32!important;
padding-bottom:20px;
}
.main{
margin-top:25px;
height:300px;
border-radius:8px;
background-color:#008000;
box-shadow: 1px -1px 13px 5px #000000a1;
}
.pics{
display:block;
margin-left:auto;
margin-right-auto;
width:100%;
border-style:solid;
border-color:rgba(255,255,255,0);
border-width:3px;
}
.pics:hover{
}
.tree-icon{
font-size:100px;
}
.headings{
font-family: 'Mansalva', cursive;
color:white;
padding:15px 0px 0px 110px;
}
.vid{
background-color:#9ACD32;
height:300px;
}
.vid-e{
padding-top:40px;
padding-bottom:40px;
margin-left: auto;
margin-right: auto;
display: block;
width:400px;
height:300px;
outline:none;
}
_______________________________________________________________________________
0 Comments