27.4 C
Gujarat
HomeLanding PagesHow To Make Christmas Website Design Using HTML, CSS & JavaScript

How To Make Christmas Website Design Using HTML, CSS & JavaScript

Hello Dear Readers, Today In this Post, You will learn How To Make a Christmas Website Design Using HTML, CSS & JavaScript. This Website Contains a Header, Home, Giving, Celebrate, Gift, New, Messages & footer.

If you like this Website, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes on codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything. Catch your user’s attention with a beautiful Complete Responsive Website created with only HTML and CSS. If you’re a beginner you can use this Awesome design in your project and websites. I believe this UI design code will help you a lot.

What should you know before you start?

  • HTML
  • CSS
  • JavaScript

What will we learn?

  • Variables CSS
  • Create Header & Nav Menu
  • Create Home Page
  • Buttons
  • Background Header
  • Create Celebrate Section
  • Create Gift Section
  • Create News Letter Section
  • Create Footer Section
  • Scroll Sections Active Link
  • Scroll Up
  • Scroll Bar
  • Dark/Light Mode
  • Responsive For Breakpoints
  • ScrollReveal Animation

You can see the Demo Here Christmas Website Design

Implement Christmas Website Design Using HTML, CSS & JavaScript

First, we define some CSS variables

Variables CSS
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(355, 70%, 54%);
  --first-color-alt: hsl(355, 66%, 50%);
  --title-color: hsl(355, 4%, 15%);
  --text-color: hsl(355, 4%, 35%);
  --text-color-light: hsl(355, 4%, 55%);
  --body-color: #fff;
  --container-color: #fff;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Poppins', sans-serif;

  --biggest-font-size: 1.5rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes Bottom ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}
Create Header & Nav Menu
Christmas Website Design Menu
<!--==================== HEADER ====================-->
        <header class="header" id="header">
            <nav class="nav container">
                <a href="#" class="nav__logo">
                    <img src="assets/img/logo.png" alt="" class="nav__logo-img"> 
                    Christmas
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#home" class="nav__link active-link">Home</a>
                        </li>
                        <li class="nav__item">
                            <a href="#celebrate" class="nav__link">Celebrate</a>
                        </li>
                        <li class="nav__item">
                            <a href="#gift" class="nav__link">Gifts</a>
                        </li>
                        <li class="nav__item">
                            <a href="#new" class="nav__link">New</a>
                        </li>
                    </ul>

                    <div class="nav__close" id="nav-close">
                        <i class='bx bx-x' ></i>
                    </div>

                    <img src="assets/img/nav-light.png" alt="" class="nav__img">
                </div>
                <div class="nav__btns">
                    <!-- Theme change button -->
                    <i class='bx bx-moon change-theme' id="theme-button"></i>

                    <!-- Toggle button -->
                    <div class="nav__toggle" id="nav-toggle">
                        <i class='bx bx-grid-alt' ></i>
                    </div>
                </div>

            </nav>
        </header>
/*=============== HEADER ===============*/
.header {
  width: 100%;
  background-color: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  transition: .4s; /*For animation dark mode*/
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo, 
.nav__close, 
.nav__toggle {
  color: var(--title-color);
}

.nav__logo {
  display: flex;
  align-items: center;
  column-gap: .25rem;
  font-weight: var(--font-medium);
}

.nav__logo-img {
  width: 1.5rem;
}

.nav__toggle {
  display: inline-flex;
  font-size: 1.25rem;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    background-color: var(--body-color);
    top: -100%;
    left: 0;
    width: 100%;
    padding: 4rem 0;
    border-radius: 0 0 1.5rem 1.5rem;
    box-shadow: 0 1px 4px hsla(0, 4%, 15%, .1);
    transition: .4s;
  }
}

.nav__img {
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-15deg);
}

.nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.5rem;
}

.nav__link {
  color: var(--title-color);
  font-weight: var(--font-medium);
  transition: .3s;
}

.nav__link:hover {
  color: var(--first-color);
}

.nav__close {
  font-size: 2rem;
  position: absolute;
  top: .5rem;
  right: 1rem;
  cursor: pointer;
}

/* Show menu */
.show-menu {
  top: 0;
}

/* Change background header */
.scroll-header {
  box-shadow: 0 1px 4px hsla(0, 4%, 15%, .1);
}

/* Active link */
.active-link {
  color: var(--first-color);
}
Create Home Page
Christmas Website Design Home
<main class="main">
            <!--==================== HOME ====================-->
            <section class="home" id="home">
                <div class="home__container container grid">
                    <img src="assets/img/home.png" alt="" class="home__img">

                    <div class="home__data">
                        <h1 class="home__title">Merry Christmas and <br> Happy New Year!</h1>
                        <p class="home__description">
                            Christmas and a new year is about to begin, 
                            all good wishes and successes.
                        </p>
                        <a href="#" class="button">Get Started</a>
                    </div>
                </div>
            </section>
</main>
/*=============== HOME ===============*/
.home__container {
  padding-top: 1.5rem;
  row-gap: 1.5rem;
}

.home__img {
  width: 320px;
  justify-self: center;
}

.home__data {
  text-align: center;
}

.home__title {
  font-size: var(--biggest-font-size);
  line-height: 140%;
  margin-bottom: var(--mb-0-5);
}

.home__description {
  font-size: var(--small-font-size);
  padding: 0 2rem;
  margin-bottom: var(--mb-2-5);
}
GIVING section
Christmas Website Design Giving
 <!--==================== GIVING ====================-->
            <section class="giving section container">
                <h2 class="section__title">
                    Start Giving This <br> Christmas
                </h2>

                <div class="giving__container grid">
                    <div class="giving__content">
                        <img src="assets/img/giving1.png" alt="" class="giving__img">
                        <h3 class="giving__title">Surprise gifts</h3>
                        <p class="giving__description">They are the best gifts there is.</p>
                    </div>

                    <div class="giving__content">
                        <img src="assets/img/giving2.png" alt="" class="giving__img">
                        <h3 class="giving__title">Ornaments</h3>
                        <p class="giving__description">Give a moment to decorate.</p>
                    </div>

                    <div class="giving__content">
                        <img src="assets/img/giving3.png" alt="" class="giving__img">
                        <h3 class="giving__title">Lots of love</h3>
                        <p class="giving__description">Give away feelings that last forever.</p>
                    </div>
                </div>
            </section>
/*=============== GIVING ===============*/
.giving__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
}

.giving__content {
  text-align: center;
}

.giving__img {
  width: 100px;
  transition: .3s;
}

.giving__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-25);
}

.giving__description {
  font-size: var(--small-font-size);
}

.giving__img:hover {
  transform: translateY(-.25rem);
}
CELEBRATE section
Christmas Website Design Celebreate section
 <!--==================== CELEBRATE ====================-->
            <section class="celebrate section container" id="celebrate">
                <div class="celebrate__container grid">
                    <div class="celebrate__data">
                        <h2 class="section__title celebrate__title">
                            Celebrate With A <br> Lot Of Love
                        </h2>
                        <p class="celebrate__description">
                            In this holidays, celebrate with much love and peace, offering many 
                            blessings to our loved ones, friends and neighbors, wishing them 
                            a good Christmas message.
                        </p>
                        <a href="#" class="button">Send Good Wishes</a>
                    </div>

                    <img src="assets/img/celebrate.png" alt="" class="celebrate__img">
                </div>
            </section>
/*=============== CELEBRATE ===============*/
.celebrate__container {
  row-gap: 1rem;
}

.celebrate__data {
  text-align: center;
}

.celebrate__title {
  margin-bottom: var(--mb-1-5);
}

.celebrate__description {
  margin-bottom: var(--mb-2-5);
}

.celebrate__img {
  width: 280px;
  justify-self: center;
}
GIFT Section
Christmas Website Design Gift Section
<!--==================== GIFT ====================-->
            <section class="gift section container" id="gift">
                <h2 class="section__title">Share A Gift</h2>

                <div class="gift__container grid">
                    <article class="gift__card">
                        <img src="assets/img/gift1.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">$15</h3>
                        <span class="gift__title">Gingerbread</span>
                    </article>

                    <article class="gift__card">
                        <img src="assets/img/gift2.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">$22</h3>
                        <span class="gift__title">Santa Claus Hat</span>
                    </article>

                    <article class="gift__card">
                        <img src="assets/img/gift3.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">$48</h3>
                        <span class="gift__title">Christmas Tree</span>
                    </article>

                    <article class="gift__card">
                        <img src="assets/img/gift4.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">$35</h3>
                        <span class="gift__title">Snowman</span>
                    </article>

                    <article class="gift__card">
                        <img src="assets/img/gift5.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">$12</h3>
                        <span class="gift__title">Candy Stick</span>
                    </article>
                </div>
            </section>
/*=============== GIFT ===============*/
.gift__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.gift__card {
  display: grid;
  position: relative;
  background-color: var(--container-color);
  box-shadow: 0 4px 16px hsla(355, 25%, 15%, .1);
  padding: 1.5rem 1rem 1rem;
  border-radius: .75rem;
}

.gift__img {
  width: 100px;
  justify-self: center;
  margin-bottom: var(--mb-0-25);
  transition: .3s;
}

.gift__icon {
  font-size: 1.25rem;
  color: var(--first-color);
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

.gift__price {
  font-size: var(--h3-font-size);
}

.gift__title {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
}

.gift__card:hover .gift__img {
  transform: translateY(-.25rem);
}
NEW Section
Christmas Website Design  New
<!--==================== NEW ====================-->
            <section class="new section container" id="new">
                <h2 class="section__title">New Gifts</h2>

                <div class="new__container">
                    <div class="swiper new-swiper">
                        <div class="swiper-wrapper">
                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets/img/new1.png" alt="" class="new__img">
                                <h3 class="new__price">$95</h3>
                                <span class="new__title">Reindeer</span>
                                
                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>

                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets/img/new2.png" alt="" class="new__img">
                                <h3 class="new__price">$20</h3>
                                <span class="new__title">Snow Globe</span>

                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>

                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets/img/new3.png" alt="" class="new__img">
                                <h3 class="new__price">$75</h3>
                                <span class="new__title">Sledge</span>

                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>

                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets/img/new4.png" alt="" class="new__img">
                                <h3 class="new__price">$15</h3>
                                <span class="new__title">Christmas Wreath</span>

                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>
                        </div>

                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>
/*=============== NEW ===============*/
.new__card {
  position: relative;
  width: 230px;
  background-color: var(--container-color);
  box-shadow: 0 4px 16px hsla(355, 25%, 15%, .1);
  padding: 1rem 1rem 1.5rem;
  border-radius: .75rem;
  text-align: center;
  margin-bottom: 4rem;
  overflow: hidden;
}

.new__overlay {
  width: 250px;
  height: 250px;
  background-color: var(--first-color);
  border-radius: 50%;
  position: absolute;
  top: -5rem;
  left: -.65rem;
  z-index: 0;
}

.new__img {
  position: relative;
  width: 150px;
  margin-bottom: var(--mb-2);
  transition: .3s;
}

.new__price {
  font-size: var(--h2-font-size);
}

.new__title {
  font-weight: var(--font-medium);
}

.new__button {
  display: flex;
  padding: .5rem;
  border-radius: .25rem .25rem .75rem .25rem;
  position: absolute;
  right: 0;
  bottom: 0;
}

.new__icon {
  font-size: 1.25rem;
}

.new__card:hover .new__img {
  transform: translateY(-.5rem);
}

/*Class Swiper*/
.swiper-pagination-bullet {
  background-color: var(--text-color);
}

.swiper-pagination-bullet-active {
  background-color: var(--first-color);
}
News Letter Section
Christmas Website Design  NewsLetter
<!--==================== MESSAGE ====================-->
            <section class="message section container">
                <div class="message__container grid">
                    <form action="" class="message__form">
                        <h2 class="message__title">Send Good <br> Wishes!</h2>
                        <input type="email" placeholder="Write your message" class="message__input">
                        <button class="button message__button">Send Message</button>
                    </form>

                    <img src="assets/img/message.png" alt="" class="message__img">
                </div>
            </section>
/*=============== MESSAGE ===============*/
.message__container {
  row-gap: 3rem;
  background-color: var(--first-color);
  padding: 2.5rem 1.5rem 2.5rem;
  border-radius: 1.25rem;
}

.message__form {
  text-align: center;
}

.message__title {
  color: #fff;
  margin-bottom: var(--mb-1-5);
}

.message__input {
  width: 100%;
  background: #fff;
  color: var(--text-color);
  padding: 1rem 1.5rem;
  border-radius: 3rem;
  border: none;
  outline: none;
  margin-bottom: var(--mb-1);
}

.message__button {
  background-color: var(--title-color);
  width: 100%;
}

.message__button:hover {
  background-color: var(--title-color);
}

.message__img {
  width: 200px;
  justify-self: center;
  transform: rotate(15deg);
}
FOOTER Section
Christmas Website Design  Footer Section
        <!--==================== FOOTER ====================-->
        <footer class="footer section">
            <div class="footer__container container grid">
                <div>
                    <a href="#" class="footer__logo">
                        <img src="assets/img/logo.png" alt="" class="footer__logo-img"> 
                        Christmas
                    </a>

                    <p class="footer__description">
                        This Christmas give <br> a lot of love
                    </p>
                </div>

                <div>
                    <h3 class="footer__title">Our Services</h3>

                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">Pricing</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Discounts</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Shipping mode</a>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer__title">Support</h3>

                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">FAQs</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Support center</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Contact Us</a>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer__title">Available On</h3>

                    <div class="footer__aviables">
                        <img src="assets/img/aviable1.png" alt="" class="footer__aviable-img">
                        <img src="assets/img/aviable2.png" alt="" class="footer__aviable-img">
                    </div>
                </div>

                <img src="assets/img/footer1.png" alt="" class="footer__img1">
                <img src="assets/img/footer2.png" alt="" class="footer__img2">
            </div>

            <span class="footer__copy">&#169; Bedimcode. All rigths reserved</span>
        </footer>
/*=============== FOOTER ===============*/
.footer {
  overflow: hidden;
}

.footer__container {
  position: relative;
  row-gap: 2rem;
}

.footer__logo {
  display: flex;
  align-items: center;
  column-gap: .25rem;
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.footer__logo-img {
  width: 1.5rem;
}

.footer__description {
  font-size: var(--small-font-size);
}

.footer__logo, 
.footer__title {
  margin-bottom: var(--mb-1);
}

.footer__title {
  font-size: var(--h3-font-size);
}

.footer__links, 
.footer__aviables {
  display: flex;
  flex-direction: column;
  row-gap: .75rem;
}

.footer__link {
  color: var(--text-color);
  transition: .3s;
}

.footer__link:hover {
  color: var(--title-color);
}

.footer__aviable-img {
  width: 100px;
  cursor: pointer;
}

.footer__copy {
  display: block;
  margin: 3.5rem 0 1rem 0;
  text-align: center;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

.footer__img1, 
.footer__img2 {
  position: absolute;
  width: 100px;
}

.footer__img1 {
  top: 25%;
  right: 2rem;
}

.footer__img2 {
  top: 75%;
  right: -4rem;
}
Making website Responsive
/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .giving__container {
    gap: 1rem;
  }

  .gift__container {
    grid-template-columns: 150px;
    justify-content: center;
  }
}

/* For medium devices */
@media screen and (min-width: 576px) {
  .home__description {
    padding: 0 8rem;
  }

  .giving__container {
    grid-template-columns: repeat(2, 142px);
    justify-content: center;
    gap: 2.5rem 3.5rem;
  }

  .celebrate__description {
    padding: 0 4rem;
  }

  .gift__container {
    grid-template-columns: repeat(2, 180px);
    justify-content: center;
    gap: 2rem;
  }

  .message__input,
  .message__button {
    width: 60%;
  }

  .footer__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 767px) {
  body {
    margin: 0;
  }
  .section {
    padding: 6.5rem 0 2rem;
  }

  .nav {
    height: calc(var(--header-height) + 1.5rem);
    column-gap: 3rem;
  }
  .nav__toggle, 
  .nav__close, 
  .nav__img {
    display: none;
  }
  .nav__menu {
    margin-left: auto;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 3rem;
  }
  .dark-theme .nav__menu {
    box-shadow: none;
  }

  .home__container,
  .celebrate__container,
  .message__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
  .home__container {
    padding-top: 8rem;
  }
  .home__data {
    text-align: initial;
  }
  .home__description {
    padding: 0;
  }

  .giving__container {
    grid-template-columns: repeat(3, 142px);
    column-gap: 5rem;
  }

  .celebrate__data, 
  .celebrate__title {
    text-align: initial;
  }
  .celebrate__description {
    padding: 0;
  }

  .gift__container {
    grid-template-columns: repeat(3, 200px);
    gap: 2.5rem;
  }

  .footer__container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* For large devices */
@media screen and (min-width: 992px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }

  .home__container {
    column-gap: 1rem;
  }
  .home__img {
    width: 500px;
  }
  .home__description {
    padding-right: 8rem;
  }

  .giving__container {
    column-gap: 8rem;
    padding-top: 2rem;
  }
  .giving__img {
    width: 120px;
  }

  .celebrate__img {
    width: 450px;
  }
  .celebrate__description {
    padding-right: 7rem;
  }

  .gift__container {
    padding-top: 2rem;
  }
  .gift__card {
    padding: 2rem 1.5rem 1.5rem;
  }
  .gift__img {
    width: 120px;
    margin-bottom: var(--mb-1);
  }
  .gift__title {
    font-size: var(--small-font-size);
  }

  .new__container {
    padding-top: 2rem;
  }
  .new__card {
    margin-bottom: 5rem;
  }
  .new__price {
    font-size: var(--h3-font-size);
  }

  .message__container {
    padding: 3.5rem 0;
    grid-template-columns: repeat(2, max-content);
    column-gap: 4rem;
    justify-content: center;
  }

  .message__form {
    text-align: initial;
  }
  .message__title {
    font-size: var(--h1-font-size);
  }
  .message__input {
    display: block;
    width: 280px;
  }
  .message__button {
    width: initial;
  }
  .message__img {
    width: 320px;
  }

  .footer__container {
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
  }
  .footer__copy {
    margin-top: 7rem;
  }
  .footer__img1, 
  .footer__img2 {
    width: 120px;
  }
  .footer__img1 {
    top: 100%;
    left: 0;
  }
  .footer__img2 {
    top: 40%;
    right: -7rem;
  }
  
  .scrollup {
    right: 3rem;
  }
}

💡 Now It’s time For Javascript Code 😎.

Now Here we Acessing HTML Elements

const navMenu = document.getElementById('nav-menu')
const navToggle = document.getElementById('nav-toggle')
const navClose = document.getElementById('nav-close')
Menu Show
/* Validate if navToggle exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}
Menu Hide
/*===== MENU HIDDEN =====*/
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}
DARK LIGHT THEME
/*=============== DARK LIGHT THEME ===============*/ 
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'bx-sun'

// Previously selected topic (if user selected)
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx bx-moon' : 'bx bx-sun'

// We validate if the user previously chose a topic
if (selectedTheme) {
  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  themeButton.classList[selectedIcon === 'bx bx-moon' ? 'add' : 'remove'](iconTheme)
}

// Activate / deactivate the theme manually with the button
themeButton.addEventListener('click', () => {
    // Add or remove the dark / icon theme
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    // We save the theme and the current icon that the user chose
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
})

Full source code: Create a Responsive Christmas Website Design Using HTML CSS & JavaScript

Watch The Video Create a Responsive Christmas Website Design Using HTML CSS & JavaScript ⛄️

You may also like:

Adminhttps://rocoderes.com
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
RELATED ARTICLES

4 COMMENTS

  1. Wow! This could be one particular of the most beneficial blogs We have ever arrive across on this subject. Actually Great. I’m also a specialist in this topic so I can understand your effort.

  2. You actually make it seem so easy with your presentation but I find this topic to be really something which I believe I might never understand. It seems too complex and extremely wide for me. I am having a look forward for your subsequent submit, I’ll try to get the grasp of it!

  3. Hi there, I found your website by means of Google while looking for a comparable topic, your site got here up, it appears to be like good. I have bookmarked it in my google bookmarks.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15,000FansLike
5,000FollowersFollow
535FollowersFollow
- Advertisment -spot_img

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Most Popular