Nice background Image Intro Page

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
Related Post
StorialTechNice background Image Intro Page
Nice background Image Intro Page

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Background Image intro-page"..


StorialTechBootstrap 5 | New Update of Bootstrap
Bootstrap 5 | New Update of Bootstrap

Bootstrap হলো সবচেয়ে বড় এবং জনপ্রিয় Front-end-FrameworkBootstrap তাদের নতুন ভার্সন পাবলিশ করেছে এবং ভার্সনটির নাম..


StorialTech3D Slinky Text with Html and Css
3D Slinky Text with Html and Css

Web designer's need to know many feature design for his skill and website. Now we make..