Halloween Offer Card Using HTML and CSS

0





























Hello Developers, We provide you with a dynamic and eye-catching Halloween offer card which displays your details at a glance. This offer Card Snippet has been designed with accuracy using HTML and CSS. An innovatively designed HTML and CSS Halloween offer card snippet is a powerful tool for presenting data in a clear and visually appealing way. Introducing our exclusive offer card, beautifully designed with HTML and CSS. This eye-catching offer card showcases our latest offers and discounts in a sleek and modern design. With bright colours, clear typography and enticing imagery, it's designed to captivate and inform. Effortlessly discover unbeatable offers with this user- friendly card and enhance your shopping experience today with the Halloween Offer Card. With CSS, you can also add hover effects and a responsive design to make your offer card interactive and accessible on multiple devices. This offer card is fully responsive and ensures a seamless display on all devices. By using this HTML & CSS Table Snippet, you are not only sharing information but also demonstrating your commitment to professionalism and modern web design. Show off & interact with the World with this innovative & creative Database table UI Design Snippet. Note: In this snippet we have used glass morphism. So if you want to change the blur, you can change in the CSS file .c2in  backdrop-filter: blur();

How to make Halloween offer Card Using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Offer Card UI design - learningrobo</title> <meta name="description" content="Offer Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="offer card,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="section1"> <div class="card"> <div class="cardin1"> <div class="c2in"> <h3>50%<br>OFF</h3> <h2>ON</h2> <h6>Website Templates</h6> <button>Buy Now</button> <div class="icons"> <i class="fab fa-youtube"></i> <i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-linkedin"></i> </div> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Yantramanav&display=swap');
*{
    box-sizing: border-box;
}
:root{
    --bg:#434343;
    --fontcolor:#ddd;
}
body{
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
}
.card{
    display: flex;
    flex-direction:row;
    justify-content:space-between;
    border-radius: 10px;
    width:650px;
    height:450px;
    background-image:url("https://cdn.pixabay.com/photo/2020/09/23/19/58/halloween-5596921_1280.jpg");
    background-position:top left;
    background-repeat: no-repeat;
    background-size:cover;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 7px 19px 0px;
}
.cardin1{
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    height:450px;
    padding:20px 30px; 
    width:640px;
    color:var(--fontcolor);
}
.c2in{
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    height:430px;
    padding:20px 30px; 
    width:600px;
    background-color:#0D2133;
    backdrop-filter:blur(10px);
    background-color:rgba(0,0,0,0.1);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
}
.c2in h3{
    margin:0px;
    font-family: 'Yantramanav', sans-serif;
    font-size: 70px;
    text-align: center;
    line-height:60px;
}
.c2in h2{
    margin:0px;
    font-family: 'Yantramanav', sans-serif;
    font-size: 30px;
}
.c2in h6{
    font-family: 'Yantramanav', sans-serif;
    margin:0px;
    font-size:16px;
}
.c2in button{
    padding: 10px 40px;
    font-size: 16px;
    border-radius: 30px;
    transition: .5s;
    border:none;
    background-color:#121212;
    color:var(--fontcolor);
    font-weight: 900;
    margin:10px 0px;
    border:2px solid #fff;
}
.c2in button:hover{
    transform: scale(1.05);
    cursor: pointer;
    background-color: #121212;
}
.c2in .icons{
    display: flex;
    align-items: end;
    margin:10px 0px;
}
.c2in .icons i{
    background-color: #f1f1f1;
    margin: 2px 4px;
    padding: 10px;
    border-radius:30px;
    color:#121212;
    font-size:20px;
}
.c2in .icons i:hover{
    cursor: pointer;
    background-color:#ddd;
}
@media only screen and (max-width: 630px){
    .card{
        flex-direction: column;
        width:98%;
        height:fit-content;
    }
    .cardin1{
        width:100%;
        border-radius:10px;
    }
    .c2in{
        width:95%;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}
We hope you would like this Halloween offer Card Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Halloween offer Card Using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome