Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Background Image intro-page"..
Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Background Image intro-page" using HTML5 and CSS3.First of all we need to create a index.html and style.css file.after creating those file we need to open it in our editor and follow this coding instruction..
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http:fonts.googleapis.com/css?family=Montserrat:400.700%7CPT+Serif:400.700.400italic' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
</head>
<body>
<div class="bgimage">
<div class="menu">
<div class="leftmenu">
<h4>RIMONNAHID</h4>
</div>
<div class="rightmenu">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">WORKS</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">BLOGS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div class="text">
<h4>DESIGN-DEVELOPMENT-BRANDING</h4>
<h1>CREATIVE & EXPERIENCE</h1>
<h3>WE ARE THE ONE OF THE WORLD'S TOP CREATIVE DESIGN AGENCIES</h3>
<button id="buttonone"><a href="">like</a></button>
<button id="buttontwo"><a href="">share</a></button>
<button id="buttonthree"><a href="">Subscribe</a></button>
</div>
</div></body>
</html>
style.css
*{
margin:0px;
padding:0px;
}.menu{
width:100%;
height:80px;
background-color:rgba(0,0,0,.5);
}
.leftmenu{
line-height: 80px;
float:left;
max-width: 100%;
}
.leftmenu h4{
padding-left: 80px;
font-weight:bold;
color:white;
font-size:22px;
font-family: 'Montserrat', sans-serif;
}.rightmenu{
width:75%;
height: 80px;
float:right;
}.rightmenu ul{
margin-left:200px;
}
.rightmenu ul li{
font-family: 'Montserrat', sans-serif;
display:inline-block;
list-style: none;
color:white;
font-weight:bold;
line-height:80px;
margin-left:0px;
text-transform: uppercase;
}
.rightmenu ul li a{
font-size:10px;
padding:4px 16px;
color:orange;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
.rightmenu ul li a:hover{
background-color:#555555;
color:white;
border:1px solid white;
text-shadow:var(--shadow);
}.bgimage{
background-image: url('picture/alphabet-blur-conceptual-256633.jpg');
height:100vh;
background-size:cover;
background-position:center;
}
.text{
width:100%;
margin-top:100px;
text-transform:uppercase;
text-align:center;
color:white;
}
.text h4{
font-size:10px;
font-family: 'open sans' , sans-serif;
}
.text h1{
font-size:40px;
font-family: 'Montserrat', sans-serif;
font-weight:700px;
margin:14px 0px;
}.text h3{
font-size: 10px;
font-family: 'Montserrat', sans-serif;
}#buttonone{
background-color:aqua;
font-weight:bold;
text-transform: uppercase;
line-height: 40px;
width:120px;
margin-top:12px;
border:3px solid white;
}#buttonone a{
font-size:12px;
color:white;
padding:14px 43px;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}#buttonone a:hover{
background-color:rgba(0,0,0,.5);}
#buttontwo{
background-color:fuchsia;
font-weight:bold;
text-transform: uppercase;
line-height: 40px;
width:120px;
margin-top:12px;
border:3px solid white;
}#buttontwo a{
font-size:12px;
color:white;
padding:14px 36px;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}#buttontwo a:hover{
background-color:rgba(0,0,0,.5);}
#buttonthree{
background-color:lime;
font-weight:bold;
text-transform: uppercase;
line-height: 40px;
width:120px;
margin-top:12px;
box-shadow:var(--shadow);
border:3px solid white;
}#buttonthree a{
font-size:12px;
color:white;
padding:14px 22px;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}#buttonthree a:hover{
background-color:rgba(0,0,0,.5);
color:white;
box-shadow: 0 16px 20px 0 rgba(0,0,0,0.7) ,0 19px 55px 0 rgba(0,0,0,0.65);
}
0 Comments Here
Authentication required
You must log in to post a comment.
Log in