Landing Pages

How To Make Christmas Website Design

Admin
Admin
18 Min Read
Christmas Website design

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.

Contents
What should you know before you start?What will we learn?Implement Christmas Website Design Using HTML, CSS & JavaScriptVariables CSSCreate Header & Nav MenuCreate Home PageGIVING sectionCELEBRATE sectionGIFT SectionNEW SectionNews Letter SectionFOOTER SectionMaking website ResponsiveMenu ShowMenu HideDARK LIGHT THEMEYou may also like:

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);
}
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')
/* Validate if navToggle exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}
/*===== 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:

TAGGED: ,
Share this Article
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Number Memorising Game in JavaScript How to Make Number Memorising Game In JavaScript
Next Article Watches E-commerce Website Design How To Make Watches E-commerce Website Design
Leave a comment
- Advertisement -
Lost your password?