Home

recent posts

Home / Website Design / Simple web page design using html and CSS

Simple web page design using html and CSS

Learn How to make a responsive login page using HTML and CSS. latest login page UI design with HTML and CSS. Web site Design Tutorial

Simple web page design using html and css

Video Tutorial

For Download the Background image Click Here

How to use the code in stpe by step

  1. Open Your text Editor(like: VS code, SublimeText or Notepad++)
  2. Create a .html(like: index.html) file
  3. Copy the HTML code the code and past in the index.html file
  4. Then, Create a .css(like: style.css) file
  5. Copy the CSS code and past in style.css file
  6. Open the file in your browser

HTML CODE

HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resturent Landing page design</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
</head>

<body>
    <header>
        <h3>Ve<span>gan</span></h3>
        <nav>
            <ul class="nav_links">
                <li><a href="#">Reaturent</a></li>
                <li><a href="#">Event</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
        <div class="links2">
            <i class="bi bi-search"></i>
            <i class="bi bi-person"></i>
            <i class="bi bi-bag"><span>2</span></i>

            <button class="btn"><a href="#">Sign in</a></button>
        </div>
    </header>

    <section class="first_containt">
        <div class="title_content">
            <span class="vegan">Vegan</span>
            <span class="resturent">Resturent</span>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem explicabo mollitia eos exercitationem ipsa
                nemo non eaque, necessitatibus, velit quisquam nostrum ex atque recusandae laudantium aut? Sit illo
                impedit nobis?</p>
            <div class="wrapper">
                <div class="field">
                    <input type="text" placeholder="Email Adderss">
                    <label class="btn-2">Get Table</label>
                </div>
            </div>
        </div>

        <div class="image1">
            <img class="rotation" src="./images/img5.png" alt="Dish Inage">
        </div>
    </section>

    <section class="menu_section">

        <h3>Propular Items</h3>
        <div class="top_menu">
        </div>
        <div class="bottom_menu">
            <div class="card" style="width: 18rem; border-radius: 15px;">
                <img class="card-img-top" src="./images/img2.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Pasta</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias at delectus, in
                        error similique quibusdam,.</p>
                    <div class="cut-price">
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                        <span>$12.50</span>
                    </div>

                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="./images/img5.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Salad</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias at delectus, in
                        error similique quibusda exercitationem maxime deserunt nisi quaerat. Architecto..</p>
                    <div class="cut-price">
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                        <span>$8.50</span>
                    </div>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="./images/img4.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Masrum Rice</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias at delectus, in
                        error similique quibusdam,.</p>
                    <div class="cut-price">
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                        <span>$20.50</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="social_icon">
            <ul>
                <li><a href="#"><i class="bi bi-facebook"></i></a></li>
                <li><a href="#"><i class="bi bi-twitter"></i></a></li>
                <li><a href="#"><i class="bi bi-instagram"></i></a></li>
                <li><a href="#"><i class="bi bi-google"></i></a></li>
                <li><a href="#"><i class="bi bi-github"></i></a></li>
            </ul>
        </div>
        <h6>© Copy Right by Vegan 2021</h6> 
    </footer>
</body>

</html>

CSS CODE

The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.

  
  @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: rgb(239, 236, 236);
}

li , a, button{
    font-size: 16px;
    color: #999;
    text-decoration: none;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
}

header h3{
    color: #999;
    font-family: 'Itim', cursive;   
}

header h3 span{
    color: #7FD479;
    /* font-family: 'Girassol', cursive; */
}

.nav_links{
    list-style: none;
}

.nav_links li{
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a{
    transition: all 0.4s ease 0s;
}

.nav_links li a:hover{
    border: 1px solid #7FD479;
    padding: 5px;
    text-decoration: none;
    color: #999;
}

.links2 i{
    padding: 0 10px;
    cursor: pointer;
    position: relative;
    font-size: 22px;
}

.links2 i span{
    width: 12px;
    height: 12px;
    font-size: 9px;
    border-radius: 50px;
    border: 1px solid #fff;
    position: absolute;
    background: #7FD479;
    bottom: -5px;
    right: 10px;
    text-align: center;
}

.links2 .btn{
    padding: 9px 25px;
    margin-left: 5px;
    background: #7FD479;
    border: none;
    transition: all 0.3s ease 0s;
    border-radius: 15px;
}

.links2 .btn a{
    color: #fff;
    background: none;
    text-decoration: none;
}

.first_containt{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
}

.first_containt .title_content{
    width: 50%;
    /* margin: 100px; */
    margin-top: 100px;
    margin-left: 100px;
}

.first_containt .title_content .vegan{
    font-size: 8rem;
    color: #7FD479;
    font-family: 'Girassol', cursive;
}

.first_containt .title_content .resturent{
    font-size: 3rem;
    color: #999;
    font-family: 'Girassol', cursive;
}

.first_containt .title_content p{
    color: #999;
}

.wrapper{
    position: relative;
    height: 60px;
    width: 600px;
    display: flex;
    margin-top: 30px;
    align-items: center;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    justify-content: center;
}

.wrapper .btn-1{
    position: absolute;
    height: 100%;
    width: 50%;
    color: #7FD479;
    background: #fff;
    font-weight: 500;
    font-size: 27px;
    line-height: 60px;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

.wrapper .field{
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

.wrapper .field input{
    height: 100%;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 0 130px 0 15px;
    font-size: 15px;
    outline: none;
    color: #999;
}

.wrapper .field::placeholder{
    color: #999;
}

.wrapper .field .btn-2{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: 100px;
    color: #fff;
    border-radius: 5px;
    line-height: 40px;
    cursor: pointer;
    background: #7FD479;
}

.first_containt .image1{
    width: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
}

.rotation{
    -webkit-transition: -webkit-transform 1s;
    -webkit-transform: rotate(360deg) translateZ(0);
}

.rotation:hover{
    -webkit-transform: rotate(90deg) translateZ(0);
}

.image1 img{
    width: 400px;
}

.menu_section{
    width: 100%;
    min-height: 100vh;
}

.menu_section h3{
    color: #999;
    font-family: 'Girassol', cursive;
    border: 3px solid #7FD479;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.top_menu{
    height: 50vh;
    background: rgb(239, 236, 236);
}

.bottom_menu{
    height: 50vh;
    background: #7FD479;
    position: relative;
    display: flex;
}

.bottom_menu .card{
    position: absolute;
    left: 10%;
    top: -50%;
    box-shadow: 5px 10px 15px 0px #999;
    border-radius: 15px;
}

.btn-primary{
    background: #7FD479;
    outline: none;
    border: none;
}

.bottom_menu .card:hover{
    border: 5px solid #999;
}

.card img{
    border-radius: 15px 15px 0 0;
}

.bottom_menu .card:nth-child(2){
    left: 40%;
}
.bottom_menu .card:nth-child(3){
    left: 70%;
}

.card .card-body .card-title{
    color: #999;
    font-family: 'Poppins', sans-serif;
}

.card .card-body{
    border-radius: 15px;
    cursor: pointer;
}

.card .card-body .card-text{
    color: #999;
    opacity: 0.7;
}

.card .card-body .cut-price span{
    float: right;
    padding: 5px 0;
    color: #999;
}

footer{
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #7FD479;
}

.social_icon, ul,li,i, h6,a{
    background: none;
    list-style: none;
    text-decoration: none;
}

.social_icon ul{
    display: flex;
    justify-content: space-between;
    padding: 5px 60px;
    border: 2px solid #999;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.social_icon ul li a i{
    color: #fff;
}

.bi-facebook:hover{
    color: #3b5998;
}
.bi-instagram:hover{
    color: #8a3ab9;
}
.bi-twitter:hover{
    color: #00acee;
}
.bi-google:hover{
    color: #DB4437;
}
.bi-github:hover{
    color: #333;
}

footer h6{
    text-align: center;
    color: #999;
    font-family: 'Poppins', sans-serif;
}

No comments:

Subscribe to: Post Comments ( Atom )

top navigation

  • Home
  • About
  • Contact
    • Powered by Blogger.