Order Summary Component

-

Order Summary

 <!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>Order Summary Part</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <main class="card">
     
            <img src="images/illustration-hero.svg" alt="hero image" />

     <div class="container">
            <h2 class="title">Order Summary</h2>
            <p class="order-description">
                You can now listen to millions of songs, audiobooks, and podcasts on
                any device anywhere you like!
            </p>

            <div class="plan-container">
                <img src="images/icon-music.svg" alt="" />
                <div class="plan-description">
                    <strong>Annual Plan</strong>
                    <p>$5.99/year</p>
                </div>
                <a href="#">Change</a>
            </div>

            <button class="proceed-button">Proceed to payment</button>
            <button class="cancel-button">Cancel Order</button>

        </div>
        <!-- container ends -->
    </main>
</body>

</html>


Css File:


@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&display=swap');
:root{
    /* ### Primary */
     --pale-blue: hsl(225, 100%, 94%);
     --bright-blue: hsl(245, 75%, 52%);
   
    /* ### Neutral */
   
     --very-pale-blue: hsl(225, 100%, 98%);
     --desaturated-blue: hsl(224, 23%, 55%);
     --dark-blue: hsl(223, 47%, 23%);
}

*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
}
body{
    background-image: url(images/backgroung-desktop-variant.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--pale-blue
    );
    font-family: 'Red Hat Display', sans-serif;
    /* font-size: 16px; */
}
.card{
    width: 450px;
    background-color: white;
    color: var(--desaturated-blue);
    margin: 50px auto;
    border-radius: 20px;
    overflow: hidden;
}
.hero-image{
    width: 100%;
}
.container{
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    font-size: 18px;
}
.container > *{
    margin: 15px 0;
}
.title{
    color: var(--dark-blue);
    text-align: center;
    padding: 10px;
    font-size: 32px;
    font-weight: 700;

}
.order-description{
    padding:0;
    margin: 20px;
    line-height: 25px;

}


/* plan-container */
.plan-container{
    background-color: var(--very-pale-blue);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    padding: 20px;
   
}
.plan-description{
    line-height: 25px;
    margin-right:130px;
}
.plan-container strong{
    color: var(--dark-blue);
}
.plan-container a{
    color: var(--bright-blue);
    font-weight: 700;
    font-size: 13px;
}
.plan-container a:hover{
    text-decoration: none;
    opacity: 0.8;
}

/* buttons */
button{
    width: 100%;
    border: none;
    padding: 1rem 0;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}
.proceed-button{
background-color: var(--bright-blue);
color: white;
box-shadow: 0 20px 30px -8px rgb(102, 83, 225);
}
.cancel-button{
background-color: white;
color: var(--desaturated-blue);
margin-top: 5px;
}
.proceed-button:hover{
  opacity: 0.8;
}
.cancel-button:hover{
color: black;
}

Comments

Post a Comment

Popular posts from this blog

Tables-Page2

-
                                    TABLES-Page 2 <!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> HTML Tables </title> </head> <body> TABLE # 1     <h2> BASIC TABLE STRUCTURE </h2>     <table border = "3" width= "40%" >         <tr>             <td> cell1 </td>             <td> cell2 </td>             <td> cell3 </td>         </tr>         <tr>           ...
Read more
-
Image
HTML AND A LITTLE CSS  APPLIED       <!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> Table </title>         </head> <body>     <table border = "2" width= "90%" >         <!-- 10 rows and 8 columns -->         <caption> Overall Performance of the Team </caption>         <thead class= "merge" >   <!-- 1st ROW -->       <tr bgcolor = "#A9A9A9" >                 <th rowspan= "2" > Equips </th>             <th colspan= "6" > Table of Performance </t...
Read more

Html Tables

-
Image
  <! 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 > HTML TABLES </ title > </ head > < body >     < h1 > TABLE 1 </ h1 >     < table border = "4" width = "35%" >             < thead >                 <!-- 1st Row Spanned-->               < tr >                 < th colspan = "4" > Purchased Equipment (June,2006) </ th >               </ tr >                       <!-- 2nd Row Spanned...
Read more