MAKING OF A CARD(CSS)

 

     EXERCISE ON CSS

EXERCISE III

HAVE TO DUBLICATE THE FOLLOWIND CARD:


HTML CODE(WITH STYLING):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS CArd</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins:wght@300&display=swap');

    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: rgb(234, 239, 241);
        padding: 45px;
        display: flex;
    }

    .card {
        background-color: white;
        width: 300px;

        border-radius: 12px;
        padding: 0px 0px 14px 0px;
        margin-left: 10px;
    }

    .image {
        padding: 5px 0 20px 5px;
    }

    .image img {
        border-radius: 12px;
        width: 290px;
    }

    .capsule {
        padding: 0 15px;
        font-family: 'Open Sans', sans-serif;
        font-family: 'Poppins', sans-serif;
    }

    .capsule>span {
        padding: 5px 10px;
        border: 1px solid rgb(216, 219, 220);
        border-radius: 15px;
        color: rgb(146, 150, 151);
        font-size: small;
    }

    .content {
        padding: 20px 15px;
        font-family: 'Poppins', sans-serif;
    }

    .content>p {
        padding-top: 20px;
    }

    .button {
        text-align: center;
    }

    .button>button {
        border: none;
        border-radius: 15px;
        padding: 10px 20px;
        font-size: x-small;
        font-weight: bold;
        color: rgb(104, 104, 227);
        background-color: rgb(235, 240, 241);
    }

    .button>button:hover {
        color: rgb(49, 49, 223);
        background-color: rgb(86, 151, 230);
    }
</style>

<body>
    <div class="card">
        <div class="image">
            <img src="https://th.bing.com/th/id/OIP.P-rCmqTXnMlM1YbNP1MFCgHaE7?pid=ImgDet&rs=1" alt="image">
        </div>
        <div class="capsule">
            <span>Nauture</span>
            <span>Lake</span>
        </div>
        <div class="content">
            <h2>Hello World</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam iure temporibus minima eos minus?
                Consequatur assumenda aliquid non neque consectetur qui nesciunt nobis inventore rerum.</p>
        </div>
        <div class="button">
            <button>Read More</button>
        </div>
    </div>
    <div class="card">
        <div class="image">
            <img src="https://th.bing.com/th/id/OIP.P-rCmqTXnMlM1YbNP1MFCgHaE7?pid=ImgDet&rs=1" alt="image">
        </div>
        <div class="capsule">
            <span>Nauture</span>
            <span>Lake</span>
        </div>
        <div class="content">
            <h2>Hello World</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam iure temporibus minima eos minus?
                Consequatur assumenda aliquid non neque consectetur qui nesciunt nobis inventore rerum.</p>
        </div>
        <div class="button">
            <button>Read More</button>
        </div>
    </div>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

UltraEdit Website Clone(Part 1- Nav Bar)

Image
   EXERCISE ON CSS EXERCISE VI HTML Code: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >ultra edit clone</ title > </ head > < style >     @import url ( 'https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@300&family=Poppins:wght@100;300&display=swap' ); </ style > < style >     * {         margin : 0 ;         padding : 0 ;     }     a {         color : inherit ;         text-decoration : none ;         font-size : x-small ;         font-family : 'Merriweather' , serif ;         font-family : 'Open Sans' , sans-serif ;   ...
Read more

Nav Bar Template

    EXERCISE ON CSS EXERCISE IV HTML Code: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >CSS Multicolor Website</ title > </ head > < style >     @import url ( 'https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@300&family=Poppins:wght@300&display=swap' );     * {         padding : 0 ;         margin : 0 ;     }     :root {         --bodyback : #cbccd5 ;         --navback : #040468 ;         --spncol : white ;         --undercol : red ;     }     body {         background-color : var ( --bodyback ) ;     } ...
Read more

MEDIA PLAYER(HTML)

Image
            EXERCISE ON HTML EXERCISE I THIS IS HOW VIDEOS, PHOTOS AND AUDIO FILES ARE IMPORTED IN WEBSITE. HTML CODE: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Media player</ title > </ head > < body >     < h1 >My files</ h1 >       < h2 >Video files</ h2 >     < video height = "200" src = "1.mp4" controls poster = "mercedes.jpg" loop >Mercedes</ video >     < video height = "200" src = "1.mp4" controls poster = "mercedes.jpg" loop >Mercedes</ video >     < video height = "200" src = "1.mp4" controls poster = "mercedes.jpg" loop >Mercedes</ video >     < video height = "200" src...
Read more