Table of Contents

Halloween offer card

Share Now :

Title : Halloween offer card using Html Css | W3pupil

Description

Hello W3PUPIL!!! We offer you a dynamic and visually appealing Halloween offer card that presents your information at a glance. This offer card snippet was created with precision using HTML and CSS.
An innovatively designed HTML and CSS Halloween offer card snippet is a powerful tool to present data in an organized and visually appealing way. Introducing our exclusive offer card, beautifully designed using HTML and CSS. Firstly, this eye-catching offer card showcases our latest offers and discounts in a sleek and modern design. With bright colours, clear typography and enticing visuals, it is designed to captivate and inform. So effortlessly discover unbeatable deals with this user-friendly card and enhance your shopping experience today with Halloween offer card. Don’t miss out – secure your savings now. Additionally, CSS also lets you add hover effects and a responsive design, so your deals card is interactive and accessible on multiple devices. This offer card is fully responsive and ensures seamless viewing on all devices.
So by using this HTML and CSS Halloween offer card snippet, you’re not just sharing information – you’re demonstrating your dedication to professionalism and contemporary web design. Overall, show off and interact with the world with this innovative and creative offer card snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is critical for smooth development. Below is a step-by-step guide.

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After successfully completing the download and installation, open Visual Studio Code.
  • Create a new folder on your desktop.
  • Go to the file and then open the folder you created.
  • Then add a file for HTML with the extension “.html” or “.htm”.
  • Also add another file for CSS with the extension “.css”.
  • Now you have an empty HTML file and a CSS file ready for your code.

Let's know how to open a downloaded file..

  • After you download the snippet file from W3pupil, you will get a zip file.
  • After unzipping, you can open the file in Visual Studio Code.
  • Now you have the HTML file and the CSS file to work with.
  • Take your time to fully understand the functionality of the code before making the changes you want in the Halloween offer card.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  <!--Hello Future Developer Thanks for Using w3pupil.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.w3pupil.com/">W3pupil</a></div>
</div>
<!--Check our website Regularly For New Snippets Post-->  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

  /** 
Hello Future Developer Thanks for Using w3pupil.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;
}  

Note :

  • We have coded CSS in a separate file and linked to the HTML file for creating Halloween offer card.
  • 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();

Download :

Share and Support W3pupil.com

Conclusion :

To change the code, you can download the source code files of the snippet. To improve your HTML and CSS skills, you can try rebuilding other creative HTML and CSS snippets available on W3pupil. If you have any technical questions, feel free to contact W3pupil. As soon as possible, we will do our best to resolve your request.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :