Subscribe Now!

How to Create Beautiful Info Cards – CSS Tutorial for Beginners (2022)

Today’s this article will be based on making Beautiful Info Cards HTML/CSS we can call it.
How to Create Beautiful Info Cards with CSS - CSS Tutorial for Beginners (2022)
How to Create Beautiful Info Cards with CSS - CSS Tutorial for Beginners (2022)

Namaste ????

Today’s this article will be based on making Beautiful Info Cards HTML/CSS we can call it.

How to Create Beautiful Info Tutorial

How to Create Beautiful Info Source Code

.html file Code

Put this code between <body> Your Code Here </body> tags

<!-- Created by Codinghindi.in  -->

    <div class="container">
        <div class="card">
            <h2>North</h2>
            <svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            <p>a Calm trip</p>
            <div class="pic"></div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="socials">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chrome"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>


            </div>
            <button></button>
        </div>
        <div class="card card2">
            <h2>South</h2>
            <svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            <p>a Romantic trip</p>
            <div class="pic"></div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="socials">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chrome"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>


            </div>
            <button></button>
        </div>
    </div>

.css file Code

Put this code between <style> Your Code Here </style> tags and put in style.css file

/* Created by Codinghindi.in  */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #e6e5e1;
    width: 100vw;
    height: 100vh;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

svg {
    opacity: 1;
    font-size: 12px;
    will-change: transform;
    transform: scale(0.1);
    transition: all 0.2s ease;
    color: #000;
}

.card2 svg {
    color: #fff;
}

svg h2 {
    pointer-events: none;
}

.container .card {
    position: relative;
    width: 500px;
    height: 200px;
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 5px;
}

.container .card:before {
    content: "";
    z-index: 99;
    position: absolute;
    top: -10px;
    left: 32px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #e6e5e1;
}

.container .card:after {
    content: "";
    z-index: 99;
    position: absolute;
    bottom: -10px;
    left: 32px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #e6e5e1;
}

.container .card ul {
    z-index: 99;
    position: absolute;
    list-style: none;
    top: 39px;
    top: 5px;
}

.container .card ul li {
    width: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: #e6e5e1;
    margin: 6px 38px;
}

.container .card h2 {
    position: absolute;
    bottom: 0;
    right: 130px;
    font-size: 70px;
    font-family: sans-serif;
    font-weight: 700;
    z-index: 99;
    color: #fff;
}

.container .card .arrow-right {
    position: absolute;
    z-index: 100;
    right: 75px;
    bottom: 25px;
    font-size: 40px;
    cursor: pointer;
}

.container .card p {
    position: absolute;
    top: 20px;
    right: 70px;
    color: #333;
    opacity: 0.3;
    font-size: 12px;
    letter-spacing: 1px;
    writing-mode: vertical-lr;
    transition: all .2s ease;
}

.container .card .pic {
    z-index: 100;
    background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEgq_UDfJGKaE_HuGmYol4EpC3ET1J-NYAqqeI50hZtSpVsHdYIKpij2ho81EdZM2EUF1iPtgm1Uq6CpiCTd1pRlPG_2V2ltXOLJ5pZOtv5ge2fTnwlvxSsuYnTyPVRzBY4t0FkVSLms6Wx8qFvNZ5QIlt_m6g49A9RANqQRaOqNqZ-Oypc47peRCCHa=s1920");
    width: 400px;
    height: 200px;
    background-size: 100% 110%;
    filter: grayscale(100%);
}

.container .card2 .pic {
    background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEhJyZ-m6eSSOUyrniC7vTW2CtPqK5QjasXTRE5ThJe-UcziGA9abTcEOG3CaFuSiEL33yolV5yjve_9mgxxCh-k7-PQXVOgPMEjlp8vWf7IZGupQPgIorDNrcBdu8aJX17JrxkKhSdoGgpXTbFP8DUpE6srHDVE_JmRE3VvO91qF8-QA5MT3--52Jm9=s1920");
}

.container .card .socials {
    position: absolute;
    left: 60px;
    top: 0;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    align-items: center;
    width: 180px;
    height: 64px;
    border-radius: 80px;
}

.container .card:hover svg {
    opacity: 1;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
}

.container .card button {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    background-color: #da4d1d;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: all .3s ease;
    mix-blend-mode: hard-light;
}

.container .card button {
    font-size: 3rem;
}

.container:hover {
    overflow: hidden;
    border-radius: 10px;
}

.container .card:hover button {
    transform: scale(16.5);
}

.container .card:hover p {
    color: #fff;
    z-index: 999;
}

.container .card:hover .pic {
    filter: grayscale(0);
}

.container .card .socials svg:nth-of-type(1) {
    transition-delay: 0.4s;
}

.container .card .socials svg:nth-of-type(2) {
    transition-delay: 0.3s;
}

.container .card .socials svg:nth-of-type(3) {
    transition-delay: 0.2s;
}

.container .card .socials svg:nth-of-type(4) {
    transition-delay: 0.1s;
}

.container .card2 button {
    background-color: #2b26c3;
}

How to Create Beautiful Info Source Code Download

Download Now!
Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 62

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.