Website Section – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 06:06:20 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Responsive Login & Registration Form in HTML CSS https://www.codingnepalweb.com/create-login-registration-form-html-css/ https://www.codingnepalweb.com/create-login-registration-form-html-css/#comments Sun, 20 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4145 Create Responsive Login & Registration Form in HTML CSS

If you are looking for user-friendly Responsive Login & Registration Form created from HTML & CSS and want to learn to make a Login & Registration Form, this blog is written for you.

In this blog, you will learn how to create a Responsive Login & Registration Form in HTML & CSS. Even if you have a basic knowledge of HTML & CSS then also you will be able to create a Sign in and signup page using basic HTML & CSS code. Recently I uploaded a blog post on Cookies Consent Box Javascript I hope it will help to boost your JavaScript skills.

A Login Form is a Section where users have to input their login details to enter a particular website or application and a Registration Form is a place where users can create their login details to get login details or to register their details for different purposes.

Have a look at the given preview of my Login and Registration Form. As you can see, there are two forms the left one is the Sign-in Form and the right one is the Signup Form. On these forms, there are input fields for email address and password and a button. At the bottom of these two forms, there are two links: one to create a Signup account and another to log in.

I have explained all the HTML and CSS code that I have used to create this Login and Registration Form also if you want to create this Sign in and Signup page with me step by step, then you can watch the video tutorial that I have given below.

Login & Registration Form in HTML CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this Login and Registration form. Before getting into the source code file, rather than copying the code or downloading the source code file, I highly recommend you watch the full video tutorial of this login and signup page. By watching the video tutorial, you will be able to create this login and signup page.

As you have seen in the video tutorial of this Login and Registration Form. At first, there was only a Login Page with email, a password field, and a button. Underneath that button, there was a link that redirected us to the signup page, and the Login page disappeared. Similarly, on the Signup up page, there were input fields, a button, and a link that took us to the Login Page.

I hope now you can create this Login and Registration in HTML and CSS. If you want to take all the HTML and CSS code that I have used to create this Login and Signup then all the source codes are given below.

You May Like This:

Login & Registration Form in HTML CSS [Source Codes]

To create Login & Registration Form, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Login & Registration Form by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Login & Registration Form</title>
  <!---Custom CSS File--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <input type="checkbox" id="check">
    <div class="login form">
      <header>Login</header>
      <form action="#">
        <input type="text" placeholder="Enter your email">
        <input type="password" placeholder="Enter your password">
        <a href="#">Forgot password?</a>
        <input type="button" class="button" value="Login">
      </form>
      <div class="signup">
        <span class="signup">Don't have an account?
         <label for="check">Signup</label>
        </span>
      </div>
    </div>
    <div class="registration form">
      <header>Signup</header>
      <form action="#">
        <input type="text" placeholder="Enter your email">
        <input type="password" placeholder="Create a password">
        <input type="password" placeholder="Confirm your password">
        <input type="button" class="button" value="Signup">
      </form>
      <div class="signup">
        <span class="signup">Already have an account?
         <label for="check">Login</label>
        </span>
      </div>
    </div>
  </div>
</body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #009579;
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 430px;
  width: 100%;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.container .registration{
  display: none;
}
#check:checked ~ .registration{
  display: block;
}
#check:checked ~ .login{
  display: none;
}
#check{
  display: none;
}
.container .form{
  padding: 2rem;
}
.form header{
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.5rem;
}
 .form input{
   height: 60px;
   width: 100%;
   padding: 0 15px;
   font-size: 17px;
   margin-bottom: 1.3rem;
   border: 1px solid #ddd;
   border-radius: 6px;
   outline: none;
 }
 .form input:focus{
   box-shadow: 0 1px 0 rgba(0,0,0,0.2);
 }
.form a{
  font-size: 16px;
  color: #009579;
  text-decoration: none;
}
.form a:hover{
  text-decoration: underline;
}
.form input.button{
  color: #fff;
  background: #009579;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 1.7rem;
  cursor: pointer;
  transition: 0.4s;
}
.form input.button:hover{
  background: #006653;
}
.signup{
  font-size: 17px;
  text-align: center;
}
.signup label{
  color: #009579;
  cursor: pointer;
}
.signup label:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a project on Login & Registration Form. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/create-login-registration-form-html-css/feed/ 1 Create Popup Cookies Consent Box in HTML CSS & JavaScript https://www.codingnepalweb.com/popup-cookies-consent-box-html-css-javascript/ https://www.codingnepalweb.com/popup-cookies-consent-box-html-css-javascript/#respond Tue, 15 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4146 Create Popup Cookies Consent Box in HTML CSS & JavaScript

Did you know how to set a cookie on the website with the basic HTML, CSS, and JavaScript codes and, what cookies are? If not, then this blog is written for you.

Today’s blog will teach you how to Create a Pop-Up Cookie Consent Box in HTML CSS and JavaScript with setting the cookie for some interval of time, even if you only know the basics of JavaScript, you will be able to create and set cookies. Recently I have uploaded how to Create Responsive Search Bar in HTML CSS & JavaScript I hope you will like it.

Cookies are text files that are sent to your browser by a website you visit. They assist the website in remembering information about your visit, which can both make it simpler for you to return to the site and increase its usefulness to you.

Have a look at the given image of our Cookies Consent Box. As you can see on the cookie Box, there are cookie icons and heading text at the top, and underneath that there is some informational text about cookies and accept and decline buttons. This cookies box will appear on loaded webpages, and you will be asked whether you want to accept or decline cookies.

To see the real demo of this Cookies Consent Box how it pops out, what happens when you click on the decline or accept buttons, and what time the cookies will be set. Also, by watching the given video tutorial, you will get to know how all the HTML CSS and JavaScript work behind this Popup Cookie Consent Box.

 Cookies Consent Box in HTML CSS & JavaScript | Video Tutorial

 

I have provided all the HTML CSS and JavaSCript codes that I have used to create this Cookies Consent Box. Before getting into the source code files, You have to know some important thing that I did in the video tutorial of this cookie box.

As you have seen in the video tutorial, with the wepage loaded our Cookies Consent Box appeared. When I clicked on the cookie decline button it got disappeared until the wepage got refreshed. When I clicked on the cookie accept, the cookie massage set for one month. Bascially till a month that cookies consent box will not appear, after a month our cookies will be expired and the cookie consent box will appear again.

I hope by reading the blog and watching the video tutorial you got to know  how to Create Popup Cookies Consent Box in HTML CSS & JavaScript with setting the cookie. If you are wondering to get all the source code file of this cookies consent box, it is provided below.

You May Like This:

Cookies Consent Box in HTML CSS & JavaScript [Source Code]

To create Popup Cookies Consent Box in HTML CSS & JavaScript, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Cookies Consent Box in HTML CSS & JavaScript by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Popup Cookie Consent Box</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Boxicons CSS -->
    <link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <i class="bx bx-cookie"></i>
        <h2>Cookies Consent</h2>
      </header>

      <div class="data">
        <p>This website use cookies to help you have a superior and more relevant browsing experience on the website. <a href="#"> Read more...</a></p>
      </div>

      <div class="buttons">
        <button class="button" id="acceptBtn">Accept</button>
        <button class="button" id="declineBtn">Decline</button>
      </div>
    </div>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  background-color: #4070f4;
}
.wrapper {
  position: fixed;
  bottom: 50px;
  right: -370px;
  max-width: 345px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper.show {
  right: 20px;
}
.wrapper header {
  display: flex;
  align-items: center;
  column-gap: 15px;
}
header i {
  color: #4070f4;
  font-size: 32px;
}
header h2 {
  color: #4070f4;
  font-weight: 500;
}
.wrapper .data {
  margin-top: 16px;
}
.wrapper .data p {
  color: #333;
  font-size: 16px;
}
.data p a {
  color: #4070f4;
  text-decoration: none;
}
.data p a:hover {
  text-decoration: underline;
}
.wrapper .buttons {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buttons .button {
  border: none;
  color: #fff;
  padding: 8px 0;
  border-radius: 4px;
  background: #4070f4;
  cursor: pointer;
  width: calc(100% / 2 - 10px);
  transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
  background-color: #034bf1;
}
#declineBtn {
  border: 2px solid #4070f4;
  background-color: #fff;
  color: #4070f4;
}
#declineBtn:hover {
  background-color: #4070f4;
  color: #fff;
}

Third, paste the following codes into your script.js file.

const cookieBox = document.querySelector(".wrapper"),
  buttons = document.querySelectorAll(".button");

const executeCodes = () => {
  //if cookie contains codinglab it will be returned and below of this code will not run
  if (document.cookie.includes("codinglab")) return;
  cookieBox.classList.add("show");

  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      cookieBox.classList.remove("show");

      //if button has acceptBtn id
      if (button.id == "acceptBtn") {
        //set cookies for 1 month. 60 = 1 min, 60 = 1 hours, 24 = 1 day, 30 = 30 days
        document.cookie = "cookieBy= codinglab; max-age=" + 60 * 60 * 24 * 30;
      }
    });
  });
};

//executeCodes function will be called on webpage load
window.addEventListener("load", executeCodes);

That’s all, now you’ve successfully created a project on Popup Cookies Consent Box in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/popup-cookies-consent-box-html-css-javascript/feed/ 0 Create a Responsive Search Bar in HTML & CSS | Free Source Code https://www.codingnepalweb.com/search-bar-html-css-javascript/ https://www.codingnepalweb.com/search-bar-html-css-javascript/#respond Sat, 12 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4147 Create a Responsive Search Bar in HTML & CSS | Free Source Code

The search bar has become the most important section on the website or application. You must have used it to search for information on YouTube, Google, Facebook, and other sites. Although Search Box is the most important section for the website or application even then it can be created easily by using basic code of HTML & CSS.

Today in this blog you will learn to Create a Responsive Search Bar in HTML & CSS. Even if you have basic knowledge of HTML & CSS, then also you can create a Search Bar. Recently I created a Simple Website in HTML & CSS, I hope that project also could be beneficial for you.

The search bar is the input section where users have to type what they want to search. For example, In Google, if we have to search or find articles, websites, images, and videos then we need to use the search bar.

Take a look at the given preview of our Search Box that we are going to create today. As you can see in the image, there is a search bar with a long width. At that Search Bar, there is a search icon, search field, and search button. This Search Bar is fully responsive and easily get fits any size of screen device.

To see the real demo of this Search Box and all the HTML & CSS code that I have used to create this Responsive and Full-Screen Search Bar, I have provided a video tutorial.

Create Search Bar in HTML & CSS | Video Tutorial

I have also provided all the HTML & CSS code that I have used to create this Responsive Search Bar. Before getting into the source code file, I would like to briefly explain the given video tutorial of the Search Box.

As you have seen in the video tutorial. At first, on the screen, there was a Full-Screen Search Bar with an input field, a search icon, and a beautiful. You may have got to know that this search bar actually can be created with HTML and CSS code. To give click animation on the button I had to use some JavaScript code.

I believe now you are able to create a Search Box. If you are feeling difficulty and wondering to get all the HTML CSS and JavaScript code of this Search Bar that I have used then, you can take all the source code from below.

You May Like This:

Search Bar in HTML & CSS [Source Code]

To create a Responsive Search Bar, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Responsive Search Bar by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Search Bar in HTML and CSS</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- Unicons CSS -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
  </head>
  <body>
    <div class="input-box">
      <i class="uil uil-search"></i>
      <input type="text" placeholder="Search here..." />
      <button class="button">Search</button>
    </div>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.input-box {
  position: relative;
  height: 76px;
  max-width: 900px;
  width: 100%;
  background: #fff;
  margin: 0 20px;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-box i,
.input-box .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input-box i {
  left: 20px;
  font-size: 30px;
  color: #707070;
}
.input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  font-weight: 400;
  border: none;
  padding: 0 155px 0 65px;
  background-color: transparent;
}
.input-box .button {
  right: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  background-color: #4070f4;
  cursor: pointer;
}
.input-box .button:active {
  transform: translateY(-50%) scale(0.98);
}

/* Responsive */
@media screen and (max-width: 500px) {
  .input-box {
    height: 66px;
    margin: 0 8px;
  }
  .input-box i {
    left: 12px;
    font-size: 25px;
  }
  .input-box input {
    padding: 0 112px 0 50px;
  }
  .input-box .button {
    right: 12px;
    font-size: 14px;
    padding: 8px 18px;
  }
}

That’s all, now you’ve successfully created a project on the Responsive Search Bar. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/search-bar-html-css-javascript/feed/ 0 Website Image Slider in HTML CSS & JavaScript | Swiperjs https://www.codingnepalweb.com/website-image-slider-html-css-javascript/ https://www.codingnepalweb.com/website-image-slider-html-css-javascript/#respond Sun, 11 Sep 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4161 Website Image Slider in HTML CSS & JavaScript | Swiperjs

Hey buddy, how are you doing nowadays? I hope you are doing and creating extraordinary. Today I have brought something exciting and useful HTML CSS & JavaScript project, In this project, you are going to learn to create a Website Image Slider. Earlier I created a Responsive Card Slider hope, you liked that project.

Website Image Slider means the features on the website header or hero section where the user can slide images by clicking on the nav button or as well as by grabbing the image too. Also, there is pagination that shows how many images that website has on the harder section. We can see such type of features in many types of websites like e-commerce, sports, newspaper, travel/tour, and many many others.

Have a quick look at the given image of our project [Website Image Slider]. As you can see on the given image there is an image that covered full height and width, on the right and left sides there are two nav buttons to slide the image and at the button, we can see a beautiful pagination section. At the center, there are some text and a button.

To watch the real demo of this project and all the animations that I have added to this project, you can watch the given video tutorial of this project [Website Image Slider], also by watching the video tutorial you will get an idea about all the code that I have used to create this image slider.

Website Image Slider in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS & JavaScript code with the Swiperjs file that I used to create this Website Image Slider, before getting into the source code, I would like to briefly explain the given video tutorial of the image slider.

As you have seen in the video tutorial of our project Image Slider. In the first view, we have seen a full-size screen, two nav buttons, pagination, and some text with buttons. When I click on the left side button the image moves to the left side and another image appeared from the right side, similarly when I again clicked on that button another image appeared. On the other hand, when I clicked on the left nav button the image slid to the right and another image came from the left side. Also, we could slide images by grabbing them.

Also, we have seen in the responsive part, that when the width of the screen comes into small sizes like tablet and mobile, then those nav buttons disappeared and pagination appeared and we can slide those images by just grabbing them. I have used HTML CSS and JavaScript and swiperjs extension to create this responsive image slider.

I hope, now I can build this Image Slider easily by using HTML CSS & JavaScript and offcourse Swiperjs. If you are feeling difficult to make this Image Slider, I have provided all the source codes below.

You May Like This:

Website Image Slider [Source Code]

You can download the source code files for this Website with Image Slider for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

 

View Live Demo

 

]]> https://www.codingnepalweb.com/website-image-slider-html-css-javascript/feed/ 0 How to Make Coming Soon Website in HTML CSS & JavaScript https://www.codingnepalweb.com/coming-soon-website-html-css-javascript/ https://www.codingnepalweb.com/coming-soon-website-html-css-javascript/#respond Wed, 27 Jul 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4167 How to Make Coming Soon Website in HTML CSS & JavaScript

Hello buddy, I hope you are doing awesome. Today in this blog you will learn to make a Responsive Coming Soon Website in HTML CSS and JavaScript. There are lots of Website Sections I have created, like sidebar, navigation bar, website header or hero section footer, and others. This coming soon website is also an important part of the website.

A coming soon page is a placeholder web page used by businesses or individuals who are creating a new website or launching a new product. It includes a message about the upcoming website or product and a form for visitors to receive updates. This helps build anticipation and interest among potential customers before the official launch.

Have a quick look at the given image of our project [Coming Soon Website] there are some text, time, and an email field and notify me button. In the time section, you can see time on days, hours, minutes, and seconds. Actually, the time will be continuously updated per second.

You can watch the demo of this project[Coming Soon Website] and I would highly recommend you to watch the video tutorial of this website, by watching the video tutorial, you will get the idea of how all HTML CSS, and JavaScript code work behind this coming soon website.

Coming Soon Website in HTML CSS & JavaScript | Video Tutorial

I will provide all the HTML CSS and JavaScript code that I have used to create this Coming Soon Website, before getting into the source code file, I would like to briefly explain the given video tutorial of our website.

As you have seen in the video tutorial. There was some text used the text, there was a time in days, hours, minutes, and seconds. The time was continuously updated every second. Underneath the time there was an email field. All the UI part of this Coming Soon Website was created by using HTML and CSS and to continuously updated the time every second, I have used some JavaScript code.

I hope, now you can make this Coming Soon Website using HTML and JavaScript, If your are feeling difficulty creating this website, I have provided all the source code below.

You Might Like This:

Coming Soon Website [Source Code]

To get the following HTML CSS and JavaScript code for the Make Coming Soon Website, you need to create three files one is an HTML file and another is a CSS file, and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

  <!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Website Coming Soon Page</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <section class="container">
      <img src="#" alt="" class="image" />
      <header>Comming Soon Page</header>
      <p>
        Our website is under construction. We're working hard to improve our
        website and we'll ready to launch after.
      </p>
      <div class="time-content">
        <div class="time days">
          <span class="number"></span>
          <span class="text">days</span>
        </div>
        <div class="time hours">
          <span class="number"></span>
          <span class="text">hours</span>
        </div>
        <div class="time minutes">
          <span class="number"></span>
          <span class="text">minutes</span>
        </div>
        <div class="time seconds">
          <span class="number"></span>
          <span class="text">seconds</span>
        </div>
      </div>

      <div class="email-content">
        <p>Subscribe now to get the latest updates!</p>

        <div class="input-box">
          <input type="email" placeholder="Enter your email" />
          <button>Notify Me</button>
        </div>
      </div>
    </section>

    <!-- JavaScript -->
    <script src="js/script.js"></script>
  </body>
</html>


 /* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.container {
  display: flex;
  row-gap: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.container .image {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}
.container header {
  font-size: 60px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.container p {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  max-width: 550px;
  text-align: center;
}
.container .time-content {
  display: flex;
  column-gap: 30px;
  align-items: center;
}
.time-content .time {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.time .number,
.time .text {
  font-weight: 500;
  color: #fff;
}
.time .number {
  font-size: 40px;
}
.time .text {
  text-transform: capitalize;
  font-size: 12px;
}
.email-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
  width: 100%;
}
.email-content p {
  font-size: 13px;
}
.input-box {
  display: flex;
  align-items: center;
  height: 40px;
  max-width: 360px;
  width: 100%;
  margin-top: 20px;
  column-gap: 20px;
}
.input-box input,
.input-box button {
  height: 100%;
  outline: none;
  border: none;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}
.input-box input {
  width: 100%;
  padding: 0 15px;
  color: #fff;
}
input::placeholder {
  color: #fff;
}
.input-box button {
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
  padding: 0 20px;
  transition: all 0.3s ease;
}
.input-box button:hover {
  background-color: #fff;
  color: #0d6a81;
}
@media screen and (max-width: 300px) {
  .container header {
    font-size: 50px;
  }
}

 

 

]]> https://www.codingnepalweb.com/coming-soon-website-html-css-javascript/feed/ 0 Search Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/search-bar-html-css-javascript-2/ https://www.codingnepalweb.com/search-bar-html-css-javascript-2/#respond Fri, 15 Jul 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4169 Search Bar in HTML CSS & JavaScript

Hello friend, I hope you are doing awesome. Today you will learn to create a Search Bar in HTML CSS & JavaScript I will add some animation to our search bar also. Earlier I created a Seach Box using HTML and CSS only. But in today’s search box I will add a few JavaScript.

Search Bars are the section where users can search for the things that they want to. Search Bar can be in different designs but the main objective of the search bar is to search.

Have a quick look on the given image of our search bar on the webpage. As you can see from the image of our search box. There is a search box, inside the search box there are two icons and a search section. Actually, in our real project, this search bar will be in closed form and when we click on the search icon then the search bar will open, and close the search bar we need to click on the cross icon. I have added beautiful cubic animation too.

To see the real demo of this search bar and its animation, you need to watch the give video tutorial of our search bar. Also by watching the video tutorial, you will get an idea about HTML CSS, and JavaScript codes that I have used to create this search bar.

Search Bar in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Search Bar. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial. At first, we saw one square shape box with a search icon. When I clicked on that square box, the search box opened and cross icons also appeared. When I clicked on that cross icon then the search bar closed and the cross icon disappeared. The search bar is created by HTML and CSS, for the animation, I have used CSS cubic bezier and to open and close the search bar I have used some JavaScript code.

I hope now you can create this search bar using HTML CSS and JavaScript. If you are feeling difficulty creating this sidebar, I have provided all the source code below.

You Might Like This:

Search Bar [Source Code]

To get the following HTML and CSS code for the Search Bar you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Animated Search Bar </title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                
        <!-- Unicons CSS -->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
                        
    </head>
    <body>
        <div class="input-box">
            <input type="text" placeholder="Search...">
            <span class="icon">
                <i class="uil uil-search search-icon"></i>
            </span>
            <i class="uil uil-times close-icon"></i>
        </div>

        <script>
            let inputBox = document.querySelector(".input-box"),
                searchIcon = document.querySelector(".icon"),
                closeIcon = document.querySelector(".close-icon");

            searchIcon.addEventListener("click", () => inputBox.classList.add("open"));
            closeIcon.addEventListener("click", () => inputBox.classList.remove("open"));
        </script>
        
    </body>
</html>

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
  overflow: hidden;
}
.input-box{
  position: relative;
  height: 55px;
  max-width: 55px;
  width: 100%;
  margin: 0 40px;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box.open{
  max-width: 350px;
}
input{
  position: relative;
  outline: none;
  border: none;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}
.input-box.open{
  padding: 0 15px 0 65px;
}
.icon{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 60px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.search-icon,
.close-icon{
  position: absolute;
  top: 50%;
  font-size: 30px;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-icon{
  color: #4070f4;
  
  transform: translateY(-50%) rotate(90deg);
}
.input-box.open .search-icon{
  transform: translateY(-50%) rotate(0);
}
.close-icon{
  right: -45px;
  color: #fff;
  padding: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-box.open .close-icon{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(180deg);
}

 

 

]]> https://www.codingnepalweb.com/search-bar-html-css-javascript-2/feed/ 0 Make a Website in HTML CSS & JavaScript | Website with Source Code https://www.codingnepalweb.com/make-website-html-css-javascript/ https://www.codingnepalweb.com/make-website-html-css-javascript/#respond Sat, 28 May 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4177 Make a Website in HTML CSS & JavaScript | Website with Source Code

Hello friend, I hope you are doing and creating awesome projects. As usual today in today’s blog, you will learn to create a Responsive Website in HTML CSS, and JavaScript this website will be focused on the coffee base. The website will have a header, navigating menu bar, sidebar, sliding home content and testimonial footer, and others as a normal website need to have. Earlier I created a Personal Portfolio Website, that you guys liked so much.

A website is a combination of web pages and sections like a navigation menu bar, side navigation bar (for small media devices), home section, footer, images, animations, and others. We can find many websites on the internet like e-commerce websites, sports websites, coffee shops or production websites, and news websites, although they have similar bases and functions except for text content and images.

Have a quick look at the given preview of our website. On the image, we can see an image of coffee and what coffee means, and we can get the idea that this is a coffee website. On the image, we can see the logo, navigation bar home section, images menu section, about section, testimonial, newsletter, and footer. There are lots of other features that are hidden and or unshown.

I would like to show the virtual demo of this coffee website, by showing the video tutorial you will see the responsive part of this website and animations. Also, you will get an idea of how all the HTML CSS and vanilla JavaScript code works properly behind this website.

Make a Website in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to build this coffee website. Before getting into the source code file, I would like to elaborate on the given video tutorial of our coffee website.

As you have seen on the video tutorial of the coffee website. On the screen, we have seen a home section with a sliding feature and a navigation menu bar. When I scrolled the website that navigation got coffee color and it stuck on the top. After continued scrolling, we have seen, the menu, review, newsletter, and footer sections with beautiful animations. Have you noticed that when I scrolled the home section a little bit the scroll button activate, which helped us to go to the home section of the website?

Also, we have seen a navigation link indicator that shows us our section where also we can reach all the main sections by clicking on the navigation link. For the UI and UX, I used HTML and CSS and for the toggle sidebar, while the website got small screen-sized devices, I used JavaScript. To slide the home section image and testimonial I have used swipe.js and for the animation on a scroll, I used scroll reveal.

On the responsive part, we have seen our horizontal navigation menu bar converted into the vertical sidebar and other sections also fitted as per screen sizes. The website fitted perfectly on all-screen media devices like laptops, tablets,s, and mobile phones.

I hope now you can make this coffee website using HTML CSS and JavaScript, If you are feeling difficulty creating this website you can follow the given tutorial, for follow the tutorial I have given the files and the link is in the video description. If you want to download all the source code and images that I have used for this coffee website, The download button has given below.

You Might Like This:

You can download the source code files for this Responsive Coffee Website for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

 

View Live Demo

 

]]> https://www.codingnepalweb.com/make-website-html-css-javascript/feed/ 0 Glassmorphism Website Design in HTML and CSS https://www.codingnepalweb.com/responsive-website-with-html-css-glass/ https://www.codingnepalweb.com/responsive-website-with-html-css-glass/#respond Mon, 31 Jan 2022 21:09:36 +0000 https://www.codingnepalweb.com/?p=4241

Responsive Website with HTML & CSS | Glass Morphism

Q: How can I create a Glassmorphism website using HTML and CSS?

A: After reading and watching the following article and video tutorial, you will definitely able to create glassmorphism website by using HTML and CSS.

Hello Readers, today in this blog I will create a responsive website with the help of HTML & CSS and this website looks will be in glass morphism UI. Earlier I have shared How to Create a Simple Website using HTML & CSS now it’s time to create glassmorphism website.

What is Glassmorphism?

Glassmorphism is the latest trend on UI designs in where UI Designs’ background is a blur and we can see what is in the background. Basically, Glassmorphism is the combination of two words “Glass” and “Morphism”. That why glassmorphism design looks neither transparent nor solid. Codes for the glassmorphism design.

  • background: rgba(255, 255, 255, 0.1);
  • box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  • border-top: 1px solid rgba(255, 255, 255, 0.5);
  • border-left: 1px solid rgba(255, 255, 255, 0.5);
  • backdrop-filter: blur(5px);

As you can see on the given image of this program [Glassmorphism Website Design], on the web page. On the top side, there is on navbar with some logos, hyperlinks, and two-button. Under the navigation menu, there is some text and at the bottom right side, there is one play button and some text. You can see in the outer top left corner and right bottom corner, there are two circles which give more attraction.

You want to know all this design on this program [Responsive Website Design], I have provided a full video tutorial of this program below. You will get all ideas and code behind this program [Responsive Gassmorphism Website],

Glassmorphism Website Design in HTML and CSS | Video Tutorial

As you have seen on the given video of this program [Responsive Website in HTML CSS],  When i hovered on the hyperlink its color change smoothly and this is fully responsive, (Responsive means this website can fit in all sizes screen).

If You are familiar with HTML CSS then you can easily build this program [Website Design ]. Those friends who are feeling difficulty make this program, don’t worry I have provided all source code file below.

You Might Like This:

Glassmorphism Website Design | Source Code

To copy-paste all the code of this program [Glass Morphism Website Design], first of all, you need to create two files, one is an HTML file and another is a CSS file. After creating these two files you can easily copy-paste the given codes. You can also download all source code directly click on the given “Download Button”.

How To Create Gassmorphism Website in HTML?

Create an HTML file on your computer with the name index.html and copy-paste the given codes in your HTML document.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Glassmorphism Website | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <header>
    <nav class="navbar">
      <div class="logo"><a href="#">LOGO></a></div>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Latest</a></li>
        <li><a href="#">Offers</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="buttons">
        <input type="button" value="Login">
        <input type="button" value="Register">
      </div>
    </nav>
    <div class="text-content">
      <h2>Learn To Enjoy,<br>Every Moment Of Your Life</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum facere in nam, officiis aspernatur consectetur aliquid sequi possimus et. Sint.</p>
    </div>
    <div class="play-button">
      <span class="play">Play Video</span>
      <i class="fas fa-play" onclick="click()"></i>
    </div>
  </header>
</body>
</html>

Create a CSS file with the name of index.html on your computer and copy-paste the given codes in your CSS file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  transition: all 0.3s ease;
}
body{
  height: 100vh;;
  width: 100%;
  display: flex;
  background-image: linear-gradient( 135deg, #ff9a9e  10%, #F6416C 100%);
}
::selection{
  color: #f2f2f2;
  background: #f86d8d;
}
body::before,
body::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
body::before{
  clip-path: circle(30% at left 20%);
  opacity: 0.4;
  background-image: linear-gradient( 135deg, #F6416C 10%, #ff9a9e 100%);
}
body::after{
  opacity: 0.4;
  clip-path: circle(25% at right 80%);
  background-image: linear-gradient( 135deg, #F6416C 10%, #ff9a9e 100%);
}
header{
  height: 85vh;
  width: 90%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  z-index: 12;
  border-radius: 25px;
  margin: auto;
  position: relative;
}
header .navbar{
  margin: auto;
  width: 100%;
  padding: 35px 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .menu{
  display: flex;
  flex-wrap: wrap;
}
.navbar .logo a{
  text-decoration: none;
  font-size: 22px;
  color: #000;
  font-weight: 500;
}
.navbar .menu li{
  list-style: none;
  margin: 0 6px;
}
.navbar .menu a{
  color: #000;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.navbar .menu a:hover{
  color: #f2f2f2;
}
.navbar .buttons input{
  outline: none;
  color: #f2f2f2;
  font-size: 18px;
  font-weight: 500;
  border-radius: 12px;
  padding: 6px 15px;
  border: none;
  margin: 0 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient( 135deg, #ff9a9e  10%, #F6416C 100%);
}
.navbar .buttons input:hover{
  transform: scale(0.97);
}
 header .text-content{
   width: 40%;
   margin: 100px 0 0 50px ;
 }
.text-content h2{
  font-size: 27px;
  font-weight: 600;
}
.text-content p{
  font-size: 15px;
  margin-top: 10px;
}
header .play-button{
  position: absolute;
  right: 50px;
  bottom: 40px;
}
.play-button .play{
  font-size: 18px;
  font-weight: 500;
}
 .play-button .play::before{
   content: '';
   position: absolute;
   height: 3px;
   width: 50px;
   top: 50%;
   transform: translateY(-50%);
   left: -58px;
   background: #000;
 }
.play-button i{
  height: 40px;
  width: 40px;
  border: 2px solid #000;
  line-height: 38px;
  text-align: center;
  margin-left: 10px;
  border-radius: 6px;
  cursor: pointer;
}
@media (max-width:850px) {
  header .navbar{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
  }
  .navbar .menu {
    margin: 10px 0 20px 0;
  }
  header .text-content{
    margin: 30px 0 0 20px ;
    width: 70%;
  }
  header .text-content h2{
    font-size: 20px;
  }
}
@media (max-width:410px) {
  header{
    height: 100vh;
    width: 100%;
    border-radius: 0px;
  }
  header .navbar{
    padding: 15px 10px;
}
}

Click on the following download button then glassmorphism source code file automatically starts to download. After it downloads, just you need to unzip all the files.

 

]]> https://www.codingnepalweb.com/responsive-website-with-html-css-glass/feed/ 0 Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode https://www.codingnepalweb.com/sidebar-menu-in-html-css-javascript-dark-light-mode/ https://www.codingnepalweb.com/sidebar-menu-in-html-css-javascript-dark-light-mode/#respond Sun, 16 Jan 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4191 Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode

Hello friend, I hope you are doing awesome. Today I will show how to create a Sidebar Menu in HTML CSS and JavaScript with Dark Light Mode features. There are lots of  Sidebar Menus that I have created but to date, I have not created a sidebar with dark and light mode features.

A sidebar is the combination of several navigation links aligned vertically at the left or right side of the web page. Sidebar helps users to get into the different webpage through the help of navigation links and they have open and close features.

Let’s have a look at the given image of our sidebar menu that I have given on the webpage. On the right side, we can see the light mode features of the sidebar and on the left side, we can see the dark mode of the sidebar. Actually, those image which has big width are the opened form of the sidebar, and those images that have small width that is the closed form of the sidebar.

Now we are going to watch the real demo of our sidebar how it looks like in the close form and open form and of course the day and night mode of this side navigation menu bar.

Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode

I have provided all the HTML CSS and JavaScript source code that I have used to create this beautiful sidebar menu. Before getting into the source code file, you need to know some basic points of this video tutorial.

As you have seen on the give video tutorial of the Side Navigation Menu Bar. At first, we have seen our sidebar is in closed form with a logo, an open and close icon, a navigation link’s icon, and a toggle button for the dark night mode, and we can open and close the dark light mode even side bar is in closed form. When I clicked on the button sidebar opens and another text was visible with beautiful animation. Have you noticed that we can open the sidebar by clicking on the search button?

All UI design of our sidebar is made by HTML and CSS, to open and close the sidebar and toggle the toggle button with changing the icon and text according to the sidebar mode, I have used some JavaScript code.

I hope now you can make this sidebar menu easily, if you are feeling difficulty creating this side navigation menu bar then you can take all HTML CSS, and JavaScript of this sidebar from below.

You Might Like This:

Sidebar Menu [Source Code]

To get the following HTML CSS & JavaScript code for Sidebar Menu in HTML CSS & JavaScript with Dark/Light Mode features. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
  <!-- Coding by CodingLab | www.codinglabweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="style.css">
    
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    
    <!--<title>Dashboard Sidebar Menu</title>--> 
</head>
<body>
    <nav class="sidebar close">
        <header>
            <div class="image-text">
                <span class="image">
                    <!--<img src="logo.png" alt="">-->
                </span>

                <div class="text logo-text">
                    <span class="name">Codinglab</span>
                    <span class="profession">Web developer</span>
                </div>
            </div>

            <i class='bx bx-chevron-right toggle'></i>
        </header>

        <div class="menu-bar">
            <div class="menu">

                <li class="search-box">
                    <i class='bx bx-search icon'></i>
                    <input type="text" placeholder="Search...">
                </li>

                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-home-alt icon' ></i>
                            <span class="text nav-text">Dashboard</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-bar-chart-alt-2 icon' ></i>
                            <span class="text nav-text">Revenue</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-bell icon'></i>
                            <span class="text nav-text">Notifications</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-pie-chart-alt icon' ></i>
                            <span class="text nav-text">Analytics</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-heart icon' ></i>
                            <span class="text nav-text">Likes</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-wallet icon' ></i>
                            <span class="text nav-text">Wallets</span>
                        </a>
                    </li>

                </ul>
            </div>

            <div class="bottom-content">
                <li class="">
                    <a href="#">
                        <i class='bx bx-log-out icon' ></i>
                        <span class="text nav-text">Logout</span>
                    </a>
                </li>

                <li class="mode">
                    <div class="sun-moon">
                        <i class='bx bx-moon icon moon'></i>
                        <i class='bx bx-sun icon sun'></i>
                    </div>
                    <span class="mode-text text">Dark mode</span>

                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>
                </li>
                
            </div>
        </div>

    </nav>

    <section class="home">
        <div class="text">Dashboard Sidebar</div>
    </section>

    <script>
        const body = document.querySelector('body'),
      sidebar = body.querySelector('nav'),
      toggle = body.querySelector(".toggle"),
      searchBtn = body.querySelector(".search-box"),
      modeSwitch = body.querySelector(".toggle-switch"),
      modeText = body.querySelector(".mode-text");


toggle.addEventListener("click" , () =>{
    sidebar.classList.toggle("close");
})

searchBtn.addEventListener("click" , () =>{
    sidebar.classList.remove("close");
})

modeSwitch.addEventListener("click" , () =>{
    body.classList.toggle("dark");
    
    if(body.classList.contains("dark")){
        modeText.innerText = "Light mode";
    }else{
        modeText.innerText = "Dark mode";
        
    }
});
    </script>

</body>
</html>

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #695CFE;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
}

body{
    min-height: 100vh;
    background-color: var(--body-color);
    transition: var(--tran-05);
}

::selection{
    background-color: var(--primary-color);
    color: #fff;
}

body.dark{
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
}

/* ===== Sidebar ===== */
 .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;  
}
.sidebar.close{
    width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
    color: var(--text-color);
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar.close .text{
    opacity: 0;
}
/* =========================== */

.sidebar header{
    position: relative;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}
.sidebar header .logo-text{
    display: flex;
    flex-direction: column;
}
header .image-text .name {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}

header .image-text .profession{
    font-size: 16px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img{
    width: 40px;
    border-radius: 6px;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
}

body.dark .sidebar header .toggle{
    color: var(--text-color);
}

.sidebar.close .toggle{
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu{
    margin-top: 40px;
}

.sidebar li.search-box{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover{
    background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
    color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
    color: var(--text-color);
}

.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar{
    display: none;
}
.sidebar .menu-bar .mode{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.menu-bar .mode .sun-moon{
    height: 50px;
    width: 60px;
}

.mode .sun-moon i{
    position: absolute;
}
.mode .sun-moon i.sun{
    opacity: 0;
}
body.dark .mode .sun-moon i.sun{
    opacity: 1;
}
body.dark .mode .sun-moon i.moon{
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch{
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.toggle-switch .switch{
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-05);
}

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-04);
}

body.dark .switch::before{
    left: 20px;
}

.home{
    position: absolute;
    top: 0;
    top: 0;
    left: 250px;
    height: 100vh;
    width: calc(100% - 250px);
    background-color: var(--body-color);
    transition: var(--tran-05);
}
.home .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 12px 60px;
}

.sidebar.close ~ .home{
    left: 78px;
    height: 100vh;
    width: calc(100% - 78px);
}
body.dark .home .text{
    color: var(--text-color);
}

If you face any difficulties while creating your Sidebar Menu or your code is not working as expected, you can download the source code files for this Side Navigation Menu Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/sidebar-menu-in-html-css-javascript-dark-light-mode/feed/ 0 Create a Website in HTML CSS and JavaScript https://www.codingnepalweb.com/website-html-css-javascript/ https://www.codingnepalweb.com/website-html-css-javascript/#respond Tue, 14 Sep 2021 21:11:18 +0000 https://www.codingnepalweb.com/?p=4205 Create a Website in HTML CSS and JavaScript

Hello friend how are you doing, today in this blog of HTML CSS and JavaScript project we are going to create a Website with day-night mode (dark/light theme) and customize the color theme, with the help of HTML CSS and JavaScript. Without further ado let’s get started.

There are lots of websites with lots of features on the internet and of course, we have made. All the website has different features and specialty. But many websites have limited colors that’s why people always feel bored by the limited color on the website right? that’s why in this HTML CSS and JavaScript project we will add all the customize color theme features and of course day night mode (light-dark mode) in our today’s website.

Let’s have a look at the given image of our website design. On the top side, we have a navigation menu bar, a home section with some text, and a beautiful button. At the right side of the navigation menu bar, we can see an icon which is for to switch the website into dark and light mode, and at the right end side we have a color switcher button, from it we can switch any color as we like.

Now, let’s see the virtual demo of this website and all the codes I have used to build this beautiful website.

Create a Website in HTML CSS and JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to make this website below, before jumping into the code I have to point out some important points that you need to clear to create this website.

As you have seen on the video tutorial of this Website Design. At first, we have seen a navigation bar on the top with some text and a button. When I clicked on the website’s theme color switcher one color switcher box appear and some color, and also we have seen which color was active. When I clicked on the second orange color, all the theme colors of the website changed into orange and like this, I switched the website to a different color.

At that time when I clicked on the moon button, the website turns into the dark mode and sun icons appear, again when I clicked on the sun icons, the website turns into light mode.

The whole UI design of this website is made by the HTML and CSS code, to make the website dark and light mode(day-night mode) and to switch the website color theme I have used some JavaScript code.

I hope to know to build this type of website and you could make a website like this, if you want all the HTML CSS, and JavaScript code of this website then you can copy or download from below;

You Might Like This:

To get the following HTML CSS and JavaScript code for the website you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Website with Customize Color Theme | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <nav>
    <div class="navbar">
      <div class="logo"><a href="#">CodingLab</a></div>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="appearance">
        <div class="light-dark">
          <i class="btn fas fa-moon" data-color="#e4e6eb #e4e6eb #24292D #24292D #242526"></i>
        </div>
        <div class="color-icon">
          <div class="icons">
            <i class="fas fa-palette"></i>
            <i class="fas fa-sort-down arrow"></i>
          </div>
          <div class="color-box">
            <h3>Color Switcher</h3>
            <div class="color-switchers">
              <button class="btn blue active" data-color="#fff #24292d #4070f4 #0b3cc1 #F0F8FF"></button>
              <button class="btn orange" data-color="#fff #242526 #F79F1F #DD8808 #fef5e6"></button>
              <button class="btn purple" data-color="#fff #242526 #8e44ad #783993 #eadaf1"></button>
              <button class="btn green" data-color="#fff #242526 #3A9943 #2A6F31 #DAF1DC"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <section class="home-content">
    <div class="texts">
      <h2 class="text">Customize Your Website </h2>
      <h3 class="text">With a <span>Beautiful Colours...</span></h3>
      <p>Lorem ipsum dolor sited and ametvel, nobised, minimali! Quibusdam temporibus, placeate reessed veritatis optio aliquam illum debitis at, perspiciatis consequatur iure vel, quae ratione. Praesentium, at.</p>
      <div class="button">
      <a href="#">Explore Me
      <i class="fas fa-location-arrow"></i></a>
    </div>
  </section>

  <script>
  // Js code to make color box enable or disable
  let colorIcons = document.querySelector(".color-icon"),
  icons = document.querySelector(".color-icon .icons");

  icons.addEventListener("click" , ()=>{
    colorIcons.classList.toggle("open");
  })

  // getting all .btn elements
  let buttons = document.querySelectorAll(".btn");

  for (var button of buttons) {
    button.addEventListener("click", (e)=>{ //adding click event to each button
      let target = e.target;

      let open = document.querySelector(".open");
      if(open) open.classList.remove("open");

      document.querySelector(".active").classList.remove("active");
      target.classList.add("active");

      // js code to switch colors (also day night mode)
      let root = document.querySelector(":root");
      let dataColor = target.getAttribute("data-color"); //getting data-color values of clicked button
      let color = dataColor.split(" "); //splitting each color from space and make them array

      //passing particular value to a particular root variable
      root.style.setProperty("--white", color[0]);
      root.style.setProperty("--black", color[1]);
      root.style.setProperty("--nav-main", color[2]);
      root.style.setProperty("--switchers-main", color[3]);
      root.style.setProperty("--light-bg", color[4]);

      let iconName = target.className.split(" ")[2]; //getting the class name of icon

      let coloText = document.querySelector(".home-content span");

      if(target.classList.contains("fa-moon")){ //if icon name is moon
        target.classList.replace(iconName, "fa-sun") //replace it with the sun
        colorIcons.style.display = "none";
        coloText.classList.add("darkMode");
      }else if (target.classList.contains("fa-sun")) { //if icon name is sun
        target.classList.replace("fa-sun", "fa-moon"); //replace it with the sun
        colorIcons.style.display = "block";
        coloText.classList.remove("darkMode");
        document.querySelector(".btn.blue").click();
      }
    });
  }
 </script>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  transition: all 0.3s ease;
}
:root{
  --white: #fff;
  --black: #24292d;
  --nav-main: #4070f4;
  --switchers-main: #0b3cc1;
  --light-bg: #F0F8FF;
}
nav{
  position: fixed;
  height: 70px;
  width: 100%;
  background: var(--nav-main);
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
nav .navbar{
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1300px;
  margin: auto;
  padding: 0 30px;
  justify-content: space-between;
}
nav .navbar a{
  font-size: 30px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
}
 .navbar .nav-links{
   display: flex;
 }
 .navbar .nav-links li{
   margin: 0 8px;
   list-style: none;
   display: flex;
 }
 .navbar .nav-links a{
   font-size: 18px;
   font-weight: 400;
   opacity: 1;
 }
  .navbar .nav-links a:hover{
    opacity: 1;
  }
 .navbar .appearance{
   display: flex;
   align-items: center;
 }
 .appearance .light-dark,
 .appearance .icons{
  height: 50px;
  width: 50px;
  border-radius: 6px;
  line-height: 50px;
  text-align: center;
  color: var(--white);
  font-size: 20px;
  background: var(--switchers-main);
  cursor: pointer;
}
.appearance .light-dark i,
.appearance .icons i{
  opacity: 1;
}
.appearance .light-dark:hover i,
.appearance .icons:hover i{
  opacity: 1;
}
.appearance .light-dark:hover{
  box-shadow: 0 5px 10px rgba(0,0,0,0.1)
}
.appearance .light-dark i{
  height: 100%;
  width: 100%;
}
 .appearance .color-icon{
   position: relative;
 }
 .appearance .icons{
   width: 70px;
   height: 50px;
   margin-left: 14px;
 }
 .appearance .color-box{
   position: absolute;
   bottom: -133px;
   right: 0;
   min-height: 100px;
   background: var(--white);
   padding: 16px 20px 20px 20px;
   border-radius: 6px;
   box-shadow: 0 5px 10px rgba(0,0,0,0.2);
   opacity: 0;
   pointer-events: none;
 }
 .color-box::before{
   content: '';
   position: absolute;
   top: -10px;
   right: 20px;
   height: 30px;
   width: 30px;
   border-radius: 50%;
   background: var(--white);
   transform: rotate(45deg);
 }
 .color-icon.open .color-box{
   opacity: 1;
   pointer-events: auto;
 }
  .color-icon.open .arrow{
    transform: rotate(-180deg);
  }
 .appearance .color-box h3{
   font-size: 16px;
   font-weight: 600;
   display: block;
   color: var(--nav-main);
   text-align: left;
   white-space: nowrap;
   margin-bottom: 10px;
 }
.appearance .color-box .color-switchers{
   display: flex;
}
.color-box .color-switchers .btn{
  display: inline-block;
  height: 40px;
  width: 40px;
  border: none;
  outline: none;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  background: #4070F4;

}
.color-switchers .btn.blue.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #4070F4;
}
.color-switchers .btn.orange{
  background: #F79F1F;
}
.color-switchers .btn.orange.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #F79F1F;
}
.color-switchers .btn.purple{
  background: #8e44ad;
}
.color-switchers .btn.purple.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #8e44Ad;
}
.color-switchers .btn.green{
  background: #3A9943;
}
.color-switchers .btn.green.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #3A9943;
}
.home-content{
  height: 100vh;
  width: 100%;
  background: var(--light-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
}
.home-content h2{
  color: var(--black);
  font-size: 50px;
}
.home-content h3{
  color: var(--black);
  font-size: 42px;
  margin-top: -8px;
}
.home-content h3 span{
  color: var(--nav-main);
}
.home-content h3 span.darkMode{
  color: var(--black);
}
.home-content p{
  color: var(--black);
  font-size: 16px;
  width: 45%;
  text-align: justify;
  margin: 4px 0 30px 0;
}
.home-content a{
  color: #fff;
  font-size: 20px;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--nav-main);
}
.home-content a i{
  transform: rotate(45deg);
  font-size: 16px;
}
.home-content a:hover{
  background: var(--switchers-main);
}
@media (max-width: 1050px) {
  .home-content p{
    width: 70%;
  }
}

If you face any difficulties while creating your Website with Color Switcher and Dark Light Mode  or your code is not working as expected, you can download the source code files for this Website with Day Night Mode and Color Switcher Feature for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/website-html-css-javascript/feed/ 0