HTML and CSS – 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.

How to Create Responsive Cards in HTML and CSS

CodingNepal — Sat, 23 Sep 2023 13:07:21 +0000

You may have seen cards on different websites. Cards are important web elements used to showcase short articles, product descriptions, or user profiles. If you’re a beginner web developer, creating responsive cards can be a valuable project to understand CSS fundamental concepts such as positing, flexbox, and grid layouts.

In this blog post, I will guide you through the process of creating a responsive card design using HTML and CSS. There will be 3 cards displayed on the screen; each card contains an image, a title, and a button. When you hover over the card, a simple border animation will appear.

To create this card, we will use commonly used HTML elements such as div a, image, heading, and basic CSS properties to style the card and make it responsive. This project is simple and straightforward, so you should not have any trouble following the steps and understanding the codes.

Steps to Create Responsive Card in HTML and CSS

To create a responsive card design 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.
Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this card project.

To start, add the following HTML codes to your index.html file: This code includes essential HTML markup with different semantic tags like div, image, and heading to create our card layout.





    
    
    Responsive Card Design HTML and CSS | CodingNepal
    
    
    
    


    
        
            
            Developer
            A "developer" codes software and websites.
            
                
            
        
        
            
            Designer
            A "designer" is a design expert.
            
                
            
        
        
            
            Editor
            An "editor" ensures content quality and accuracy.

Next, add the following CSS codes to your style.css file to make your card stylish and responsive. Feel free to experiment with different CSS properties, such as colors, fonts, backgrounds, etc., to make your card even more beautiful.

/* 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 {
    background: #ecececdb;
}

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    max-width: 1250px;
    margin: 150px auto;
    padding: 20px;
    gap: 20px;
}

.card-list .card-item {
    background: #fff;
    padding: 26px;
    border-radius: 8px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.04);
    list-style: none;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: border 0.5s ease;
}

.card-list .card-item:hover {
    border: 2px solid #000;
}

.card-list .card-item img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    object-fit: cover;
}

.card-list span {
    display: inline-block;
    background: #F7DFF5;
    margin-top: 32px;
    padding: 8px 15px;
    font-size: 0.75rem;
    border-radius: 50px;
    font-weight: 600;
}

.card-list .developer {
    background-color: #F7DFF5; 
    color: #B22485;
}   

.card-list .designer {
    background-color: #d1e8ff;
    color: #2968a8;
}

.card-list .editor {
    background-color: #d6f8d6; 
    color: #205c20;
}

.card-item h3 {
    color: #000;
    font-size: 1.438rem;
    margin-top: 28px;
    font-weight: 600;
}

.card-item .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-35deg);
    height: 40px;
    width: 40px;
    color: #000;
    border: 1px solid #000;
    border-radius: 50%;
    margin-top: 40px;
    transition: 0.2s ease;
}

.card-list .card-item:hover .arrow  {
    background: #000;
    color: #fff; 
}

@media (max-width: 1200px) {
    .card-list .card-item {
        padding: 15px;
    }
}

@media screen and (max-width: 980px) {
    .card-list {
        margin: 0 auto;
    }
}

Conclusion and final words

In conclusion, creating responsive CSS cards is a simple but practical project for beginner web developers to apply their newly learned HTML and CSS skills. I believe that by following the steps and the codes in this post, you’ve successfully created your own CSS cards.

To further improve your skills in HTML and CSS, I suggest you try recreating other practical website elements such as card designs, login forms, navigation bars, website homepages, etc.

If you encounter any problems while creating your responsive card design, you can download the source code files for this form 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 Footer Section in HTML and CSS

CodingNepal — Sat, 16 Sep 2023 12:02:08 +0000

You’ve probably seen footers on almost every website you’ve visited. The footer is a crucial section of a website that appears at the bottom of every page. It usually contains links to important pages and copyright information.

In this blog post, I’ll show you how to make a responsive footer using HTML and CSS. It’s a simple but great project for beginners, helping you understand how to set up a footer layout with HTML and give it a stylish, responsive design with CSS.

To create a footer, we will use commonly used HTML elements like footer, h4, ul, li, a, and button, along with some basic CSS properties to style and make the footer responsive. So you should have no trouble following along and understanding the codes.

Steps to Create Responsive Footer in HTML and CSS

To create a responsive footer 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 footer, h4, form, input, p, li, and buttons, which are used to create our footer layout.




  
    
    
    Responsive Footer HTML and CSS | CodingNepal
    
    
    
  
  
    
      
        
          Info
          
            About Us
            Compressions
            Customers
            Service
            Collection
          
        

        
          Explore
          
            Free Designs
            Latest Designs
            Themes
            Popular Designs
            Art Skills
            New Uploads
          
        

        
          Legal
          
            Customer Agreement
            Privacy Policy
            GDPR
            Security
            Testimonials
            Media Kit
          
        

        
          Newsletter
          
            Subscribe to our newsletter for a weekly dose
            of news, updates, helpful tips, and
            exclusive offers.

Next, add the following CSS codes to your style.css file to make your footer beautiful and responsive. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a personalized touch to your footer. Now, if you load the web page in your browser, you can see your footer design.

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

.footer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1280px;
  width: 95%;
  background: #10182F;
  border-radius: 6px;
}

.footer .footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3.5rem;
  padding: 60px;
}

.footer-row .footer-col h4 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
}

.footer-col .links {
  margin-top: 20px;
}

.footer-col .links li {
  list-style: none;
  margin-bottom: 10px;
}

.footer-col .links li a {
  text-decoration: none;
  color: #bfbfbf;
}

.footer-col .links li a:hover {
  color: #fff;
}

.footer-col p {
  margin: 20px 0;
  color: #bfbfbf;
  max-width: 300px;
}

.footer-col form {
  display: flex;
  gap: 5px;
}

.footer-col input {
  height: 40px;
  border-radius: 6px;
  background: none;
  width: 100%;
  outline: none;
  border: 1px solid #7489C6 ;
  caret-color: #fff;
  color: #fff;
  padding-left: 10px;
}

.footer-col input::placeholder {
  color: #ccc;
}

 .footer-col form button {
  background: #fff;
  outline: none;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease;
}

.footer-col form button:hover {
  background: #cecccc;
}

.footer-col .icons {
  display: flex;
  margin-top: 30px;
  gap: 30px;
  cursor: pointer;
}

.footer-col .icons i {
  color: #afb6c7;
}

.footer-col .icons i:hover  {
  color: #fff;
}

@media (max-width: 768px) {
  .footer {
    position: relative;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
  }

  .footer .footer-row {
    padding: 20px;
    gap: 1rem;
  }

  .footer-col form {
    display: block;
  }

  .footer-col form :where(input, button) {
    width: 100%;
  }

  .footer-col form button {
    margin: 10px 0 0 0;
  }
}

Conclusion and final words

In conclusion, as a beginner in web development, creating a stylish footer using HTML and CSS is a simple but rewarding web project. The skills you gained can be used to create various components of a website, such as login forms, navigation bars, home pages, and cards.

If you encounter any problems while creating your footer, you can download the source code files for this footer 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.

Create A Simple Pricing Card in HTML and CSS

CodingNepal — Thu, 31 Aug 2023 17:08:32 +0000

As a beginner in web development, it is essential to learn how to design and structure basic components. One of these components is a pricing card, commonly used on websites to display different subscription plans or pricing options.

In this blog post, I will provide a step-by-step guide on how to create a simple pricing card using HTML and CSS. This guide is tailored towards beginners, as it is easy to follow and understand. Throughout the post, you will learn about various HTML tags and CSS properties that will help you create a visually appealing pricing card.

To create this pricing card, 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 Pricing Card in HTML and CSS

To create a pricing card using HTML and CSS, follow these simple steps:

Create a folder. You can name this folder whatever you like, and then create the necessary files inside it.
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.

To start, add the following HTML codes to your index.html file. This code includes essential HTML markup with different elements like h1, h2, div, p, etc. to create a pricing card.





  
  
  Pricing Card HTML and CSS | CodingNepal
  


  
    Unlock Exclusive 
 Content
    $29/month
    Gain exclusive access to our premium content library. Explore and enjoy high-quality videos on your preferred devices.
    Act fast! Offer ends on September 20, 2023.
    Subscribe Now
    
      Special Offer!

Next, add the following CSS codes to your style.css file to apply visual styling to the pricing card like color, font, border, background, etc. Once added, you can load the web page in your browser to view your newly styled pricing card.

/* 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 {
    width: 100%;
    height: 100vh;
    background: #fff6f6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 460px;
    padding: 40px;
    background: #ffffff;
    text-align: center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.container .title {
    font-size: 2rem;
    color: #333;
}

.container .price {
    color: #FF6B6B;
    font-weight: 700;
    font-size: 2.2rem;
    margin: 15px 0;
}

.container span {
    font-size: 1.2rem;
}

.container .description {
    color: #3b3b3b;
    font-size: 1.1rem;
    margin: 20px 0 20px;
}

.container .offer {
    display: block;
    color: #555;
    font-size: 1rem;
    margin-top: 25px;
}

.subscribe-button {
    display: inline-block;
    padding: 15px 0;
    background-color: #FF6B6B;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1.2rem;
    margin-top: 40px;
    width: 100%;
    font-weight: 500;
    transition: 0.2s ease;
}

.subscribe-button:hover {
    background: #ff4d4d;
}

.ribbon-wrap {
    width: 150px;
    height: 150px;
    position: absolute;
    top: -10px;
    left: -10px;
    pointer-events: none;
}

.ribbon {
    width: 230px;
    font-size: 0.918rem;
    text-align: center;
    padding: 8px 0;
    background: #FF6B6B;
    color: #fff;
    position: absolute;
    transform: rotate(-45deg);
    right: -17px;
    top: 29%;
}

Conclusion and Final words

If you’re a beginner in web development, creating your own pricing card with HTML and CSS can be a great project to get started with. This blog post provides simple steps and codes to help you create an attractive pricing card.

To enhance your skills in HTML and CSS, you can try to recreate other cool CSS cards available on this website. In case you encounter any difficulties, feel free to download the source code files for this project for free by clicking the Download button. A zip file will be downloaded to your device.

How to Create Glassmorphism Sidebar in HTML and CSS

CodingNepal — Sat, 29 Jul 2023 18:18:15 +0000

As a beginner web developer, have you ever wondered how to create sidebars like the ones you’ve seen on websites or apps? With just HTML and CSS, you can build your own stylish sidebars with the trendy glassmorphism effect. This not only teaches you how to make popular UI components but also lets you apply the modern glassmorphism style to your designs.

If you’re unfamiliar, glassmorphism is a stylish design trend that creates transparency and frosted glass effects. This effect gives the elements a semi-transparent look, making the background and foreground blend smoothly.

In this blog post, we’ll show you how to create a stylish Glassmorphism Sidebar using only HTML and CSS. Not only will we apply the elegant glassmorphism effect to the sidebar, but we’ll also add an interactive hover animation.

Initially, the sidebar remained collapsed, showing only the icons of each link. But when we hover over the sidebar, it smoothly expands and reveals the respective logo’s link. This animation is done with pure CSS and HTML.

Steps To Create Glassmorphism Sidebar in HTML & CSS

To create a stylish Sidebar with a Glassmorphism effect using only HTML and CSS. Follow these simple, 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 sidebar logo and hero background image.

To start, add the following HTML codes to your index.html file to create your sidebar layout. These codes include the necessary Google icon links and other HTML elements like aside, div, ul, li, span, and a.




  
    
    
    Glassmorphism Sidebar HTML and CSS| CodingNepal
    
    
    
  
  
    
      
        
        CodingNepal
      
      
        Main Menu
        
          dashboard
          Dashboard
        
        
          show_chart
          Revenue
        
        
          flag
          Reports
        
        
        Advanced
        
          person
          Designer
        
        
          group
          Developer 
        
        
          ambient_screen
          Magic Build
        
        
          pacemaker
          Theme Maker
        
        
          monitoring
          Analytic
        
        
        Account
        
          bar_chart
          Overview
        
        
          mail
          Message
        
        
          settings
          Settings
        
        
          logout
          Logout

Next, add the following CSS codes to your style.css file to achieve a stylish and interactive glassmorphism design for our Sidebar. These codes include various styling properties like blur, color, background, background image, and more to create a transparent glass-like effect sidebar with a smooth hover animation.

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

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

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

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(17px);
    --webkit-backdrop-filter: blur(17px);
    border-right: 1px solid rgba(255, 255, 255, 0.7);
    transition: width 0.3s ease;
}

.sidebar:hover {
    width: 260px;
}

.sidebar .logo {
    color: #000;
    display: flex;
    align-items: center;
    padding: 25px 10px 15px;
}

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

.logo h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-left: 15px;
    display: none;
}

.sidebar:hover .logo h2 {
    display: block;
}

.sidebar .links {
    list-style: none;
    margin-top: 20px;
    overflow-y: auto;
    scrollbar-width: none;
    height: calc(100% - 140px);
}

.sidebar .links::-webkit-scrollbar {
    display: none;
}

.links li {
    display: flex;
    border-radius: 4px;
    align-items: center;
}

.links li:hover {
    cursor: pointer;
    background: #fff;
}

.links h4 {
    color: #222;
    font-weight: 500;
    display: none;
    margin-bottom: 10px;
}

.sidebar:hover .links h4 {
    display: block;
}

.links hr {
    margin: 10px 8px;
    border: 1px solid #4c4c4c;
}

.sidebar:hover .links hr {
    border-color: transparent;
}

.links li span {
    padding: 12px 10px;
}

.links li a {
    padding: 10px;
    color: #000;
    display: none;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.sidebar:hover .links li a {
    display: block;
}

.links .logout-link {
    margin-top: 20px;
}

Conclusions and Final Words

Congratulations! You have successfully created a Glassmorphism Sidebar using only HTML and CSS by following these simple steps. This exercise not only enhances your knowledge to create popular UI components but also helps you to apply the trending glassmorphism style to your designs.

Feel free to experiment and customize the code to make your sidebar even more beautiful and functional. To further improve your HTML and CSS skills, why not try recreating other sidebar menu designs available on this website?

If you encounter any problems while creating your Glassmorphism Sidebar, you can download the source code files for this sidebar 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 Glassmorphism Login Form in HTML and CSS

CodingNepal — Mon, 24 Jul 2023 08:30:58 +0000

You may have seen trendy Glassmorphism effects on login forms, cards, and various components on different websites. As a beginner web developer, have you ever thought about creating your own Login form with Glassmorphism effects?

If you’re unfamiliar, glassmorphism is a user interface design trend that creates the illusion of translucent and blurred glass surfaces. This effect gives the elements a semi-transparent look, making the background and foreground blend smoothly.

In this beginner-friendly blog post, I’ll guide you through the steps of creating a Glassmorphism Login Form in HTML and CSS only. Not only will you learn to create forms with a stunning glass-like effect, but you’ll also learn how to add an engaging floating-label animation.

Steps To Create Glassmorphism Login Form HTML & CSS

To create a Login Form with a glassmorphism effect and floating input label animation using HTML and CSS, follow these simple instructions step-by-step:

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

To start, add the following HTML codes to your index.html file. These codes include essential HTML elements such as forms, input, links, buttons, and others. For basic form validation, I’ve also included the “required” attribute for the input fields.





  
  
  Glassmorphism Login Form | CodingNepal
  


  
    
      Login
        
        
        Enter your email
      
      
        
        Enter your password
      
      
        
          
          Remember me
        
        Forgot password?
      
      
      
        Don't have an account? Register

Next, add the following CSS codes to your style.css file to style our login form, along with the glassmorphism effect and floating label animation. These lines of code include various CSS properties like blur, background, background image, etc. to achieve the desired Glassmorphism effect.

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 0 10px;
}

body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000;
  background-position: center;
  background-size: cover;
}

.wrapper {
  width: 400px;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

form {
  display: flex;
  flex-direction: column;
}

h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #fff;
}

.input-field {
  position: relative;
  border-bottom: 2px solid #ccc;
  margin: 15px 0;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  transition: 0.15s ease;
}

.input-field input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
}

.input-field input:focus~label,
.input-field input:valid~label {
  font-size: 0.8rem;
  top: 10px;
  transform: translateY(-120%);
}

.forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 35px 0;
  color: #fff;
}

#remember {
  accent-color: #fff;
}

.forget label {
  display: flex;
  align-items: center;
}

.forget label p {
  margin-left: 8px;
}

.wrapper a {
  color: #efefef;
  text-decoration: none;
}

.wrapper a:hover {
  text-decoration: underline;
}

button {
  background: #fff;
  color: #000;
  font-weight: 600;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}

button:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.register {
  text-align: center;
  margin-top: 30px;
  color: #fff;
}

Conclusion and Final Words

In conclusion, we explored step-by-step instructions on setting up your project folder, creating the HTML structure, and adding the CSS styles for the Glassmorphism effect and floating label animation. I believe that by following the steps in this post, you’ve successfully created your very own Glassmorphism Login Form.

Remember to experiment and customize your login form to add personal touches and make it even more beautiful. To continue improving your HTML and CSS skills, why not try recreating other login form designs available on this website?

If you encounter any problems while creating your Glassmorphism login form, you can download the source code files for this form project for free by clicking the Download button. You can also 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.

HTML and CSS – 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

How to Create Responsive Cards in HTML and CSS

Steps to Create Responsive Card in HTML and CSS

A "developer" codes software and websites.

A "designer" is a design expert.

An "editor" ensures content quality and accuracy.

Conclusion and final words

Create A Responsive Footer Section in HTML and CSS

Steps to Create Responsive Footer in HTML and CSS

Info

Explore

Legal

Newsletter

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

Create A Simple Pricing Card in HTML and CSS

Steps To Create Pricing Card in HTML and CSS

Unlock Exclusive Content

$29/month

Conclusion and Final words

How to Create Glassmorphism Sidebar in HTML and CSS

Steps To Create Glassmorphism Sidebar in HTML & CSS

Conclusions and Final Words

Create A Glassmorphism Login Form in HTML and CSS

Steps To Create Glassmorphism Login Form HTML & CSS

Login

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

Unlock Exclusive
Content