Website Designs – CodingNepal

How to Create Responsive Fiverr Website in HTML and CSS

CodingNepal — Wed, 11 Oct 2023 11:00:31 +0000

If you’re a beginner web developer, creating a Fiverr website using HTML and CSS is a valuable opportunity to gain real-world experience. By recreating the design of a well-established platform like Fiverr, you’ll not only develop practical skills in HTML and CSS but also demonstrate your ability to replicate existing designs.

In this easy-to-follow blog post, I’ll show you how to create a responsive Fiverr website using only HTML, CSS, and JavaScript. You’ll learn how to create an interactive website’s homepage with a navigation bar, position elements on the page, and style them to match the Fiverr look and feel.

Throughout the post, we’ll explore a variety of HTML tags and CSS properties to efficiently create our Fiverr-inspired homepage. To create an attractive layout that attracts viewers and ensures a simple interface, we’ll use tags like nav, sections, divs, inputs, links, and other commonly used tags.

Video Tutorial of Fiverr Website in HTML and CSS

Steps To Create Fiverr Website in HTML and CSS

To create a responsive Fiverr-inspired Homepage using HTML and CSS, follow these step-by-step instructions:

First, create a folder with any name you like. Then, put the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Download and place the Images folder in your project directory. This folder includes the Fiverr logo and the hero background image.

To start, add the following HTML codes to your index.html file. These codes include a navigation bar (nav), sections, input fields, links, and various other tags necessary for your webpage. Additionally, this code includes a few lines of JavaScript code to toggle the mobile menu on small screens.





  
  
  Fiverr Homepage Clone | CodingNepal
  
  
  


  
    
      
        
      
      
        Fiverr Business
        Explore
        
          
            language
            English
          
        
        Become a Seller
        Sign In
        Join Us
        close
      
      menu
    
  

  
    
      Find the right freelance service, right away
      
        
        
      
      
        Popular:
        
          Webite Design
          Logo Design
          WordPress
          AI Design

Next, add the following CSS codes to your style.css file to make your webpage look like the Fiverr Homepage. These codes include various styles for elements like color, background, border, and even the homepage image. Additionally, they make your webpage responsive using media queries.

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

body {
  background: #1B1B1D;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  padding: 20px;
}

header .navbar {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .menu-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 30px;
}

.navbar .menu-links li a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s ease;
}

.navbar .menu-links .language-item a {
  display: flex;
  gap: 8px;
  align-items: center;
}

.navbar .menu-links .language-item span {
  font-size: 1.3rem;
}

.navbar .menu-links li a:hover {
  color: #1dbf73;
}

.navbar .menu-links .join-btn a {
  border: 1px solid #fff;
  padding: 8px 15px;
  border-radius: 4px;
}

.navbar .menu-links .join-btn a:hover {
  color: #fff;
  border-color: transparent;
  background: #1dbf73;
}

.hero-section {
  height: 100vh;
  background-image: url("images/hero-img.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
  padding: 0 20px;
  align-items: center;
}

.hero-section .content {
  max-width: 1280px;
  margin: 0 auto 40px;
  width: 100%;
}

.hero-section .content h1 {
  color: #fff;
  font-size: 3rem;
  max-width: 630px;
  line-height: 65px;
}

.hero-section .search-form {
  height: 48px;
  display: flex;
  max-width: 630px;
  margin-top: 30px;
}

.hero-section .search-form input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 1rem;
  border-radius: 4px 0 0 4px;
}

.hero-section .search-form button {
  height: 100%;
  width: 60px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #1dbf73;
  color: #fff;
  border-radius: 0 4px 4px 0;
  transition: background 0.2s ease;
}

.hero-section .search-form button:hover {
  background: #19a463;
}

.hero-section .popular-tags {
  display: flex;
  color: #fff;
  gap: 25px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 25px;
}

.hero-section .popular-tags .tags {
  display: flex;
  gap: 15px;
  align-items: center;
  list-style: none;
}

.hero-section .tags li a {
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  padding: 4px 12px;
  border-radius: 50px;
  transition: 0.2s ease;
}

.hero-section .tags li a:hover {
  color: #000;
  background: #fff;
}

.navbar #hamburger-btn {
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 1.7rem;
}

.navbar #close-menu-btn {
  position: absolute;
  display: none;
  color: #000;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 1.7rem;
}

@media screen and (max-width: 900px) {
  header.show-mobile-menu::before {
    content: "";
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    backdrop-filter: blur(5px);
  }

  .navbar .menu-links {
    height: 100vh;
    max-width: 300px;
    width: 100%;
    background: #fff;
    position: fixed;
    left: -300px;
    top: 0;
    display: block;
    padding: 75px 40px 0;
    transition: left 0.2s ease;
  }

  header.show-mobile-menu .navbar .menu-links {
    left: 0;
  }

  .navbar .menu-links li {
    margin-bottom: 30px;
  }

  .navbar .menu-links li a {
    color: #000;
    font-size: 1.1rem;
  }

  .navbar .menu-links .join-btn a {
    padding: 0;
  }

  .navbar .menu-links .join-btn a:hover {
    color: #1dbf73;
    background: none;
  }

  .navbar :is(#close-menu-btn, #hamburger-btn) {
    display: block;
  }

  .hero-section {
    background: none;
  }

  .hero-section .content {
    margin: 0 auto 80px;
  }

  .hero-section .content :is(h1, .search-form) {
    max-width: 100%;
  }

  .hero-section .content h1 {
    text-align: center;
    font-size: 2.5rem;
    line-height: 55px;
  }

  .hero-section .search-form {
    display: block;
    margin-top: 20px;
  }

  .hero-section .search-form input {
    border-radius: 4px;
  }
  
  .hero-section .search-form button {
    margin-top: 10px;
    border-radius: 4px;
    width: 100%;
  }

  .hero-section .popular-tags {
    display: none;
  }
}

Conclusion and Final words

To wrap up, creating a Fiverr website using HTML, CSS, and JavaScript is a valuable project, especially for beginners in web programming. By following the instructions outlined in this post, you’ve successfully created a responsive Fiverr-inspired homepage.

Remember to keep experimenting with code and expanding your skills by creating more impressive websites. I suggest exploring and recreating the other remarkable website designs available on this website.

If you encounter any problems while creating your Fiverr website, you can download the source code files for this Fiverr Homepage project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Create A Responsive Coffee Website in HTML and CSS

CodingNepal — Sun, 01 Oct 2023 09:18:35 +0000

As a beginner in web development, creating a simple yet responsive website can be an exciting and educational project. It is a great way to learn the basics of HTML fundamentals and CSS styles and gain practical experience in creating and designing a website.

In this blog post, I will guide you through the process of creating an attractive, responsive coffee website using HTML and CSS. My website will focus on a coffee theme, but you can customize it. By creating this website, not only will you learn to create a website, but you’ll also learn how to structure web content properly and apply styling to make it responsive to different screen sizes.

To create our coffee website, we will use common HTML elements like header, navigation bar (nav), ul, li, a, and button, along with some basic CSS properties to style and make our website responsive and attractive. So as a beginner, you should have no trouble following the steps and understanding the codes.

Steps to Create Responsive Coffee Website HTML and CSS

To create a responsive coffee website using HTML and CSS, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, put the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.

To start, add the following HTML code to your index.html file: This code includes essential HTML markup with different semantic tags, such as header, nav, h2, a, ul, li, p, and button, which are used to create the layout of our website. Additionally, this code includes a few lines of JavaScript code to toggle the mobile menu on small screens.




  
    
    
    Coffee Website HTML and CSS | CodingNepal
    
    
    
  
  
    
      
        Coffee.
        
          close
          Home
          Products
          Testimonials
          About us
          Contact us
        
        menu
      
    

    
      
        Start Your Day With Fresh Coffee
        
          Coffee is a popular and beloved beverage enjoyed by 
          people around the world.Awaken your senses with a steaming cup of liquid motivation.

Next, add the following CSS code to your style.css file to style and make your coffee website responsive and attractive. Feel free to experiment with different CSS properties, such as colors, fonts, and backgrounds, to give your personal touch and make the website even more beautiful.

/* Importing Google font - 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;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
}

header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar .logo {
  color: #fff;
  font-weight: 600;
  font-size: 2.1rem;
  text-decoration: none;
}

.navbar .logo span {
  color: #C06B3E;
}

.navbar .menu-links {
  display: flex;
  list-style: none;
  gap: 35px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  transition: 0.2s ease;
}

.navbar a:hover {
  color: #C06B3E;
}

.hero-section {
  height: 100vh;
  background-image: url("https://www.codingnepalweb.com/demos/create-responsive-coffee-website-html-css/hero-bg.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.hero-section .content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  color: #fff;
}

.hero-section .content h2 {
  font-size: 3rem;
  max-width: 600px;
  line-height: 70px;
}

.hero-section .content p {
  font-weight: 300;
  max-width: 600px;
  margin-top: 15px;
}

.hero-section .content button {
  background: #fff;
  padding: 12px 30px;
  border: none;
  font-size: 1rem;
  border-radius: 6px;
  margin-top: 38px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease;
}

.hero-section .content button:hover {
  color: #fff;
  background: #C06B3E;
}

#close-menu-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  display: none;
}

#hamburger-btn {
  color: #fff;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  header {
    padding: 10px;
  }

  header.show-mobile-menu::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
  }

  .navbar .logo {
    font-size: 1.7rem;
  }

    
  #hamburger-btn, #close-menu-btn {
    display: block;
  }

  .navbar .menu-links {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    padding: 70px 40px 0;
    transition: left 0.2s ease;
  }

  header.show-mobile-menu .navbar .menu-links {
    left: 0;
  }

  .navbar a {
    color: #000;
  }

  .hero-section .content {
    text-align: center;
  }

  .hero-section .content :is(h2, p) {
    max-width: 100%;
  }

  .hero-section .content h2 {
    font-size: 2.3rem;
    line-height: 60px;
  }
  
  .hero-section .content button {
    padding: 9px 18px;
  }
}

Conclusion and final words

In conclusion, creating a responsive website is a valuable and rewarding experience for beginners in the world of web development. I believe that by following the steps and the codes in this post, you’ve successfully created your responsive coffee website using HTML and CSS.

To further improve your HTML and CSS skills for web development, I suggest recreating other attractive website designs available on this website. This practice will help you gain a better understanding of HTML and CSS and boost your confidence in creating entire websites or website components.

If you encounter any problems while creating your website, you can download the source code files for this website project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

Create A Beautiful Responsive Website in HTML and CSS

CodingNepal — Sat, 09 Sep 2023 11:54:18 +0000

In today’s age, having a basic understanding of web development can be incredibly useful. Whether you want to showcase your portfolio, start a blog, or just experiment with web design, creating a simple website homepage is a great place to start.

In this beginner-friendly post, I’ll guide you through the process of creating your first website homepage using HTML and CSS. You’ll learn how to build an interactive homepage featuring a navigation bar, place elements on the page, and style them to make your website visually appealing and engaging.

To create a responsive website homepage, we will use commonly used HTML elements like div, h2, h1, and button, as well as basic CSS properties. This project is beginner-friendly, so you should have no trouble following along.

Steps to Create Website Homepage HTML & CSS

To create a responsive website homepage using HTML and CSS, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.

To start, add the following HTML codes to your index.html file: This code includes essential HTML markup with different semantic tags like header, nav, h2, div, p, ul, li, buttons, etc. to create a website homepage.




  
    
    
    Responsive Website Homepage HTML and CSS | CodingNepal
    
  
  
    
      
        CodingNepal
        
        
          
        
        
          Home
          About Us
          Services
          Portfolio
          Contact Us
        
        
          Sign In
          Sign Up
        
      
    
    
      
        Mobile App Development
        
          Join us in the exciting world of programming and turn your ideas into
          reality. Unlock the world of endless possibilities - learn to code and
          shape the digital future with us.
        
        
          Join Now
          Learn More

Next, add the following CSS codes to your style.css file to apply visual styling to the homepage, like color, font, background, etc. After that, you can view your attractive and responsive website homepage by loading the web page in your browser.

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, #175d69 23%, #330c43 95%);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 15px;
}

.navbar .logo a {
  font-size: 1.8rem;
  text-decoration: none;
  color: #fff;
}

.navbar .links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 35px;
}

.navbar .links a {
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  padding: 10px 0;
  transition: 0.2s ease;
}

.navbar .links a:hover {
  color: #47b2e4;
}

.navbar .buttons a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  padding: 15px 0;
  transition: 0.2s ease;
}

.navbar .buttons a:not(:last-child) {
  margin-right: 30px;
}

.navbar .buttons .signin:hover {
  color: #47b2e4;
}

.navbar .buttons .signup {
  border: 1px solid #fff;
  padding: 10px 20px;
  border-radius: 0.375rem;
  text-align: center;
  transition: 0.2s ease;
}

.navbar .buttons .signup:hover {
  background-color: #47b2e4;
  color: #fff;
}

.hero-section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 95vh;
  padding: 0 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-section .hero {
  max-width: 50%;
  color: #fff;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #c9c7c7;
}

.hero-section .img img {
  width: 517px;
}

.hero-section .buttons {
  margin-top: 40px;
}

.hero-section .buttons a {
  text-decoration: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: 0.2s ease;
  display: inline-block;
}

.hero-section .buttons a:not(:last-child) {
  margin-right: 15px;
}

.buttons .join {
  background-color: #47b2e4;
}

.hero-section .buttons .learn {
  border: 1px solid #fff;
  border-radius: 0.375rem;
}

.hero-section .buttons a:hover {
  background-color: #47b2e4;
}

/* Hamburger menu styles */
#menu-toggle {
  display: none;
}

#hamburger-btn {
  font-size: 1.8rem;
  color: #fff;
  cursor: pointer;
  display: none;
  order: 1;
}

@media screen and (max-width: 1023px) {
  .navbar .logo a {
    font-size: 1.5rem;
  }

  .links {
    position: fixed;
    left: -100%;
    top: 75px;
    width: 100%;
    height: 100vh;
    padding-top: 50px;
    background: #175d69;
    flex-direction: column;
    transition: 0.3s ease;
  }

  .navbar #menu-toggle:checked ~ .links {
    left: 0;
  }

  .navbar #hamburger-btn {
    display: block;
  }

  .header .buttons {
    display: none;
  }

  .hero-section .hero {
    max-width: 100%;
    text-align: center;
  }

  .hero-section img {
    display: none;
  }
}

Conclusion and final words

In conclusion, creating a website homepage is a simple but valuable project for a beginner web developer. I believe that by following the steps in this post, you’ve successfully created your very first responsive website homepage using HTML and CSS.

Remember to experiment and customize your website to add personal touches and make it even more beautiful. To continue improving your HTML and CSS skills, why not try recreating other attractive website designs available on this website? These designs are not limited to simple homepage designs but also include complete website designs.

If you encounter any problems while creating your website homepage, you can download the source code files for this homepage project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

Create Website with Login & Registration Form in HTML CSS and JavaScript

CodingNepal — Thu, 31 Aug 2023 18:33:30 +0000

If you’re new to web development, creating a website with login and registration forms is an excellent way to learn and practice basic skills like designing a navigation menu bar, creating a website homepage, and building login and registration forms.

In this blog post, I’ll guide you through the process of creating a responsive website with login and registration forms using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, conditional statements, and more.

In this project, the website’s homepage features a navigation bar and a login button. When you click on the button, a login form will popup with a cool blurred background effect. The form has an image on the left and input fields on the right side. If you want to sign up instead, simply click on the sign-up link and you’ll be taken to the registration form.

The website’s navigation bar and forms are completely responsive. This means that the content will adjust to fit any screen size. On a smaller screen, the navigation bar will pop up from the right side when the hamburger button is clicked and in the forms the left image section will remain hidden.

Video Tutorial of Website with Login & Registration Form

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In this video, I’ve explained each line of code and included informative comments to make the process of creating your own website with login and registration forms beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you’ll have your own website with forms that are simple to customize and implement into your other projects.

Steps to Create Website with Login & Registration Form

To create a responsive website with login and registration forms using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css to hold the CSS code.
Create a file called script.js to hold the JavaScript code.
Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this project.

To start, add the following HTML codes to your index.html file. These codes include all essential HTML elements, such as header, nav, ul, form, and more for the project.





    
    
    Website with Login and Registration Form | CodingNepal
    
    
    
    


    
        
            menu
            
                
                CodingNepal
            
            
                close
                Home
                Portfolio
                Courses
                About us
                Contact us
            
            
        
    

    
    
        close
        
            
                Welcome Back
                Please log in using your personal information to stay connected with us.
            
            
                LOGIN
                
                    
                        
                        Email
                    
                    
                        
                        Password
                    
                    Forgot password?
                    
                
                
                    Don't have an account?
                    Signup
                
            
        
        
            
                Create Account
                To become a part of our community, please sign up using your personal information.
            
            
                SIGNUP
                
                    
                        
                        Enter your email
                    
                    
                        
                        Create password
                    
                    
                        
                        
                            I agree the
                            Terms & Conditions
                        
                    
                    
                
                
                    Already have an account? 
                    Login

Next, add the following CSS codes to your style.css file to apply visual styling to your website and forms. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a unique touch to your website.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    background: url("images/hero-bg.jpg") center/cover no-repeat;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
}

.navbar {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.navbar .hamburger-btn {
    display: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.navbar .logo {
    gap: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo img {
    width: 40px;
    border-radius: 50%;
}

.navbar .logo h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.7rem;
}

.navbar .links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.navbar .close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: #000;
    cursor: pointer;
}

.navbar .links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.1s ease;
}

.navbar .links a:hover {
    color: #19e8ff;
}

.navbar .login-btn {
    border: none;
    outline: none;
    background: #fff;
    color: #275360;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.15s ease;
}

.navbar .login-btn:hover {
    background: #ddd;
}

.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-width: 720px;
    background: #fff;
    border: 2px solid #fff;
    transform: translate(-50%, -70%);
}

.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-popup .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}

.form-popup .form-box {
    display: flex;
}

.form-box .form-details {
    width: 100%;
    color: #fff;
    max-width: 330px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login .form-details {
    padding: 0 40px;
    background: url("images/login-img.jpg");
    background-position: center;
    background-size: cover;
}

.signup .form-details {
    padding: 0 20px;
    background: url("images/signup-img.jpg");
    background-position: center;
    background-size: cover;
}

.form-box .form-content {
    width: 100%;
    padding: 35px;
}

.form-box h2 {
    text-align: center;
    margin-bottom: 29px;
}

form .input-field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.input-field input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 3px;
}

.input-field input:focus {
    border: 1px solid #00bcd4;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}

.input-field input:is(:focus, :valid) {
    padding: 16px 15px 0;
}

.input-field input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #00bcd4;
    font-size: 0.75rem;
}

.form-box a {
    color: #00bcd4;
    text-decoration: none;
}

.form-box a:hover {
    text-decoration: underline;
}

form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}

form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    margin: 25px 0;
    background: #00bcd4;
    transition: 0.2s ease;
}

form button:hover {
    background: #0097a7;
}

.form-content .bottom-link {
    text-align: center;
}

.form-popup .signup,
.form-popup.show-signup .login {
    display: none;
}

.form-popup.show-signup .signup {
    display: flex;
}

.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}

.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

@media (max-width: 950px) {
    .navbar :is(.hamburger-btn, .close-btn) {
        display: block;
    }

    .navbar {
        padding: 15px 0;
    }

    .navbar .logo img {
        display: none;
    }

    .navbar .logo h2 {
        font-size: 1.4rem;
    }

    .navbar .links {
        position: fixed;
        top: 0;
        z-index: 10;
        left: -100%;
        display: block;
        height: 100vh;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        background: #fff;
        transition: 0.2s ease;
    }

    .navbar .links.show-menu {
        left: 0;
    }

    .navbar .links a {
        display: inline-flex;
        margin: 20px 0;
        font-size: 1.2rem;
        color: #000;
    }

    .navbar .links a:hover {
        color: #00BCD4;
    }

    .navbar .login-btn {
        font-size: 0.9rem;
        padding: 7px 10px;
    }
}

@media (max-width: 760px) {
    .form-popup {
        width: 95%;
    }

    .form-box .form-details {
        display: none;
    }

    .form-box .form-content {
        padding: 30px 20px;
    }
}

After applying the styles, load the webpage in your browser to view your website. The forms are currently hidden and will only appear later using JavaScript. Now, you will only see the website with the navigation bar and hero image.

Finally, add the following JavaScript code to your script.js file. The code contains click event listeners which can toggle classes on various HTML elements. Although the code is simple and easy to understand, it is recommended to watch the video tutorial above, pay attention to the code comments, and experiment with the code for better understanding.

const navbarMenu = document.querySelector(".navbar .links");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const hideMenuBtn = navbarMenu.querySelector(".close-btn");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");

// Show mobile menu
hamburgerBtn.addEventListener("click", () => {
    navbarMenu.classList.toggle("show-menu");
});

// Hide mobile menu
hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());

// Show login popup
showPopupBtn.addEventListener("click", () => {
    document.body.classList.toggle("show-popup");
});

// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());

// Show or hide signup form
signupLoginLink.forEach(link => {
    link.addEventListener("click", (e) => {
        e.preventDefault();
        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
    });
});

Conclusion and Final words

In conclusion, creating a website’s homepage that features forms is a hands-on experience to learn various website components and fundamental web development concepts. I believe that by following the steps outlined in this blog post, you’ve successfully created your own website with login and registration forms using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating other websites and login form projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript are used to create unique website components.

If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

How to Create An Amazon Clone in HTML and CSS

CodingNepal — Mon, 17 Jul 2023 16:13:41 +0000

If you’re new to web development and excited to create your own website, why not start by creating an Amazon-inspired homepage? It’s a valuable project that allows you to practice your skills while making a familiar and engaging website.

In this blog post, I’ll guide you through the process of creating a simple yet impressive Amazon clone using only HTML and CSS. By recreating the main elements of the Amazon homepage, such as the navigation bar, search bar, hero section, cards, and footer, you’ll gain a solid understanding of how these components come together to create an attractive website.

Throughout the post, we’ll also explore different HTML tags and CSS properties that will help us efficiently create our Amazon-inspired homepage. To keep it beginner-friendly, we’ll use tags like nav, sections, divs, inputs, links, footer, and other commonly used tags.

Steps To Create an Amazon Clone in HTML and CSS

To create an Amazon-inspired Homepage Clone using only HTML and CSS, follow these step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download and place the Images folder in your project directory. This folder includes the Amazon logo, hero background image, and shopping card images.

To start, add the following HTML codes to your index.html file: These codes include navigation (nav), sections, input fields, links, and various other tags necessary for your Amazon clone webpage.





  
  
  Amazon Website Clone | CodingNepal
  
  


    
      
        
          
        
        
          Deliver
          
            location_on
            Nepal
          
        

        
          
          
          
            search
          
        

        
          Hello, sign in
          Account & Lists
        

        
          Returns
            & Orders
        

        
          
            shopping_cart
            
            Cart
        
      
      
      
        
          
            menu
            All
          
  
          
            Today's Deals
            Customer Service
            Registry
            Gift Cards
            Sell
          
          
            Shop deals in Electronics
          
        
      
    

    

    
      
        
          Shop Laptops & Tables
          
          Shop now
        
        
          Shop Smartwatches
          
          Shop now
        
        
          Create with Strip Lights
          
          Shop now
        
        
          Home Refresh Ideas
          
          Shop now
        
      
    

    
      
        Back to top
      
      
        
          Get to Know Us
          About us
          Careers
          Press Release
          Amazon Science
        
        
          Connect with Us
          Facebook
          Twitter
          Instagram
        
        
          Make Money with Us
          Sell on Amazon
          Sell under Amazon Accelerator
          Protect and Build Your Brand
          Amazon Global Selling
          Become an Affiliate
          Fulfillment by Amazon
          Advertise Your Products
          Amazon Pay on Merchants
        
        
          Let Us Help You
          COVID-19 and Amazon
          Your Account
          Return Centre
          100% Purchase Protection
          Amazon App Download
          Help

Next, add the following CSS codes to your style.css file to make your webpage look like Amazon’s homepage. These codes include various styles for elements like color, background, and border, and even the background image for the hero section.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #ddd;
}

/* Header or Navbar */
header {
  width: 100%;
  background-color: #0f1111;
}

.navbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #fff;
  max-width: 1280px;
  margin: 0 auto;
}

.nav-logo img {
  margin-top: 10px;
  width: 128px;
}

.address .deliver {
  margin-left: 20px;
  font-size: 0.75rem;
  color: #ccc;
}

.address .map-icon {
  display: flex;
  align-items: center;
}


.nav-search {
  display: flex;
  justify-content: space-evenly;
  max-width: 620px;
  width: 100%;
  height: 40px;
  border-radius: 4px;
}

.select-search {
  background: #f3f3f3;
  width: 50px;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: none;
}

.search-input {
  max-width: 600px;
  width: 100%;
  font-size: 1rem;
  border: none;
  outline: none;
  padding-left: 10px;
}

.search-icon {
  max-width: 45px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  background: #febd68;
  color: #000;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.sign-in p,
.returns p {
  font-size: 0.75rem;
}

.sign-in,
.returns span {
  font-size: 0.875rem;
  font-weight: 600;
}

.cart {
  display: flex;
}

.cart .cart-icon {
  font-size: 2.5rem
}

.cart p {
  margin-top: 20px;
  font-weight: 500;
}

.banner {
  padding: 10px 20px;
  background: #222f3d;
  color: #fff;
  font-size: 0.875rem;
}

.banner-content {
  margin: 0 auto;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel {
  max-width: 1280px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.panel span {
  margin-right: 7px;
}

.links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 15px;
  flex-grow: 1;
  margin-left: 15px;
}

.links a {
  padding: 10px 0;
}

.deals a {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Hero Section */
.hero-section {
  height: 400px;
  background-image: url("images/hero-img.jpg");
  background-position: center;
  background-size: cover;
}

/* Shop Section */
.shop-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #f3f3f3;
  padding: 50px 0;
}

.shop-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1280px;
  width: 100%;
}

.shop-link {
  background-color: #fff;
  padding: 30px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  white-space: nowrap;
}


.shop-link img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin-bottom: 10px;
}

.shop-link h3 {
  margin-bottom: 10px;
}

.shop-link a {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: blue;
  font-weight: 500;
  transition: color 0.3s ease;
}

.shop-link:hover a {
  color: #c7511f;
  text-decoration: underline;
}

/* Footer */
.footer-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #37475a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  height: 60px;
}

.footer-items {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: 0 auto;
  background: #232f3e;
}

.footer-items h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin: 20px 0 10px 0;
}

.footer-items ul {
  list-style: none;
  margin-bottom: 20px;
}

.footer-items li a {
  color: #ddd;
  font-size: 0.875rem;
}

.footer-items li a:hover {
  text-decoration: underline;
}

Conclusion and Final words

In conclusion, building an Amazon-inspired clone using HTML and CSS is a helpful project, especially for those new to web development. By following the steps outlined in this blog post, you have successfully created your own version of an Amazon homepage.

To continue improving your web development skills, I suggest you try recreating the responsive Fiverr homepage in HTML and CSS. This project will teach you how to use media queries to create a responsive layout for the website.

If you encounter any problems while creating your Amazon-inspired Homepage, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Make a Simple Responsive Website in HTML and CSS

CodingNepal — Sat, 17 Jun 2023 16:16:33 +0000

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:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
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.




  
    
    Simple Responsive Website in HTML CSS
    
    
  
  
    
      
      
        
          CodingNepal

          
            
            Home
            About
            Service
            Project
            Contact
          
          
        
      
      

      
      
        
          
            Top free tool and extension to 
radiply grow you business
            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!

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.

Create A Responsive Custom Website using HTML and CSS

CodingNepal — Tue, 30 May 2023 07:51:26 +0000

In today’s digital landscape, a well-designed and user-friendly website is essential for establishing an online presence. So, as a beginner web developer, it’s important to learn how to create responsive custom websites using HTML and CSS.

In this blog post, we’ll guide you through building your responsive custom website using HTML and CSS. Our example website will focus on camping gear and highlight sellers of essential equipment. You can also choose a different theme and customize it to your liking.

The 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 visibility.

The Home section serves as the landing page with a navigation bar, captivating background image, descriptive text, and a call-to-action button. Services are showcased in visually appealing cards, while the Portfolio section displays accomplished projects through captivating image cards.

The About Us section shares the website’s story, mission, vision, and team details. Contact Us provides contact information and a user-friendly form for email, phone number, and messages. The footer section includes a copyright message and additional navigation links.

https://www.codingnepalweb.com/wp-content/uploads/2023/05/Create-A-Responsive-Custom-Website-using-HTML-and-CSS.mp4

Steps For Creating Custom Website in HTML and CSS

To create a responsive custom website using HTML and CSS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download and place the images folder in your project directory for the custom website. You can also use your own images if desired.

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links, website layout, and different sections. Here you can change the website details according to your theme.

Camping Gear Website | CodingNepal

LOGO

Home
Services
Portfolio
About Us
Contact Us

Camping Gear and Essentials

Discover top-quality camping gear for unforgettable outdoor adventures.
Gear up and make lasting memories.

Our Services

Our Services
Explore our wide range of camping gear services.

Tents
Experience comfort and protection with our high-quality camping tents.

Sleeping Bags
Stay cozy and warm during your camping trips with our premium sleeping bags.

Camp Stoves
Cook delicious meals in the great outdoors with our reliable camp stoves.

Backpacks
Carry your essentials comfortably with our durable and functional camping backpacks.

Camp Chairs
Relax and unwind in style with our comfortable and portable camping chairs.

Camp Lights
Illuminate your campsite with our reliable and energy-efficient camping lights.

Our Portfolio
Take a look at some of our memorable camping adventures.

Mountain Hiking
Embark on an exhilarating hiking adventure in the breathtaking mountain ranges.

Lakeside Camping
Enjoy a tranquil camping experience by the serene shores of picturesque lakes.

Beach Camping
Escape to sandy beaches and camp under the starry sky by the crashing waves.

Forest Exploration
Discover the wonders of lush forests and immerse yourself in nature's beauty.

RV Camping
Experience the freedom of road trips and camping adventures with our RV rentals.

Desert Camping
Embark on a unique desert camping experience and witness stunning landscapes.

About Us
Discover our story in providing camping services.

Our Story
Experience the excellence of our camping gear and services, where we have been offering high-quality camping essentials and gear for outdoor enthusiasts for over a decade. Our commitment to quality and customer satisfaction ensures that every adventurer can rely on us for their camping needs.

Our Mission
At Camping Gear Experts, our mission is to equip outdoor enthusiasts with top-notch camping gear and essentials that enhance their outdoor experiences. We strive to provide reliable, durable, and innovative products that contribute to memorable adventures and lasting memories.
Our Vision
Our vision is to become the go-to destination for camping enthusiasts, known for our extensive selection of premium camping gear and exceptional customer service. We aspire to inspire and enable people to embrace the beauty of nature and create unforgettable camping experiences.

Our Team

John Doe - Founder and CEO
Jane Smith - Gear Specialist
Mark Johnson - Customer Representative
Sarah Brown - Operations Manager

123 Campsite Avenue, Wilderness, CA 98765
info@campinggearexperts.com
(123) 456-7890
Monday - Friday: 9:00 AM - 5:00 PM
Saturday: 10:00 AM - 3:00 PM
Sunday: Closed
www.codingnepalweb.com

Home
Contact

Next, add the following CSS codes to your style.css file to apply styling to the elements, set background images, and utilize media queries for responsiveness across different viewports. Feel free to customize this code by changing the color, font, size, and other CSS properties to match your desired design preferences.

@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;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #f2f2f2;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #333;
}

.navbar {
  display: flex;
  padding: 0 10px;
  max-width: 1200px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.navbar input#menu-toggler {
  display: none;
}

.navbar #hamburger-btn {
  cursor: pointer;
  display: none;
}

.navbar .all-links {
  display: flex;
  align-items: center;
}

.navbar .all-links li {
  position: relative;
  list-style: none;
}

.navbar .logo a {
  display: flex;
  align-items: center;
  margin-left: 0;
}

header a, footer a {
  margin-left: 40px;
  text-decoration: none;
  color: #fff;
  height: 100%;
  padding: 20px 0;
  display: inline-block;
}

header a:hover, footer a:hover {
  color: #ddd;
}

.homepage {
  height: 100vh;
  width: 100%;
  position: relative;
  background: url("images/home-bg.jpg");
  background-position: center 65%;
  background-size: cover;
  background-attachment: fixed;
}

.homepage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.homepage .content {
  display: flex;
  height: 85%;
  z-index: 3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.homepage .content h1 {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 10px;
}

.homepage .content .text {
  margin-bottom: 50px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.content a {
  color: #000;
  display: block;
  text-transform: uppercase;
  font-size: 18px;
  margin: 0 10px;
  padding: 10px 30px;
  border-radius: 5px;
  background: #fff;
  border: 2px solid #fff;
  transition: 0.4s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.content a:hover {
  color: #fff;
  background: rgba(255,255,255,0.3);
}

section {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 80px 0 0;
}

section h2 {
  font-size: 2rem;
}

section > p {
  text-align: center;
}

section .cards {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin-top: 50px;
  padding: 0 10px;
  justify-content: space-between;
}

section.about {
  margin: 0 auto;
  max-width: 1200px;
}

.about .company-info {
  margin-top: 30px;
}

.about h3 {
  margin: 30px 0 10px;
}

.about .team {
  text-align: left;
  width: 100%;
}

.about .team ul {
  padding-left: 20px;
}

section .cards .card {
  background: #fff;
  padding: 40px 15px;
  list-style: none;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 40px;
  width: calc(100% / 3 - 30px);
  text-align: center;
}

.portfolio .cards .card {
  padding: 0 0 20px;
}

.services .card img {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
  border-radius: 100%;
  object-fit: cover;
}

.portfolio .card img {
  width: 100%;
  padding-bottom: 10px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
}

.cards .card p {
  padding: 0 15px;
  margin-top: 5px;
}

.about .row {
  padding: 0 10px;
}

.contact .row {
  margin: 60px 0 90px;
  display: flex;
  max-width: 1200px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.contact .row .col {
  padding: 0 10px;
  width: calc(100% / 2 - 50px);
}

.contact .col p {
  margin-bottom: 10px;
}

.contact .col p i {
  color: #7a7a7a;
  margin-right: 10px;
}

.contact form input {
  height: 45px;
  margin-bottom: 20px;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  outline: none;
  border: 1px solid #bfbfbf;
}

.contact form textarea {
  padding: 10px;
  width: 100%;
  font-size: 16px;
  height: 150px;
  outline: none;
  resize: vertical;
  border: 1px solid #bfbfbf;
}

.contact form button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 17px;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background: #333;
  transition: 0.2s ease;
}

.contact form button:hover {
  background: #525252;
}

footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #000;
  padding: 20px 0;
}

footer div {
  padding: 0 10px;
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

footer span {
  color: #fff;
}

footer a {
  padding: 0;
}

@media screen and (max-width: 860px) {
  .navbar .all-links {
    position: fixed;
    left: -100%;
    width: 300px;
    display: block;
    height: 100vh;
    top: 75px;
    background: #333;
    transition: left 0.3s ease;
  }

  .navbar #menu-toggler:checked~.all-links {
    left: 0;
  }

  .navbar .all-links li {
    font-size: 18px;
  }

  .navbar #hamburger-btn {
    display: block;
  }

  section > p {
    text-align: center;
  }

  section .cards .card {
    width: calc(100% / 2 - 15px);
    margin-bottom: 30px;
  }

  .homepage .content h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .homepage .content .text {
    font-size: 17px;
  }

  .content a {
    font-size: 17px;
    padding: 9px 20px;
  }

  .contact .row {
    flex-direction: column;
  }

  .contact .row .col {
    width: 100%;
  }

  .contact .row .col:last-child {
    margin-top: 40px;
  }

  footer a {
    height: 0;
  }
}

@media screen and (max-width: 560px) {
  section .cards .card {
    width: 100%;
    margin-bottom: 30px;
  }
}

If you look at the HTML and CSS code carefully, you’ll notice the implementation of the input type checkbox, which effectively toggles the visibility of the navigation bar when the hamburger icon is clicked. The website’s code is thoughtfully organized and straightforward, making it easily understandable, especially for beginners.

Conclusion and Final Words

In conclusion, learning how to create a responsive custom website using HTML and CSS enhances your web development skills and provides insight into the process of building a custom website. By following the instructions provided, I hope that you have successfully created an appealing and functional website.

Additionally, on this website, you’ll find a wide range of website templates, including options for business websites, portfolio websites, and more. These templates are built using HTML, CSS, and JavaScript. It’s a great opportunity for you to explore and try recreating them, allowing you to enhance your web development skills even further.

If you encounter any difficulties while creating your own custom website or your code is not working as expected, you can download the source code files for this camping gear theme website for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Responsive Personal Portfolio Website in HTML CSS and Bootstrap

CodingNepal — Sun, 28 May 2023 06:57:51 +0000

Building a personal portfolio website is a valuable skill for web developers. With HTML, CSS, and Bootstrap, you can create an attractive, responsive, and functional website to showcase your talent or services.

In this blog post, we will guide you through the process of building a responsive portfolio website that includes key sections such as Home, Skills, Portfolio, About Us, Curriculum Vitae (CV), Contact Us Form, and Footer.

The Home section will feature a navigation bar, a background image, descriptive text, and a call-to-action button. In the skills section, visually appealing cards will display your skills and expertise. The Portfolio section will showcase your accomplished projects using captivating image cards.

The About Us section will present your achievements in a vertical timeline format, highlighting your professional journey. The Curriculum Vitae (CV) section will showcase essential personal and professional details in a resume format.

The Contact Us section will feature a contact form with fields for email, username, phone number, and message, and finally, the Footer section will feature a copyright message and some social media buttons.

https://www.codingnepalweb.com/wp-content/uploads/2023/05/Responsive-Personal-Portfolio-Website-in-HTML-CSS-and-Bootstrap-only.mp4

Steps For Creating Responsive Portfolio Website in Bootstrap

To create a responsive personal portfolio website using HTML, CSS, and Bootstrap follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download the images folder and put this folder inside the project folder. This folder has all the images that will be used for this portfolio website. But, if you want, you can use your own images.

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links, website layout, and different sections. Since we’ve used Bootstrap for the portfolio website, it’s nearly complete here without the need for extensive custom CSS.

Remember, adding your own personal touch by customizing the website with your unique details and requirements can greatly enhance its overall appeal.



  
    
    
    Portfolio Website | CodingNepal
    
    
    
    
    
    
  
  
    
    
      
        
          James Anderson
          
          
            
              
                SKILLS
              
              
                PORTFOLIO
              
              
                ABOUT
              
              
                CURRICULUM VITAE
              
              
                CONTACT
              
          
        
      
    

    
    
      
        James Anderson
        Information & Computer Systems 
 student
        TELL ME MORE
      
    
    
    
    
      
        
          SKILLS
          Continuously improving my skills and knowledge in the field.
        
      
      
        
          
          Front-end Development
          Proficient in HTML, CSS, and JavaScript. Experienced in responsive web design, building user-friendly interfaces, and using modern frameworks like ReactJS.
        
        
          
          Back-end Development
          Skilled in server-side programming using technologies like Node.js and Express. Experience working with databases such as MongoDB and MySQL.
        
        
          
          Mobile App Development
          Proficient in developing mobile apps for iOS and Android using frameworks like React Native. Experienced in building engaging and intuitive mobile user interfaces.
        
      
    

    
    
      
        
          PORTFOLIO
          A collection of projects I've worked on.
        
        
          
            
              
              
                E-commerce Website
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Responsive Landing Page
                HTML/CSS/Bootstrap
              
            
          
          
            
              
              
                Calculator App
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Blog Website
                HTML/CSS/PHP
              
            
          
          
            
              
              
                Task Management App
                ReactJS
              
            
          
          
            
              
              
                Data Visualization
                Python/Plotly
              
            
          
        
            
    

    
    
      
        
          ABOUT
          Learn more about me, my background, and what motivates me.
        
      
      
        
          1995-2008
          Early Passion for Technology
          From an early age, I became fascinated with computers and programming. Starting with basic HTML and CSS, I gradually expanded my skills to include JavaScript and various frameworks.
        
        
          
        
      
      
        
          
        
        
          2008-2014
          Higher Education and Career Growth
          During my university years, I studied computer science and gained hands-on experience through internships and freelance projects. This period fueled my passion for creating innovative solutions and solving complex problems.
        
      
      
        
          2014-Present
          Professional Excellence and Continuous Learning
          Throughout my career, I have consistently sought opportunities to refine my skills and stay updated with the latest technologies. I strive for excellence in every project I undertake and aim to deliver valuable and impactful results.
        
        
          
        
      
      
        
          
        
        
          Future
          Continuing to Make a Difference
          I am committed to leveraging my skills and expertise to contribute to meaningful projects that have a positive impact on society. I am eager to take on new challenges and collaborate with talented individuals to create innovative solutions.
        
      
      
        
          Your
Next
Hire
        
            
    

    
    
      
        
          CURRICULUM VITAE
          A small sampling of some of the projects I've worked on as a student of the ICS program.
        
      
      
        
          
          James Anderson
          
             your.email@example.com
             (123) 456-7890
             Your Address
          
          
            
            
            
          
          Technical Skills
          
            HTML
            CSS
            JavaScript
            
          
          Personal Interests
          
            Interest 1
            Interest 2
            Interest 3
            
          
        
        
          Profile
          
          Write a brief description of yourself, your background, and your goals. Highlight your key strengths and experiences.
          Highlights of Qualifications
          
          
            Qualification 1
            Qualification 2
            Qualification 3
            
          
          Education
          
          
            Year - Year
            University/Institution
            Degree/Program
          
          Additional Courses & Training
          
          
            Year
            Course/Training
            Institution/Organization
          
          Work Experience
          
          
            Year - Year
            Job Position
            Company/Organization
            
          
          Extracurricular Activities
          
          
            Organization Name
            Role/Position
            Details of your involvement and contributions
          
        
            
    

     
     
      
        
          CONTACT ME
          Interested if I'd be the right fit for your team? Fill in this form and I will respond within 24-48 hours.
        
        
          
            
              
                
                  
                    
                    Enter Name*
                  
                  
                    
                    Enter Email*
                  
                  
                    
                    Enter Phone*
                  
                
                
                  
                  Enter Message*
                
                
                  
                
              
  
            
          
        
       
     

     
     
      
        Copyright © 2023 James Anderson

Next, add the following few custom CSS codes to your style.css file to style some elements, add background images, and do other things on the website. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff;
  --gray-color: #ccc;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
}

/* Changing link color */
.nav-item .nav-link {
  color: var(--white-color);
}

/* Hero section background image */
.hero {
  height: 100vh;
  background-image: url("../images/home-bg.jpg");
  background-repeat: no-repeat;
  background-position: 60% 0%;
  background-size: cover;
  background-attachment: fixed;
}

#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#about .img,
#about img,
.hire-text h2 {
  position: relative;
}

/* Timeline background line */
#about .img::before {
  content: "";
  left: 50%;
  width: 4px;
  position: absolute;
  height: calc(100% + 140px);
  background: var(--gray-color);
}

#about img,
#about .hire-text h2 {
  width: 140px;
}

#about .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

@media screen and (max-width: 990px) {
  #skills .card {
    width: calc(100% / 2 - 10px) !important;
  }
}

@media screen and (max-width: 668px) {
  #skills .card,
  #portfolio .card-wrapper {
    width: 100% !important;
  }
 #about .hire-text h2 {
   height: 70px;
   width: 70px;
 }
}

Conclusion and Final Words

In conclusion, building a responsive portfolio website using HTML, CSS, and Bootstrap is a valuable skill that boosts your online presence and showcases your talents. By following the provided instructions, you’ve successfully created an attractive and functional personal portfolio website.

Additionally, you can explore a wide range of website design templates available on this platform, all built with HTML, CSS, and JavaScript. These templates not only serve as valuable learning resources for aspiring web developers but also provide practical solutions for various purposes.

If you encounter any difficulties while creating your own portfolio website or your code is not working as expected, you can download the source code files for this portfolio website for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Website with Login & Registration Form in HTML CSS & JavaScript

CodingNepal — Sun, 09 Apr 2023 21:11:21 +0000

While learning web development creating a website with a Login and Registration Form could be the best project for beginners to intermediate-level web developers.

Today in this blog you will learn how to build a website that includes a Login and Registration Form using HTML, CSS, and JavaScript. While I have previously designed many websites with Login and Registration Forms, they were created as separate entities.

As you can see on the given image of the Website with the Login & Signup Form that you will be going to learn to create today. The website will have a navigation bar with a logo and nav links with a button that will toggle the form. To toggle the login and registration form there is a button at the bottom of the form.

Website with Login & Registration Form in HTML CSS & JS

As demonstrated in the video tutorial of the website featuring a login and registration form, initially, a website with a navigation bar was presented. Upon clicking the login button, the login form was displayed, and upon clicking the signup button, the registration form appeared.

I would highly recommend you watch the provided video tutorial. In the video tutorial, I have shown to create a website with a login and registration form step by step as well as I have commented on the code to make it easier to understand.

Steps for Creating a Website with Login & Registration Form

To create a Website with Login & Registration Form using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the background image and put this image inside the project folder. This is the website background image.

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 all the source code files of the Website with the Login & Registration Form, by clicking on the given download button.

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




  
    
    
    
    Website with Login & Registration Form
    
    
    
  
  
    
    
      
        CodingLab

        
          
            Home
            Product
            Services
            Contact
          
        

        
      
    

    
    
      
        
        
        
          
            Login

            
              
              
            
            
              
              
              
            

            
              
                
                Remember me
              
              Forgot password?
            

            

            Don't have an account? Signup
          
        

        
        
          
            Signup

            
              
              
            
            
              
              
              
            
            
              
              
              
            

            

            Already have an account? Login

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;
}
a {
  text-decoration: none;
}
.header {
  position: fixed;
  height: 80px;
  width: 100%;
  z-index: 100;
  padding: 0 20px;
}
.nav {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.nav,
.nav_item {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.nav_logo,
.nav_link,
.button {
  color: #fff;
}
.nav_logo {
  font-size: 25px;
}
.nav_item {
  column-gap: 25px;
}
.nav_link:hover {
  color: #d9d9d9;
}
.button {
  padding: 6px 24px;
  border: 2px solid #fff;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}
.button:active {
  transform: scale(0.98);
}

/* Home */
.home {
  position: relative;
  height: 100vh;
  width: 100%;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
}
.home::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease-out;
}
.home.show::before {
  opacity: 1;
  pointer-events: auto;
}
/* From */
.form_container {
  position: fixed;
  max-width: 320px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 101;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-out;
}
.home.show .form_container {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.signup_form {
  display: none;
}
.form_container.active .signup_form {
  display: block;
}
.form_container.active .login_form {
  display: none;
}
.form_close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #0b0217;
  font-size: 22px;
  opacity: 0.7;
  cursor: pointer;
}
.form_container h2 {
  font-size: 22px;
  color: #0b0217;
  text-align: center;
}
.input_box {
  position: relative;
  margin-top: 30px;
  width: 100%;
  height: 40px;
}
.input_box input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 30px;
  color: #333;
  transition: all 0.2s ease;
  border-bottom: 1.5px solid #aaaaaa;
}
.input_box input:focus {
  border-color: #7d2ae8;
}
.input_box i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #707070;
}
.input_box i.email,
.input_box i.password {
  left: 0;
}
.input_box input:focus ~ i.email,
.input_box input:focus ~ i.password {
  color: #7d2ae8;
}
.input_box i.pw_hide {
  right: 0;
  font-size: 18px;
  cursor: pointer;
}
.option_field {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form_container a {
  color: #7d2ae8;
  font-size: 12px;
}
.form_container a:hover {
  text-decoration: underline;
}
.checkbox {
  display: flex;
  column-gap: 8px;
  white-space: nowrap;
}
.checkbox input {
  accent-color: #7d2ae8;
}
.checkbox label {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: #0b0217;
}
.form_container .button {
  background: #7d2ae8;
  margin-top: 30px;
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
}
.login_signup {
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}

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

const formOpenBtn = document.querySelector("#form-open"),
  home = document.querySelector(".home"),
  formContainer = document.querySelector(".form_container"),
  formCloseBtn = document.querySelector(".form_close"),
  signupBtn = document.querySelector("#signup"),
  loginBtn = document.querySelector("#login"),
  pwShowHide = document.querySelectorAll(".pw_hide");

formOpenBtn.addEventListener("click", () => home.classList.add("show"));
formCloseBtn.addEventListener("click", () => home.classList.remove("show"));

pwShowHide.forEach((icon) => {
  icon.addEventListener("click", () => {
    let getPwInput = icon.parentElement.querySelector("input");
    if (getPwInput.type === "password") {
      getPwInput.type = "text";
      icon.classList.replace("uil-eye-slash", "uil-eye");
    } else {
      getPwInput.type = "password";
      icon.classList.replace("uil-eye", "uil-eye-slash");
    }
  });
});

signupBtn.addEventListener("click", (e) => {
  e.preventDefault();
  formContainer.classList.add("active");
});
loginBtn.addEventListener("click", (e) => {
  e.preventDefault();
  formContainer.classList.remove("active");
});

That’s all, now you’ve successfully created a Website with a 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.

View Live Demo

10+ Website Templates Design in HTML CSS and JavaScript

CodingNepal — Tue, 13 Dec 2022 21:11:21 +0000

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

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

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

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

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

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

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.

Watch Video Tutorial

Download Source Code

8. Complete Website Design 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

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

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

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.

Watch Video Tutorial
Download Source Code

12. Responsive Custom Website in HTML & 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.

Watch Video Tutorial
Download Source Code

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!!

Website Designs – CodingNepal

How to Create Responsive Fiverr Website in HTML and CSS

Video Tutorial of Fiverr Website in HTML and CSS

Steps To Create Fiverr Website in HTML and CSS

Find the right freelance service, right away

Conclusion and Final words

Create A Responsive Coffee Website in HTML and CSS

Steps to Create Responsive Coffee Website HTML and CSS

Start Your Day With Fresh Coffee

Conclusion and final words

Create A Beautiful Responsive Website in HTML and CSS

Steps to Create Website Homepage HTML & CSS

Mobile App Development

Conclusion and final words

Create Website with Login & Registration Form in HTML CSS and JavaScript

Video Tutorial of Website with Login & Registration Form

Steps to Create Website with Login & Registration Form

Welcome Back

LOGIN

Create Account

SIGNUP

Conclusion and Final words

How to Create An Amazon Clone in HTML and CSS

Steps To Create an Amazon Clone in HTML and CSS

Shop Laptops & Tables

Shop Smartwatches

Create with Strip Lights

Home Refresh Ideas

Conclusion and Final words

Make a Simple Responsive Website in HTML and CSS

Simple Responsive Website in HTML and CSS

Steps To Create Website in HTML and CSS

Top free tool and extension to radiply grow you business

Conclusion and Final Words

Create A Responsive Custom Website using HTML and CSS

Steps For Creating Custom Website in HTML and CSS

Camping Gear and Essentials

Our Services

Tents

Sleeping Bags

Camp Stoves

Backpacks

Camp Chairs

Camp Lights

Our Portfolio

Mountain Hiking

Lakeside Camping

Beach Camping

Forest Exploration

RV Camping

Desert Camping

About Us

Our Story

Our Mission

Our Vision

Our Team

Contact Us

Conclusion and Final Words

Responsive Personal Portfolio Website in HTML CSS and Bootstrap

Steps For Creating Responsive Portfolio Website in Bootstrap

James Anderson

Information & Computer Systems student

SKILLS

Continuously improving my skills and knowledge in the field.

Front-end Development

Back-end Development

Mobile App Development

PORTFOLIO

A collection of projects I've worked on.

E-commerce Website

Responsive Landing Page

Calculator App

Blog Website

Task Management App

Data Visualization

ABOUT

Learn more about me, my background, and what motivates me.

1995-2008

Early Passion for Technology

2008-2014

Top free tool and extension to
radiply grow you business

Information & Computer Systems
student

Your
Next
Hire