By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > Landing Pages > How To Make Christmas Website Design
Landing Pages

How To Make Christmas Website Design

Admin
Last updated: 2022/11/25 at 5:26 AM
Admin
Share
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);
}
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:

  • How To Make Number Guessing Game JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Christmas Website, Christmas Website Design
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
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 Leave a comment

Leave a Reply Cancel reply

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

- Advertisement -

You Might Also Like

Responsive Covid-19 Website Using HTML

How to Make Responsive Covid-19 Website Using HTML

December 3, 2022
Application Website Using HTML

How to Make Application Website Using HTML

December 3, 2022
Personal Blog Website Using HTML

How to Make Personal Blog Website Using HTML

December 3, 2022
eCommerce Website Using HTML

How to Make An eCommerce Website Using HTML

December 3, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?