Scribd Logo
Upload

Welcome to Scribd!

  • Smoothie Page

    Uploaded by

    Kilaru Gayathri
    4 views12 pages
    Demo page

    Original Title

    smoothie_page

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Demo page

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views12 pages

    Smoothie Page

    Uploaded by

    Kilaru Gayathri
    Demo page

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 12

    HTML

    <!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>Smoothie Bar</title>

    <link rel="stylesheet" href="style.css">

    </head>

    <body>

    <div class="container">

    <div class="navbar">

    <img src="images/logo.jpg" class="logo">

    <nav>

    <ul>

    <li><a href="Home">Home</a></li>

    <li><a href="Cart">Cart</a></li>

    <li><a href="About">About</a></li>

    <li><a href="Contact">Contact</a></li>

    </ul>

    </nav>

    </div>

    <div class="row">

    <div class="col1">

    <h2>APRICOT STRAWBERRY <br>Nutrition Grade A</h2>

    <p>Low in Calorie and fat</p>

    <p>(Protein 1.5g)</p>
    <h4>₹90 </h4>

    <Button class="button" >Order Now</Button>

    </div>

    <div class="col2">

    <img src="images/apreecot.jpg" class="apreecot">

    <div class="color-box"></div>

    </div>

    </div>

    <div class="classrow">

    <div class="col3">

    <h2>CHOCOLATE BANANA <br>Nutrition Grade A</h2>

    <p>Low in Calorie and fat</p>

    <p>(Protein 19.6g)</p>

    <h4>₹ 90 </h4>

    <Button class="button" >Order Now</Button>

    </div>

    <div class="col4">

    <img src="images/Cocoa-Breakfast-Smoothies.jpg" class="choco">

    <div class="color-box2"></div>

    </div>

    </div>

    <div class="social">

    <img src="images/twit.png" >

    <img src="images/face.png" >

    <img src="images/insta.png" >


    </div>

    </div>

    </body>

    </html>

    CSS
    .container

    padding-left: 10%;

    padding-right: 10%;

    box-sizing: border-box;

    overflow: hidden;

    .navbar

    width: 100%;

    display: flex;

    align-items: center;

    .logo

    width: 150px;

    cursor: pointer;
    margin: 30px;

    nav

    flex: 1;

    text-align: right;

    nav ul li

    list-style: none;

    display: inline-block;

    margin-right: 30px;

    nav ul li a

    text-decoration: none;

    color: #000;

    font-size: 20px;

    nav ul li a:hover

    color: rgb(250, 3, 15);

    .row

    display: flex;

    justify-content: space-between;
    align-items: center;

    margin: 80px;

    .col1

    flex-basis: 100%;

    position: relative;

    margin-left: 30px;

    .col1 h2

    font-size: 25px;

    .col1 p

    font-size: 15px;

    color: rgb(247, 84, 44);

    font-weight: 200;

    margin: 10px 0 10px;

    .col1 h4

    margin: 20px 0;

    font-size: 20px;

    .button

    {
    width: 150px;

    border: none;

    border-radius: 10px;

    padding: 15px 15px;

    outline:none;

    color:#fff;

    cursor: pointer;

    overflow: hidden;

    transition-duration: 1s;

    font-size: 20px;

    .button

    background: linear-gradient(to right,#fca651,#ff0000);

    color: white;

    .button:hover

    background:linear-gradient(to left,#fca957,#ff0000);

    .col1::after

    content:'';

    width:10px;

    height:50%;

    background: linear-gradient(to right,#fca651,#ff0000);

    position: absolute;
    left: -40px;

    top: 8px;

    .col2

    position: relative;

    flex-basis: 100%;

    display: flex;

    align-items: center;

    .col2 .apreecot

    height: 350px;

    width:450px;

    border-radius: 50%;

    .color-box

    position: absolute;

    background:linear-gradient(to left,#fca957,#ff0000);

    border-radius: 20px 0 0 20px;

    height: 100%;

    width: 100%;

    z-index: -1;

    transform: translateX(250px);

    }
    /* second product */

    .classrow

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 80px;

    .col3

    flex-basis: 100%;

    position: relative;

    margin-left: 30px;

    .col3 h2

    font-size: 25px;

    .col3 p

    font-size: 15px;

    color: rgb(247, 84, 44);

    font-weight: 200;

    margin: 10px 0 10px;

    .col3 h4
    {

    margin: 20px 0;

    font-size: 20px;

    .button

    width: 150px;

    border: none;

    border-radius: 10px;

    padding: 15px 15px;

    outline:none;

    color:#fff;

    cursor: pointer;

    overflow: hidden;

    transition-duration: 1s;

    font-size: 20px;

    .button

    background: linear-gradient(to right,#fca651,#ff0000);

    color: white;

    .button:hover

    background:linear-gradient(to left,#fca957,#ff0000);

    .col3::after
    {

    content:'';

    width:10px;

    height:50%;

    background: linear-gradient(to right,#fca651,#ff0000);

    position: absolute;

    left: -40px;

    top: 8px;

    .col4

    position: relative;

    flex-basis: 100%;

    display: flex;

    align-items: center;

    .col4 .choco

    height: 400px;

    width: 450px;

    border-radius: 50%;

    .color-box2

    position: absolute;

    background:linear-gradient(to left,#990000,#0e0d0d);

    border-radius: 20px 0 0 20px;


    height: 100%;

    width: 100%;

    z-index: -1;

    transform: translateX(250px);

    .social img

    height: 25px;

    margin:20px;

    cursor: pointer;

    .social

    text-align: center;

    You might also like