Simple Website Design – 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. Sat, 17 Jun 2023 17:09:44 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Make a Simple Responsive Website in HTML and CSS https://www.codingnepalweb.com/make-simple-responsive-website-html-css/ https://www.codingnepalweb.com/make-simple-responsive-website-html-css/#respond Sat, 17 Jun 2023 16:16:33 +0000 https://www.codingnepalweb.com/?p=5594 Make a Simple Responsive Website in HTML and CSS

In the process of acquiring knowledge in web development, one of the crucial skills for learners is the ability to build both simple and complex websites. A strong skill for learners is the capability to create a website using only HTML and CSS, without relying on frameworks like Bootstrap.

A website is a collection of digital resources, such as web pages and related stuff. It is a digital platform with interactive features, multimedia, and text that is designed to provide users with a variety of information, services, or resources.

In this blog post, you will discover how to design a contemporary and visually appealing website using HTML and CSS. The website will feature a logo, a navigation bar, a sidebar menu, and a curved design at the bottom. Additionally, it will be responsive, ensuring it adapts well to different devices and screen sizes.

The video tutorial and demo of the website provided below aim to guide you through the process of creating a straightforward, responsive website using HTML and CSS. Each step will be clearly demonstrated, allowing you to follow along and learn effectively.

Simple Responsive Website in HTML and CSS

As you have seen the process of building a basic, responsive website with a curved pattern at the bottom using HTML and CSS. Furthermore, this website is fully responsive.

I strongly recommend watching the complete video tutorial to learn how to visually create this website design step by step. However, if you prefer not to watch the tutorial, you can proceed with reading the blog for instructions on creating the website independently.

Steps To Create Website in HTML and CSS

To create this simple responsive website in HTML and CSS, follow these step-by-step instructions:

  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. Download the images folder and put this folder inside the project folder. This folder has all the images that will be used for this website.

To start, add the following HTML codes to your index.html file: The provided code segment consists of a website header and an unordered list (ul) for website navigation. It also includes a hamburger button that allows toggling of the website’s sidebar in the mobile version and images.

<!DOCTYPE html>
<!-- Coding by CodingNepal || www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Responsive Website in HTML CSS</title>
    <link rel="stylesheet" href="style.css" />
    <script src="../custom-scripts.js" defer></script>
  </head>
  <body>
    <main>
      <!-- Header Start -->
      <header>
        <nav class="nav container">
          <h2 class="nav_logo"><a href="#">CodingNepal</a></h2>

          <ul class="menu_items">
            <img src="images/times.svg" alt="timesicon" id="menu_toggle" />
            <li><a href="#" class="nav_link">Home</a></li>
            <li><a href="#" class="nav_link">About</a></li>
            <li><a href="#" class="nav_link">Service</a></li>
            <li><a href="#" class="nav_link">Project</a></li>
            <li><a href="#" class="nav_link">Contact</a></li>
          </ul>
          <img src="images/bars.svg" alt="timesicon" id="menu_toggle" />
        </nav>
      </header>
      <!-- Header End -->

      <!-- Hero Start -->
      <section class="hero">
        <div class="row container">
          <div class="column">
            <h2>Top free tool and extension to <br />radiply grow you business</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, architecto? Consectetur enim obcaecati velit quibusdam iure, perspiciatis accusantium, voluptatibus possimus cum voluptates dolorum optio ab vitae. Praesentium voluptas quia voluptates at aperiam aliquid vitae autem!</p>
            <div class="buttons">
              <button class="btn">Read More</button>
              <button class="btn">Contact Us</button>
            </div>
          </div>
          <div class="column">
            <img src="images/hero.png" alt="heroImg" class="hero_img" />
          </div>
        </div>
        <img src="images/bg-bottom-hero.png" alt="" class="curveImg" />
      </section>
      <!-- Hero End-->
    </main>

    <script>
      const header = document.querySelector("header");
      const menuToggler = document.querySelectorAll("#menu_toggle");

      menuToggler.forEach(toggler => {
        toggler.addEventListener("click", () => header.classList.toggle("showMenu"));
      });
    </script>
  </body>
</html>

Next, add the following CSS codes to your style.css file to apply visual styling to your website. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

/* 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;
}
main {
  background: #6610f2;
}
.container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}
.nav_logo {
  padding: 10px 0;
}
.menu_items {
  display: flex;
  list-style: none;
  gap: 20px;
}
a {
  color: #fff;
  text-decoration: none;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: url(images/bg-dot.png), url(images/bg-dot.png), url(images/bg-round.png), url(images/bg-tree.png);
  background-position: 10px 10px, bottom 215px right 10px, left 55% top -1%, left 45% bottom -1px;
  background-repeat: no-repeat;
}
.curveImg {
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
.hero .row {
  display: flex;
  align-items: center;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  padding: 0 60px;
  gap: 30px;
  justify-content: space-between;
}
.hero .row h2,
.hero .row p {
  color: #fff;
}
.hero .row h2 {
  font-size: 36px;
  margin-bottom: 16px;
}
.hero .column {
  width: 50%;
}
.buttons {
  display: flex;
  margin-top: 25px;
  gap: 10px;
}
.btn {
  padding: 14px 26px;
  background: #fff;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:last-child {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
}
.btn:last-child:hover {
  background-color: #fff;
  color: #333;
}
.hero_img {
  width: 100%;
  z-index: 10;
  position: relative;
}
#menu_toggle {
  display: none;
}

/* Reponsive */
@media (width < 860px) {
  #menu_toggle {
    display: block;
  }
  .nav {
    padding: 0 20px;
    background-color: #fff;
  }

  .menu_items {
    position: fixed;
    top: 0;
    width: 260px;
    background-color: #fff;
    height: 100%;
    left: -100%;
    padding: 50px 30px 30px;
    flex-direction: column;
    transition: all 0.5s ease;
  }
  .showMenu .menu_items {
    left: 0;
  }
  a {
    color: #333;
  }
  #menu_toggle {
    width: 20px;
    cursor: pointer;
  }
  .menu_items #menu_toggle {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .hero {
    padding-top: 130px;
  }
  .hero .row {
    flex-direction: column;
    padding: 0 20px;
    justify-content: center;
  }
  .hero .row .column {
    width: 100%;
  }
}

@media (width < 600px) {
  .hero {
    padding-top: 80px;
  }
  .hero .row h2 {
    font-size: 26px;
  }
  .buttons {
    justify-content: center;
  }
  .btn {
    padding: 10px 16px;
  }
}

 

Conclusion and Final Words

In conclusion, creating a responsive website with a modern feel allows you to apply your skills to a real-world website. I hope that by following the steps in this post, you’ve successfully created your own website using HTML and CSS.

To further improve your web development skills, you can try to create our 10+ website templates that are created using HTML, CSS, and JavaScript. This project helps you expand your knowledge.

If you encounter any difficulties while creating your own Website or if your code is not working as expected, you can download the source code files for this website for free by clicking the Download button.

]]> https://www.codingnepalweb.com/make-simple-responsive-website-html-css/feed/ 0 10+ Website Templates Design in HTML CSS and JavaScript https://www.codingnepalweb.com/free-website-templates-designs-source-code/ https://www.codingnepalweb.com/free-website-templates-designs-source-code/#respond Tue, 13 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4131 Top 10 Website Templates Design in HTML CSS & JavaScript

If you want to learn how to create the best Website Templates Design using HTML, CSS, and JavaScript and want step-by-step guidance, this blog is for you.

In this blog, I have provided a list of the 10+ Best Website Templates Design with source code that is created using HTML, CSS, and JavaScript. I believe that even if you are a complete beginner in these languages then also, you will be able to create these templates using the provided basic code. Recently, I shared a list of the top 5 sidebar designs. I hope you found it helpful.

Generally, we can understand that a website is a collection of related web pages that are hosted on a web server and can be accessed over the internet through a web browser. Websites typically provide information, offer online services, or sell products and services. Users can access a website by entering a domain name or IP address into a web browser’s address bar.

Let’s get into our list of Top 10 Website Templates Design in HTML CSS & JavaScript

1. Simple Website Design in HTML & CSS 

Simple Website in HTML and CSS

In this list, this is the simple website design I make in HTML and CSS. It includes a navigation bar with a logo and navigation links, some text and a button, and a full-screen image. These elements are often used in website design.

If you are new to HTML and CSS and want to create a simple website design, you should try making this website. The provided links include the source code file and a video tutorial to guide you through the process. This is a great way to learn the basics of HTML and CSS and create a simple website template.

2. Simple Portfolio Website Template in HTML & CSS

Simple Portfolio Website in HTML & CSS

This is a Simple Portfolio website design created using HTML and CSS. The website includes a profile image, logo, navigation links, the person’s name, short details, and a button. This design is a great way to showcase a person’s skills and experience and can be easily customized using HTML and CSS.

If you are a beginner in HTML and CSS and want to create a simple Portfolio Website, this design is a good starting point. The provided links include a video tutorial and the source code files to help you get started. This is a great way to learn the basics of HTML and CSS and create a simple portfolio website template.

4. Glassmorphism Website Template in HTML & CSS

Glassmorhism Website in HTML & CSS

This is the only website template on this list with a Glassmorphism user interface. Glassmorphism is a popular design trend that involves using transparent and semi-transparent elements to create a distinctive and eye-catching user interface. Using HTML and CSS, it is possible to create a wide range of website designs, including those with a Glassmorphism user interface.

I created a website using HTML and CSS that has a Glassmorphism user interface. The website design includes a logo, navigation links, two buttons, some text, and a video play section. It also has two circles on the back. The provided links include the source code and a video tutorial to help you create this design.

5. Portfolio Website Design with Typing Text Animation

Portfolio Website with Typing Text Animation

One of the interesting features of this portfolio website is the typing text animation. It also has a beautiful background image and a search box. These features make the website eye-catching and engaging and can be easily implemented using HTML and CSS.

If you are interested in creating a portfolio website that stands out and showcases your skills and experience in a unique way, you should consider trying to create this design. Visit the given links for the source code and the video tutorial for this Portfolio Website Template.

6. Coming Soon Website Template in HTML CSS & JS

Coming Soon Website in HTML CSS & JavaScript

This is the coming soon website template which is created in HTML CSS and JavaScript. As you can on this Website I have some basic content like text, time, and email address fields. The time decreases every second.

If you already have a basic understanding of HTML, CSS, and JavaScript, this website can help you improve your skills. Check out the links provided for video tutorials and the source code for this coming soon website design.

7. Website Design with Dark/Light Mode and Color Switcher

Website with Dark/Light Mode and Color Switcher

In this website template, you can get some advanced features like Color Switcher and Dark/Light Mode. By clicking on the color switcher you can choose whatever color you want on your website. As well you can change this Website theme to dark mode.

If you want to create a customizable website with modern features like a color switcher and a dark/light mode toggle with HTML, CSS, and JavaScript. The provided link includes the source code and video tutorials for this website design.

8. Complete Website Design in HTML CSS & JavaScript

Coffee Website in HTML CSS & JavaScript

This is a single-page website design with multiple sections. The website template includes a variety of sections such as sliding images, testimonials, a navigation bar, a newsletter, a footer, and more. The website is fully responsive and is built using HTML, CSS, and JavaScript.

If you are looking for a complete single-page website with various features, this project may meet your needs. Visit the provided links including the source code and video tutorial for this coffee website template design.

9. Portfolio Website Template in HTML CSS & JavaScript

Portfolio Website Template in HTML CSS & JavaScript

This is a fully responsive, single-page portfolio website template built using HTML, CSS, and JavaScript. The website template includes sections for the header, about us, contact us, footer, and more.

If you are looking for a portfolio website with a single page and multiple sections, this project may be a good fit for your needs. The provided links include the source code and video tutorial for this portfolio website template.

10. Portfolio Website Template with Typing Text Animation

Portfolio Website Template with Typing Text Animation

The main attraction of this Portfolio Website Design is the typing text animation. This is a one-page website with multiple sections that are fully responsive. I have also included an owl carousel feature. This website was built using HTML, CSS, JavaScript, and the Owl carousel plugin.

If you want a modern portfolio website with features that can help improve your HTML, CSS, and JavaScript skills, this project is for you. The source code and video tutorial for the Portfolio Website Template are available in the provided links.

11. Responsive Personal Portfolio Website in Bootstrap

Responsive Personal Portfolio Website in HTML CSS and Bootstrap

This is a responsive personal portfolio website that was created using HTML, CSS, and Bootstrap. This website includes key sections such as Home, Skills, Portfolio, About Us, Curriculum Vitae (CV), Contact Us Form, and Footer.

Since I used Bootstrap to create this website, it ensures seamless responsiveness and a user-friendly experience. Whether you’re a student seeking to learn by recreating this website or an aspiring professional looking to showcase your portfolio, this website is the perfect way to present your talents to the world.

12. Responsive Custom Website in HTML & CSS

Create A Responsive Custom Website using HTML and CSS

This is a custom responsive website created using only pure HTML and CSS. This website focuses on camping gear and highlights sellers of essential equipment. But you can also choose a different theme and customize it to your liking.

This website consists of key sections: home, services, portfolio, about us, contact us and footer. Each section is fully responsive, adapting seamlessly to different screen sizes. On smaller devices, a hamburger menu provides convenient toggling of the menu’s visibility.

Conclusion

In this list, I presented the 10+ Best Free Website Templates Designs created with HTML, CSS, and JavaScript. I hope you liked them and found them useful. Additionally, there are many other website template designs on our website that we did not include in this list. Feel free to check them out and find the perfect one for your needs.

If you want to improve your skills in HTML, CSS, and JavaScript, then consider subscribing to My YouTube Channel. There, you will find video tutorials that cover a variety of topics related to pure HTML, CSS, and JavaScript.

If you found this blog helpful, I encourage you to share it with others. Thank you!!

]]> https://www.codingnepalweb.com/free-website-templates-designs-source-code/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 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 Create a Website With Typing Text Animation using HTML & CSS https://www.codingnepalweb.com/create-website-with-typing-text/ https://www.codingnepalweb.com/create-website-with-typing-text/#respond Fri, 26 Feb 2021 21:09:52 +0000 https://www.codingnepalweb.com/?p=4234  

Create a Website With Typing Text Animation

 

Hello guys, today in this blog you will learn to create a Website With Typing Text Animation using HTML & CSS. As you know, in my earlier blog I have shared how to create a Simple Website in HTML & CSS, also I will add some essential features to this website that we had a skip in the previous website design.

Website is the combination of various webpages and it contains articles, images hyperlinks, navigation menus, and so many other things. We can find various types of website on the internet, some give us news, text article, some sells us products, and some provide us jokes also. The website could be different in design and contains but they are built to fulfill user’s needs.

As you see on the given image of the website on the webpage. Basically website header looks like this, one navigation menu some images, and buttons. Also, you can see some social media buttons on the right bottom side. Those on the image have typing text animation, I’m mean they appear like someone is typing them. When we will hover those media icon brightness increase smoothly and also I have added hover animation one that two buttons.

To see all the essential codes and animation that I have added to this website please do watch the full video tutorial which I have provided below.

Video Tutorial of  Website With Typing Text Animation using HTML & CSS

As you have seen on the given video tutorial of this website design with typing text animation. That text effect is made by pure CSS animation property and when I hovered on the button their height smoothly decrease, this animation also made from CSS scale property. In media buttons, I have increased their opacity while it hovered.

If you are familiar with HTML & CSS then you can easily build this website by typing text animation, those friends who are feeling difficulty creating this website design, you can take all codes of this program from below.

You Might Like This:

Website With Typing Text Animation [Source Code]

To copy-paste the given codes this website design, first you need to create two files, one is HTML File and another is the CSS file. after creating these two files you can copy-paste all codes in your document. You can also download all source code from the given “Download Button” directly.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Simple Website Design | 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>
   <div class="navbar">
     <div class="logo">
      <img src="images/logo.png" alt="">
     </div>
     <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Latest</a></li>
        <li><a href="#">Category</a></li>
         <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="search-box">
        <input type="text" placeholder="Search here...">
        <a href="#"><i class="fas fa-search"></i></a>
      </div>
   </div>
   </nav>
   <div class="content">
     <div class="text-content">
       <div class="text">Hello, It's Me </div>
       <div class="name">Hannah Lennon</div>
       <div class="job">
         <div class="job">
           <span>And I'm a</span>
            <div class="typing-text">
              <span class="one">Youtuber,</span>
              <span class="two">Blogger.</span>
            </div>
          </div>
       </div>
       <div class="buttons">
   <button>About Me</button>
   <button>Follow Me</button>
 </div>
     </div>
     <div class="girl">
       <img src="images/girl.png" alt="">
     </div>
   </div>
   <div class="media-icons">
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
    <a href="#"><i class="fab fa-pinterest"></i></a>
  </div>
 </header>
</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;
}
header{
  height: 100vh;
  width: 100%;
  background: url("images/background.png") no-repeat;
  background-position: center;
}
::selection{
  background: #a3f5ec;
}
header nav{
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 12;
}
.navbar{
  width: 90%;
  display: flex;
  margin: 20px auto 0 auto;
  align-items: center;
  justify-content: space-between;
}
  header nav .logo{
  height: 80px;
  width: 150px;
}
.logo img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
nav .menu{
  display: flex;
}
nav .menu li{
  list-style: none;
  margin: 0 10px;
}
nav .menu a{
  color: #2c3e50;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
nav .menu a:hover{
  color: #000;
}
nav .search-box{
  position: relative;
  height: 40px;
  width: 250px;
}
.search-box input[type="text"]{
  position: absolute;
  font-size: 18px;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  outline: none;
  color: #2c3350;
  border: 2px solid #2c3350;
  background: #f2f2f2;
  padding: 0 10px 0 40px;
}
.search-box a{
  position: absolute;
  top: 50%;
  left: 10px;
  font-size: 20px;
  color: #2c3350;
  transform: translateY(-50%);
  border-right: 2px solid #2c3350;
  padding: 0 5px 0 0;
}
.text-content{
  position: absolute;
  top: 33%;
  left: 7%;
  z-index: 12;
}
header .text-content .text{
  font-size: 27px;
  color: #2c3350;
}
header .text-content .name{
color: #2c3350;
 font-size: 75px;
 font-weight: 600;
 margin: -20px 0 0 -3px;
}
header .text-content .job{
 color: #2c3350;
 font-size: 40px;
 margin: 5px 0;
 margin-top: -4px;
 display: flex;
}
.text-content .typing-text{
  margin-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid #1de2d1;
  animation: typing 5s steps(15) infinite;
}
@keyframes typing{
  0%{
    width: 0ch;
  }
  50%{
    width: 15ch;
  }
  100%{
    width: 0ch;
  }
}
.text-content .job .one{
  color: #1de2d1;
}
.text-content .job .two{
  color: #1de2d1;
}
.buttons{
  margin: 20px 0 0 50px;
}
.text-content .buttons button{
  outline: none;
  margin: 0 10px;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient( 135deg, #2AFADF     10%, #C346C2 100%);
}
.buttons button:hover{
  transform: scale(0.97);
}
.content .girl img{
  position: absolute;
  height: 95%;
  bottom: 0;
  right: 80px;
  position: absolute;
}
header .media-icons{
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 40px;
  bottom: 40px;
}
.media-icons a{
 margin-top: 8px;
 font-size: 20px;
 font-weight: 500;
 text-decoration: none;
 opacity: 0.7;
 color: #2c3350;
 transition: all 0.3s ease;
}
.media-icons a:hover{
 opacity: 1;
}

If you face any difficulties while creating your Website with Typing Text Animation or your code is not working as expected, you can download the source code files for this Portfolio 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.

]]> https://www.codingnepalweb.com/create-website-with-typing-text/feed/ 0