Search Results for “glassmorphism” – CodingNepal

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.

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

Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

CodingNepal — Sat, 03 Dec 2022 21:11:21 +0000

The most important section of both the website and the application is the Sidebar Menu. It simplifies the user navigation from one page to another. Although Sidebar Menus are an essential component of both the website and the application, we can create them using just basic HTML, CSS, and JavaScript.

In this blog, I have come up with the Top 13 Sidebar Menu Templates which are created in HTML CSS, and JavaScript. In each Sidebar Menu, I have added different functionalities and user interfaces. But the surprising thing is that absolute beginners could make that sidebar with simple HTML CSS and JavaScript skills. Recently I have provided 10 Navigation Bar, that blog will also be useful for you.

Basically, Sidebar Menus are Navigation Bar that gets transformed into Sidebar in small screen devices. But, these days we can see Side Navigation Menu Bar on large-screen devices as well.

Okay, let’s get into our Sidebar Menu list.

1. Simple Sidebar Template in HTML & CSS

This is the most simple Sidebar Menu in this list which is created in basic HTML and CSS code. However, I have added all the important components that a perfect Sidebar Menu should have.

This Sidebar can be your best choice if you’re a complete beginner and want to make a stunning sidebar using only HTML and CSS. For the source code and video instructions for this Sidebar Menu, click on the given link.

2. Simple Sidebar in HTML CSS & JavaScript

This is another simple Sidebar Menu that is created is HTML CSS and JavaScript. To open and close this Sibar I used some JavaScript code. In this Sidebar Menu, I have tried to add various types of navigation link and their icon. You can also use the checkbox to open and close it as like as I did above the sidebar.

If you are a complete beginner and want to create this Sidebar Bar then this Sidebar can be your best option. Even with your basic HTML CSS and JavaScript skills, you can create this Sidebar. For the source code and video tutorial for the Sidebar Menu, you can visit the given links.

3. Sidebar Menu with Tooltip in HTML CSS & JavaScript

This is the best Sidebar in this list which is created in HTML CSS and JavaScript. The fascinating part of this sidebar is that when you close the Sidebar Menu then the navigation icons will visible. Take a look at the image of this Sidebar Menu the left section is open and the right is a closed view of the sidebar.

This can be the finest choice for you if you’re seeking a sidebar menu with contemporary features like a tooltip and a search bar. Also, you can create this Sidebar Menu in simple HTML CSS and JavaScript code. For the source code and the video tutorial for this Sidebar Menu, do visit the given links.

4. Dropdown Sidebar Menu in HTML CSS & JavaScript

This is the improved version of the above Sidebar Menu. In this Sidebar Menu, I have added a dropdown facility. When you click on the dropdown arrow icon then its dropdown section appears and this sidebar menu is scrollable.

You should definitely try to make this Sidebar Menu because I have included all the features that a trendy Sidebar needs to have. For the source code and a video tutorial for this drop-down sidebar menu, click on the provided links.

5. Sidebar Menu with Dark Light Mode in HTML CSS & JS

This is the unique Sidebar Menu in this list. The main feature of this Sidebar Menu is its dark and light mode. Also, I have added a search box and toggle button on this trendy Sidebar Menu. There is a dark and light mode toggle section at the bottom, by clicking on that toggle button you can turn on or off the dark light mode.

If you are seeking a trendy Sidebar Menu with the dark and light mode feature then this Sidebar Menu can fulfill your demand. Additionally, you can create this trendy Sidebar with basic HTML CSS & JavaScript code. For the source code and video tutorial for this Sidebar Menu, you can visit the given links.

6. Glassmorphism Sidebar Menu in HTML and CSS

This sidebar is made in Glassmorphism UI with HTML/CSS, featuring a button in the top left corner. When clicked, it slides in a bar from the left, revealing navigation links with icons. Hovering over links triggers an attractive box-shadow effect, and social media icons at the bottom have hover effects.

If you are looking for a glass morphism sidebar menu template that is created in HTML and CSS, this sidebar menu could fulfill your requirements. By clicking the given button, you can access the source code and video tutorial.

7. Neumorphism Sidebar Menu in HTML and CSS

This is the Neumorphism UI-based sidebar menu created using HTML and CSS. At first, there is a single button positioned at the top left corner. Upon clicking this button, a sidebar smoothly slides in from the left side to the right side, animatedly revealing its content. When you hover over the hyperlinks within the sidebar, they appear as if they have been pressed or activated.

If you are in search of a neumorphism side navigation menu bar, this sidebar template could match your desire. Clicking the provided button will give you access to the source code and a video tutorial for implementation.

9. Sidebar Menu with Social Media Buttons HTML CSS

The sidebar menu, built using HTML and CSS, includes social media buttons such as Facebook, Twitter, Github, and YouTube. Initially, the sidebar is hidden on the left side of the screen. To activate or deactivate the sidebar, simply click on a hamburger button.

If you’re in search of a sidebar menu template with social media buttons such as Facebook, Twitter, GitHub, and YouTube, then this template could be the solution you’re looking for. Below, you’ll find buttons to access the source code and video tutorial for implementing this sidebar menu.

10. Sidebar Menu with Active Link in HTML CSS

The sidebar menu includes an active link feature, where each link becomes highlighted with box shadows and a different color upon being clicked. Moreover, this sidebar menu is responsive and adapts to small-screen devices. The menu was created using HTML and CSS.

If you’re looking for a responsive and animated sidebar menu with an active link feature, this sidebar template is designed to fulfill your requirements. By clicking the provided link, you can access the source code and a video tutorial for implementation.

11. Sidebar Menu with Submenu in HTML CSS JS

This visually appealing website is built using HTML, CSS, and Javascript and includes a submenu feature. By clicking on a link, you can access the submenu.

If you’re in search of a sidebar menu with a submenu feature, this sidebar template is a suitable choice that meets your requirements. To access the source code and video tutorial, you can visit the provided links.

12. Website with Sidebar menu in HTML CSS JQuery

This template offers a website landing page with a sidebar menu that allows you to navigate to specific sections by clicking on each navigation link. To create this website with a sidebar menu, HTML, CSS, and jQuery.

If you’re searching for a website landing page featuring a sidebar, this template can fulfill your needs. You can check the provided links for access to the source code and a video tutorial on implementing this sidebar menu.

13. Sidebar Menu with Sliding Submenu in HTML CSS

This sidebar menu incorporates a sliding submenu feature implemented using HTML, CSS, and JavaScript. Within the sidebar, there are two types of navigation options: one that redirects to another page and another that opens a submenu. When the submenu is triggered, it smoothly appears with a sliding animation, while the clicked link slides to the left and becomes hidden.

If you’re looking for a sidebar menu with a modern design, including a submenu feature and appealing animations, this template is an excellent choice. By clicking the provided links, you can access video tutorials and source code files for implementation.

14. Dropdown Hoverable Sidebar Menu in HTML

In this Sidebar Menu Template, you will learn how to create a responsive side navigation bar with submenus using HTML, CSS, and JavaScript. This sidebar includes many features like submenus, a dark or light theme mode, and other things that ensure a visually appealing and customizable user experience. Also, you can activate the hoverable feature on this sidebar in this mode you could open and close the sidebar on mouse hover.

If you are in search of a sidebar menu with a hoverable feature, built using HTML, CSS, and JavaScript, then this Side Navigation Menu might be suitable for your needs. Below, you can find the source code for implementing this sidebar menu.

15. Hoverable Sidebar Menu in HTML

This hoverable sidebar is designed using HTML, CSS, and JavaScript. When in a closed state, the menus take up minimal space on a webpage, appearing as small icons. However, upon hovering over them, they expand, unveiling their full content.

If you are seeking the Side Navigation Bar that expands and collapses on hover with the responsive feature on small devices then this sidebar menu template could match your needs. For the source code and video tutorial of this hoverable sidebar menu check out the given links.

Conclusion

I hope you enjoyed this blog post showcasing 13 Sidebar Menu Templates. If you are looking for more inspiration, be sure to check out this website for a variety of other Sidebar Templates.

If you’re just starting your journey in web development, I recommend checking out our post on the Top 25 Beginner-Friendly Login Form Templates in HTML, CSS, and JavaScript. These designs are tailored to newcomers, helping you improve your skills while creating stunning Forms.

Feel free to share this blog with fellow enthusiasts. Thank you for visiting!

25+ Free Login & Registration Form Templates in HTML & CSS

CodingNepal — Tue, 22 Nov 2022 21:11:21 +0000

Login and registration forms play a vital role in the functionality of any website or application. They enable users to create accounts and gain access to the various features offered by the site. While there are numerous approaches to designing these forms, some designs stand out for their creativity and user engagement.

In case you’re unfamiliar, a login form refers to the section on a website or app where users input their login credentials (username and password) to access protected content. On the other hand, a registration form is an area where users are prompted to provide their personal information and details to create a new account.

In this blog post, I will showcase 25+ creative login and registration form designs created using HTML, CSS, and JavaScript. These forms will inspire you to create your own unique and stylish logins. Each form in the list includes a video tutorial and source codes that you can use for free.

So, without further delay, let’s dive into the list of login and registration form designs.

1. Simple Login Form with Icons in HTML

This is the most simple and perfect Login Form Design that I have created in HTML and CSS. As you can see in the given preview of this login form there is a title, some input fields for email or phone number and password with icons, a forget password and Signup link, and a button.

To boost your skills in HTML and CSS this Login Form could be really helpful for you. For the video tutorial and all the HTML and CSS source code for this Login Form, you can visit the given link.

2. Simple Registration Form in HTML

I would highly recommend you learn to create this Registration Form which I have created in HTML and CSS. As you can see on the Registration Form I have added Input Fields which are for entering the name, email, password, and confirm password. Also, there is a checkbox to check and uncheck to accept terms and conditions and a button.

This Registration Form will definitely help to boost your skills in HTML and CSS. You should try to create this Registration Form. To create this Registration Form, I have used basic HTML and CSS code and I believe you can easily create this Signup Form. For the Video tutorial and source code for this Registration Form, you can visit the given link.

3. Login Form with Floating Label Animation

I have created this Login Form using HTML and CSS. In this Login Form, I have added some extra features like the input field’s label-up animation while you focus on it, remember me checkbox, and of course the UI design.

This Login From is also created using basic HTML and CSS code so should definitely try to learn to create this beautiful Login Form. While creating this Login you will learn to give gradient colors on the Login Form and animation also. The video tutorial link and the source code link for this Login From are given below.

4. Responsive Registration Form in HTML

As you can see on this Registration Form I have added many input fields to input different details like name, email, username, password, and many more. I have also added a radio button to choose gender and a button.

If you want to create a perfect Responsive Registration Form in HTML and CSS then it could be best for you. By creating this Registration Form, you will learn to use CSS flexbox, create your own radio buttons, and make Registration Responsive. The video tutorial and Source code links for this Responsive Registration Form are given below.

5. Login Form with Social Media Login Option

As you can see in the image of the Login Form. There are two types of login option user can get, one is they can log in by using email and password and with Twitter or Facebook. We can easily find this type of login option in the modern Login Form.

If you want to create a modern Login Form Design with Twitter and Facebook Login options in HTML and CSS, then this project could be suitable for you. For the video tutorial and source code for this Login Form, you can visit the given link.

6. Responsive Login and Registration Form

This is the most important Form Design that every web designer and application designer should learn. This is mostly used on every website and application. I have created this Login and Registration switchable Login and Registration Form in HTML and CSS.

This type of combined form is used, for example, if the user already has login details then they can use that login form, and if the user is now then they can click on the SignUp link and get registered. The source code and video code link for this Login & Registration Form links are provided below.

7. Responsive Flip Effect Login and Registration Form

This Login and Registration Form is created in HTML and CSS. The main feature of this Login and Sign Up form is its flippable feature. Let me be clear, the left image you can see on this Login and Registration Form is the flip on the right side and left side.

If you click on the SignUp now link, then the image field left side and the Registration Form appear obviously Login Form section gets disappears. Similarly, on the Registration Form also. If you are looking for the video tutorial and source code for this Login and Registration Form then links are given below.

8. Responsive Multi Pages Registration Form in HTML

This is the multipage form that you will learn to create. To create this Multi-pages Registration Form is created from HTML CSS and JavaScipt. As you can see on the image of this Registration Form there are lots of input fields with a button at the bottom. To go to the next page you have to fill in all the input fields.

After you fill in all the details in the required input fields and click on the next button another Registration Page appears and a submit and the back button also. Visit the following links for the video tutorial and HTML CSS and JavaScript code for this Multi-pages Registration Form.

9 . Multi-Step Registration Form with Progress Bar

This is the advanced version of the Registration Form with having best user interface and experience. The world’s number one company Google has also this type of multi-step registration feature which we can see while creating our google account.

In this Registration Form, you have to fill in only two input fields at a time and click on the next button for further. You can easily create this Multi-Step Registration using some HTML CSS and JavaScript code. For the video tutorial and Source code for this Registration Form, you may visit the given links

10. Login & Registration Form in HTML CSS

This is the best Login and Signup Form I have ever created in HTML CSS and JavaScript. As you can see on this Login and Registration Form, it has all the features that a Login and Signup Form should have such as login and signup option through social media like Facebook and Google, password show and hides feature, and many more.

You must try to create this Login and Signup Form in HTML CSS and JavaScript. This Login and Registration Form will help you to boost your skills in UI/Ux design and of course in HTML CSS and JavaScript. You can get video tutorials and source code links for this Login and Signup Form below.

11. Popup Login Form in HTML and CSS

This is the most unique Login Form Design on the list. The feature that makes this Login Form different is its popup animation. Basically, at first, you will have a button, when you click on the button this Login Form will appear. To close the Login Form you have to click on the close icon which is situated in the top right corner.

To create this Login Form I have used HTML and CSS. So even if you are a beginner at HTML and CSS then also you can create this Popup Login Form. Links for the Video tutorial and source code to this Popup Login Form, you can without below.

12. Login Form with Glowing Border Animation

This Login From could be best for gaming websites because of its gaming vibes color combination and animation. While you focus on the input field or start typing each input field’s border starts glowing smoothly.

If you are looking for an animated Login Form with simple HTML and CSS code then this Login Form could fulfill your desire. To get the video tutorial and source code file for this animated Login Form, you can visit the given links

13. Neumorphism Login Form in HTML CSS

This Login Form is Fully Based on neumorphism UI. As you can see in the given image all the section form has different and interesting color and shadows. If you are looking for a Login Form with a neumorphims user interface then you should try this Login Form.

This Login From is created in HTML and CSS without any bootstrap code because I prefer to create designs in Pure CSS. If you have liked this neumorphism Login Form then the video tutorial and source code links are available below.

14. Glassmorphism Login Form in HTML CSS

If you are looking for glassmorphism Login Form then here it is. This is the simple Login Form with the glass user interface which you have seen in the image. To create this Login Form I have used HTML CSS & JavaScript. It also has a password show and hides feature.

This is the beginner-friendly Login Form that can help to boost your skills in HTML CSS & JavaScript. Also, from this form, you will learn to create a glass effect. The video tutorial and source code link for this glassmorphism Login Form is given below.

15. Login Form Validation with Shake Effect

This is the best Login Form in the list with having feature of Email Address and Password Validation. If you enter an invalid email or password then those input fields shake with the red error message.

I would highly recommend you try to create this Login Form if you are learning HTML CSS and JavaScript. You can easily create this Login From with your basic HTML CSS & JavaScript knowledge.

For the source code and video tutorial link for this Login Form with Validation Feature, check below.

16. Form with Email & Password Validation in JS

This is the best Registration form in the list that I have created in HTML CSS and JavaScript. The unique feature of this Registration From is that it can validate your email, and password and also confirm whether that created passwords are matched or not. It has also a password show and hides feature.

If you want to create a Registration Form in HTML CSS and JavaScript and have basic on it then also this Registration Form could be best for you. Do visit the given links for the video tutorial and source code of this Registration Form.

17. School Registration Form in HTML and CSS

This registration form was created using HTML and CSS and consists of a single page. The form includes multiple fields such as name, address, email, phone number, gender, date of birth, and various others, which are displayed as input boxes.

If you are new to front-end development and wish to build a school registration form using HTML and CSS, this registration form template would be highly suitable for you. You can access the source code and live demo of this form by clicking the provided buttons.

18. Animated Login Registration Form in HTML CSS

This is a login and registration form template created using HTML, CSS, and JavaScript. The initial page that appears is a login form containing input fields. Clicking the signup button grants users access to the registration page.

If you are seeking a login and registration form with a modern UI and UX design, this form template might fulfill your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

19. Login Form with Facebook and Twitter Buttons

This login form design is considered one of the best, as it provides the convenience of Facebook and Twitter login options for users. The form is created using HTML and CSS, ensuring a visually appealing design.

If you require a login form that includes options like Facebook or Twitter login, this form template could be suitable for your needs. By clicking the provided buttons, you can access the source code and live demo of this form.

20. Website with Login Registration Form in HTML CSS

This template offers a website that features both a login and registration form. The website includes a navigation bar with various navigation links. To display the login form, there is a dedicated button, and to access the registration form, users need to click on the signup button within the login form. The entire design has been created using HTML and CSS.

If you are looking for a website that includes a login and registration form, this template is designed to meet your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

21. Login and Signup Form with Sliding Animation

This login and signup form is made using HTML, CSS, and JavaScript. The login form has email and password input fields, whereas the signup form has three input fields: email, password, and confirm password. Users can access the signup form by clicking on the signup tab. There is a sliding animation when switching from login to signup or signup to login.

If you are searching for a login and signup form with sliding animation, this form template created using HTML, CSS, and JavaScript, might fulfill your requirements. By clicking the provided buttons, you can access the source code and live demo of this form.

22. Gradient Background Login Form HTML and CSS

This attractive gradient login form is designed using HTML and CSS. Its main feature is the inclusion of Facebook and Google login buttons, which provide multiple login options for the user. The gradient background makes the login form more visually appealing.

If you are in search of a visually appealing login form that offers Facebook and Google login options, then this login form template is exactly what you need. By simply clicking the provided buttons, you can conveniently access the source code and live demo of this form.

23. Login Form with Icons in HTML and CSS

This login form template built using HTML and CSS is considered one of the simple but useful form design. Its unique feature of a toggle option for showing and hiding information adds to its appeal and interest.

If you are looking for a login form template that includes a feature to show and hide passwords, then this particular template could fulfill your requirements. By clicking the provided buttons, you can easily access the source code and live demo of this form.

24. Simple Login Form with Floating Label Animation

This login form is built using HTML and CSS. Additionally, it features an input label animation that moves up when the input field is in focus. In short, you can say this form has floating label animation.

If you are in search of a login form template with floating label animation then this form can meet your requirements. By clicking the buttons provided, you can easily access the source code and live demo of this form.

25. Login Form Validation in HTML CSS & JavaScript

This simple login form is created using HTML, CSS, and JavaScript, and its key feature is the validation of the email and password entered by the user. If the user’s entered email or password does not match the validation criteria, then a custom error message will be shown.

If you are looking for a simple login form that validates the email and password entered by the user, then this login form could be the right match for your needs. By clicking the provided buttons, you can conveniently access the source code and live demo of this form.

26. Signup Form with Validation Feature in HTML

This form uses HTML, CSS, and JavaScript to provide seamless validation and password visibility toggle functionalities. When users attempt to submit the form with invalid or incomplete data, informative error messages appear below the respective fields, guiding them toward accurate inputs.

Whether you’re a newbie web developer seeking to learn or in need of a reliable signup form for various purposes, this form is an ideal choice. Its user-friendly design and validation features make it a valuable asset for your projects.

Watch Video Tutorial
Download Source Code

Conclusion and Final Words

I hope you enjoyed this blog post showcasing 25+ creative login and registration forms. If you are looking for more inspiration, be sure to check out this website for a variety of other form templates.

If you’re just starting your journey in web development, I recommend checking out our post on the Top 12 Beginner-Friendly Website Templates in HTML, CSS, and JavaScript. These designs are tailored to newcomers, helping you improve your skills while creating stunning websites.

Feel free to share this blog with fellow enthusiasts. Thank you for visiting!

HTML CSS & JavaScript Projects with Source Code | Top 20 JavaScript Projects

CodingNepal — Wed, 21 Sep 2022 21:11:20 +0000

We all know JavaScript is the most loved and used programming language in the world. Many programmers prefer to use the JavaScript programming language to create projects for clients and themselves. Though JavaScript is the most popular language even then it is very simple to do code, if you try to make the project at the beginner level.

Today in this blog, I have brought some best and most useful projects that I have created using HTML CSS, and JavaScript projects. In these projects, I have created a digital clock, a valid email checker, a dynamic calculator, an email and password validation website color switcher, and many more.

There are lots of other HTML CSS and JavaScript projects that I have already created and posted that you can find on this website, I have picked some of them that would help you to boost your knowledge and skills.

As you have seen in the image of our HTML CSS & JavaScript Projects, you are going to learn to make those projects. and all the projects are made by using pure HTML CSS and JavaScript, I have not used any frameworks. I have provided each project’s video tutorial and source code at every project’s bottom.

1. Increament & Decreament on click

This is a useful project that you will learn, we can see this type of section on the main e-commerce website while we are going to place our product order. Basically, when we click on the plus button the number will increase and when we click on the minus button the number will decrease. The number will not decreaseless by 1.

This is the most beginner-friendly project on this list. So, don’t forget to create it if you’re an absolute beginner. I suppose you liked this project [Increament & Decrement on click]. The source code of this dynamic digital clock and video tutorial links are given below.

2. Button Loading Animation in HTML CSS & JavaScript

In this video tutorial, you will learn to create a button with loading animation using HTML, CSS, and JavaScript. At first, on the screen, there will be the first button that you can see on the image. When you click on the button, a loading animation happens, and after a while, the button appears.

This is a beginner-based project and the most useful project for applications and web pages. I hope you will love creating this project. All the HTML, CSS, and JavaScript code and video tutorials for this Button Loading with Animation are given below.

3. Typing Text Animation in HTML CSS & JavaScript

In this project, the text will be automatically typed like a typewriter and will change too. Basically, the front text remains constant but the blue text animates. This type of text animation, or typewriter text animation, provides an attractive video on the webpage.

To make its UI design I used HTML and CSS, and to change the text change I used some JavaScript code. I hope you will try to build this project [Typing Text Animation]. All the HTML CSS and JavaScript code and video tutorials of this project links are given below.

4. Circular Progress Bar in HTML CSS & JavaScript

In this project, the circle’s stroke and the number of the percentage animate from 0 to a given value. To make this project [Circular Progress Bar], I have used pure HTML, CSS, and JavaScript code. There are lots of circular progress bars you can find on the internet, and I have used SVG code.

By building this project, you will learn to create different types of progress bars and loading animations. I suppose that you have liked this project [Circular Progress Bar]. All the HTML, CSS, and JavaScript code and video tutorial links for this project are given below.

5. Draggable Navigation Menu in HTML CSS & JavaScript

In this project, you will learn to create navigation action menus and draggable features. When you click on the plus icon at the top of the screen, five navigation buttons will appear with beautiful animation and align in a half-circular shape. You can also make it a full circular shape by adding navigation buttons. You can drag this navigation action menu vertically.

This Draggable Navigation Menu is made using HTML, CSS, and JavaScript. I hope you will be delighted to take on this project. All the HTML, CSS, and JavaScript code and video tutorial links for this project are given below.

6. Product Card in HTML CSS & JavaScript

In this project, you will learn to make a project card with a color switcher feature by using HTML CSS, and JavaScript. Basically, when you click on those color tabs the shoe color will change. To make this product’s card UI design I have used HTML and CSS, To change the shoes I have used some JavaScript code.

This is a very very important and useful project you need to learn. We can find this type of product card on the e-commerce website. All the HTML CSS and JavaScript code and video tutorials of this project links are given below.

7. Password Show in Hide in HTML CSSS & JavaScript

In this project [Password Show in Hide], you will learn to show and hide the password while clicking on the eye icon. Basically, at first, there will be a password in hidden status and when you click on that eye icon the password will be visible with changing, icon. Also, I have added some animation to the input field.

This is a useful project you have to learn. We can see this type of feature in the login and sign of form. I hope you will try to create this project. All the HTML CSS and JavaScript code and video tutorials of this project links are given below.

8. Image Gallery with Searchbox in HTML CSS & JavaScript

In this project [Image Gallery with Searchbox], you will learn to make an image gallery and a filterable search box. Basically, there are lots of images of movies with a beautiful search box. When you type the movie name in the search box and press enter, the related movie’s name will appear on the screen. For example, when you type “spiderman” and enter it, then the top image related to “spiderman” will appear and the others will disappear.

To make this project [Image Gallery with Searchbox] UI design, I have used vanilla HTML and CSS, and to filter the image that we type, I have used some JavaScript code.

9. Custom Select Menu in HTML CSS & JavaScript

In this project, you will learn to Custom Dropdown Select Menu in HTML CSS, and JavaScript. Basically, at the first, there will be a button only, when you click on that button drop box will appear with different social media lists and the selected list will appear inside the button.

To create this project [Custom Select Menu] UI design, I have used HTML and CSS and to show the selected option inside the button I have used some javascript code. I believe you liked this project [Custom Select Menu], For the source code and video tutorial, you can visit the given links.

10. Password Strength Checker in HTML CSS & JavaScript

In this project, you are going to learn to make a Password Strength Checker in HTML CSS, and JavaScript. Basically here, while you type the password character, it will show how strong your password is.

When you enter a weak password like only an alphabet character then it will password is weak, similarly when you enter alphabet and number then it will show password is medium and at last when you enter alphabet character numbers and special characters like #,@,+ then it will show password is strong. Also, the input’s border color will change according to the strength of the password.

This is the most useful project [Password Strength Checker] you must learn. We can find this type of feature while we are going to create passwords in the registration process on the internet. I hope you will try to build this project and I believe it will boost your knowledge. I have provided the video tutorial and source code link below.

11. Valid Email Checker in HTML CSS & JavaScript

In this project [Valid Email Checker], you will learn to validate the email addresses by using HTML CSS, and JavaScript. Bascially in this project, I have created an input field and button. When filling invalid email address and clicking on the check button then it will show an invalid email message at the bottom of the input field, similarly, if you enter a valid email address and click on the check button then it will show email is valid.

If you click on the check button without typing any character then it will show input field can not be blank. The input field color also changes according to the error and success message. This is on the important project [Valid Email Checker] you have to learn. This type of feature is mostly used in forms. I suppose you will try to build this project. Source code link and video
The tutorial for this project is given below.

12. Accordion Menu in HTML CSS & JavaScript

Here you will learn to create an Accordion Menu in HTML CSS and JavaScript. According to this project, I have created an Accordion menu with some question and-answer sections. At first, all the tabs will be in closed condition and only questions are visible.

When you click on the plus icon or in any area of the question tab then that tab opens and the answer will visible. When clicking on the second tab the first opened tab will close automatically and clicked tab will open. You can also open and close the tab by clicking on it.

This is also an important project [Accordion Menu] you should learn. We can see this type of section on various types of websites for example you can find this type of accordion menu on google too. I hope this project helps you to boost your knowledge of HTML CSS and JavaScript. The video tutorial and source code link are given below.

13. Toast Notification in HTML CSS & JavaScript

In this project, you will learn to create a Tost Notification in HTML CSS, and JavaScript. Bascially according to this project [Animated Toast Notification]. At first, there will be a button on the screen, when you click on the button a toast bar appears from the right top side of the screen with a small progressing bar that is decreasing.

When that progressing bar decreased completely the toast bar automatically disappeared. You can also close that toast bar by clicking on the cross icon that is available on the tab.

This is also an important and useful project [Animated Toast Notification] that you need to learn. This type of project is used while showing the notification that the user has done. I hope you are interested in this project and would try to boost your HTML CSS and JavaScript knowledge by creating it. The video tutorial and source code link are provided below.

14. Multiple Options Select Menu in HTML CSS & JavaScript

In this project [Multiple Options Select Menu], you will learn to build a Multiple Options Select Menu in HTML CSS, and JavaScript. According to this project, there will be a button on the screen while you click on that button some lists with checkboxes will appear. When you click on that list the check box will be checked the selected number of the list will appear on the button tab.

I would say it is also interesting to project [Multiple Options Select Menu] for you to develop your HTML CSS and JavaScript skills. You can find this type of section on the internet while you have to select more than one option.

15. Validate Email in HTML CSS & JavaScript

Yeah, I know, you have done the same topic project before, but I have added lots of features that make this project different and interesting. At the same time, while you start to enter an email address, it starts to show a message that the email is valid or not, and at the same time, the email icon that you can see on the right side also changes. When you type the correct or valid email, the email icon changes to a tick icon.

I would love to say that it will be a very interesting project for you to increase your HTML, CSS, and JavaScrip knowledge. I suppose you will definitely try to build this project [How to Verify an Email]
Links to video tutorials and source code files are provided below.

16. Website Coming Soon Page in HTML CSS & JavaScript

Another useful project that everyone should learn to make is this. You will learn how to create a website coming soon page section and an animated time using HTML, CSS, and JavaScript in this project. For this project, there will be a background image, some text animated in real-time, and an email field section. The time will be decreased by every second. I have added days, hours, minutes, and seconds here.

This type of page can be seen while some websites are being built. You should definitely learn to make this project [Website Coming Soon Page]. I hope you will try to make this project. Here you will learn to create an email field section. Source code links and video tutorial links are provided below. Just go and boost your HTML, CSS, and JavaScript limitations.

17. Password Confirmation Checker

In this project [Password Confirmation Checker], you will learn to make a Password Confirmation Checker and show how to hide passwords by using HTML, CSS, and JavaScript. Basically, according to this

If you enter the same password in both input fields, it will show that the password is matched. If you enter a different-different password character in those input fields, it will show that the password did not match. Also, I have added a password showing and hiding feature while you click on that eye icon. The eye icon also changes according to the password visibility.

This type of section and feature can be found while you are going to create a password. I would highly recommend you learn to create this project [Password Confirmation Checker]. I hope this project also helps to boost your HTML, CSS, and JavaScript skills. For the video tutorial and source code file, you can click the given links.

18. Website Color Switcher in HTML CSS & JavaScript

In this project [Website Color Switcher], you will learn to create a Website with a Color Switcher Feature using HTML, CSS, and JavaScript. Basically, in this project, there is a navigation bar, and some text and color switcher sections, and I also have a dark-light mode feature. When you click on the moon button that is available on the navigation menu bar, the whole page changes into dark mode and the sun icon appears. Similarly, when you click on that sun icon, the whole page turns into light mode.

Next to the dark-light mode button is a color switcher icon. When you click on that color switch button, a color section bar appears. There are lots of color options we will find and the active color will be highlighted. When we click on the other color, then the navigation bar’s background color, text, and other colors will change to the same as the clicked color.

You should definitely try to build this project [Website Color Switcher]. By creating this project, you will learn to make dark-light mode and color switcher features on the website. Obviously, it will help to increase HTML, CSS, and JavaScript knowledge to some level. For the video tutorial and source code, you can visit the given link.

19. Digital Clock in HTML CSS & JavaScript

In this project, I have created a Digital Clock using HTML CSS, and JavaScript. I have also added a dark and light mode feature to it. This is the 12 hours time clock, I mean the time will not increase than 12. The time will automatically update according to your computer time.

I hope you liked this project [Dynamic Digital Clock]. This is the most beginner-friendly project on this list. So, don’t forget to create it if you’re an absolute beginner. The source code of this dynamic digital clock and video tutorial links are given below.

20. Stopwatch in HTML CSS & JavaScript.

In this project [Animated Stopwatch], you will learn to build a working stopwatch in HTML, CSS, and JavaScript. According to this project, there are segment hours, minutes, seconds, and milliseconds. When you click on the start button, the milliseconds start to increase, then seconds, minutes, and hours. To stop the stopwatch, you can click on the stop button, and to reset the stopwatch, you have to click on the reset button.

This type of stopwatch you can easily find on mobiles and tablets. I just want to say this is the most useful and interesting thing you are going to create, and I highly recommend you try this project [Stopwatch] to boost your knowledge of HTML, CSS, and JavaScript. For the video tutorial and source code, you can visit the given link.

21. Calculator in HTML CSS & JavaScript

In this project, you will learn to create a calculator using HTML, CSS, and JavaScript. With this calculator, you can add, subtract, or divide anything that needs to be available in the calculator. I have also added an animated background that you get to see in the video tutorial.

The calculator is becoming an increasingly important and daily-used item in our daily life. You should definitely try to build this calculator. This project will help you improve your knowledge of HTML, CSS, and JavaScript.

22. Email & Password Validation in HTML CSS & JavaScript

In this project [Email & Password Validation], you will not only learn to validate email and passwords but also create a registration form. You can say this is the complete front-end project of the signup form. This project will validate your email address, the strength of the password, and whether it is matched or not. I have also added a password show and hide feature while you click on the eye icon.

I would highly recommend you try to build this project [Email & Password Validation]. With this project, you will learn various things that are needed for a registration form and a login form. I believe you will definitely try to make this project. Video tutorial links and source code file links are provided below.

In a nutshell,

Rather than copying and pasting the source code, I would highly recommend you watch the video tutorial and follow it step by step, by doing this you will get an idea of how all the HTML CSS, and JavaScript code work behind each project and also the way of creating projects from beginning to end.

It would be wonderful if you comment on the project name that you are going to build and if you want other projects related to HTML CSS and JavaScript, you can find it on this website. And, there are lots of other project video tutorials available on My YouTube Channel you can subscribe to them.

Glassmorphism Website Design in HTML and CSS

CodingNepal — Mon, 31 Jan 2022 21:09:36 +0000

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

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

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

What is Glassmorphism?

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

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

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

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

Glassmorphism Website Design in HTML and CSS | Video Tutorial

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

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

Glassmorphism Website Design | Source Code

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

How To Create Gassmorphism Website in HTML?

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




  
    
     Glassmorphism Website | CodingLab 
    
    
     
   

  
    
      LOGO>
      
        Home
        Latest
        Offers
        Services
        Contact
      
      
        
        
      
    
    
      Learn To Enjoy,
Every Moment Of Your Life
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum facere in nam, officiis aspernatur consectetur aliquid sequi possimus et. Sint.
    
    
      Play Video

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

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

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

Video Gallery Lightbox in HTML CSS and JavaScript

CodingNepal — Tue, 17 Aug 2021 21:11:18 +0000

Hello readers, today in this blog we are going to create a Video Gallery Lightbox in HTML CSS and JavaScript, I have made lots of JavaScript Projects up to date and as usual, we make something useful and interesting projects.

Simply, we can understand the video lightbox is the animation or features where video pops up on the window on the user’s click.

Have a look at the image of our program(Video Gallery Lightbox in HTML CSS and JavaScript), the image you can see is the real example of a video lightbox. Actually, in the background of this lightbox, there are some other videos that we can play. Those videos are in the backside can be popped and can be played.

If you want to see the real demo of this Video Gallery Lightbox then you have to watch the video tutorial that I have given below, and one thing, after watching the following video tutorial you will get all the ideas of the code that I have used to create this video lightbox.

Video Gallery Lightbox in HTML CSS and JavaScript

You will get all the source code file that I have used to create this video gallery lightbox, but before jumping on the source code I have to point out some important topic from this video tutorial.

As you have seen on the video tutorial of this video gallery lightbox, at first there is some video on the screen and when we clicked on every video its popped out and started playing to make video autoplay and controls I have used HTML property of video tag and to change the video source and pops out the video I have used some JavaScript codes.

I believe, now you can make this responsive video gallery lightbox easily. For those friends who are feeling difficulty creating this video gallery lightbox, don’t worry, I have given all the source code of this program (Video Gallery Lightbox in HTML CSS and JavaScript).

Responsive Drop Down Menu with Sub Menu in HTML & CSS | Free Source Code

CodingNepal — Mon, 24 May 2021 21:11:18 +0000

How to create a dropdown navigation bar in HTML CSS?

A: To create a responsive drop-down navigation bar with a submenu, I have provided essential codes article and video tutorial below:

Hello readers, today we will learn How to Create a Responsive Drop Down Menu with Sub Menu in HTML & CSS and a little touch of JavaScript. Earlier, I have created various blogs of Responsive Navigation Bar using HTML and CSS, but I haven’t built any drop-down navigation menu bar.

What is Drop-Down Menu?

Simply, Drop down menu means that features on the navigation bar from the sub-menu come out while clicking or by doing hover on the parent navigation links. Submenu helps to reduce space on the navigation bar that makes it easier for users to explore the things that they want from the website.

How many links should be in your main navigation and sub-menu?

You can add nav links on your main navigation menu and sub-menu as need of your website and it also depends on the width of the navigation menu bar. Normally you can add 5 to 7 nav links on the main navigation bar and 3 to 5 on the drop-down sub-menu.

What is the element you have included on the drop-down navigation bar?

As you can see on the given image of the drop-down navigation menu with sub-menu. Basically, you can add the following elements that I have added to my drop-down menu. You can add the following elements to the navigation menu.

Your Logo
Navigation Links (5 to 7) normally
Sub-menu Links (3 to 5) normally
Social Media Icons.
Sidebar Open/Close Button (Responsive)

How do I create a dropdown navigation menu with a submenu?

There are various ways to create a drop-down navigation menu. I think the following are the best and easy ways:

In HTML:

Make

tag as a parents for the main navigation links.

Inside the

tag add

tag like this

Home

Now for submenu add

tag again inside the

like this:

Home
- Sub Menu

In CSS:

ul li{position: relative}; (to main parent li tag)
ul li ul{position: absolute
top: 0;
left: 100%;
display: none};

make it visible when we hover on the parent element by giving display: block

For getting the virtual example of this responsive drop-down navigation menu with submenu and codes that I have used to build this type of navbar with submenu, I recommend you to watch the following video tutorial.

Drop Down Navigation Menu with Sub Menu | Video Tutorial

I hope, you like my navigation menu design. To create this navigation menu with the feature of drop-down sub-menu, I have used HTML5 CSS3 and a little touch of JavaScript. This is a fully responsive design. Responsive means this navigation can fit in any screen sizes devices like on big sizes computer, laptop, tablet or mobiles.

Those friends, who are feeling difficulty building responsive navbar menu with sub-menu. I have provided all source codes of the responsive drop-down menu with the sub-menu below. Rather you can copy the following coded or you can also download all files by clicking on the given download button.

Drop Down Menu with Sub Menu | Source Code

Top copy-paste the following HTML CSS and JavaScript codes you need to create two files, one is HTML file and another is CSS files on your computer you can also download files directly by clicking on the given download button.

How do you create a dropdown in HTML?

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




  
    
    Responsive Drop Down Navigation Menu | CodingLab 
    
    
    
     
   

  
    
      
      CodingLab
      
        
          CodingLab
          
        
        
          HOME
          
            HTML & CSS
            
            
              Web Design
              Login Forms
              Card Design
              
                More
                
              
                
                  Neumorphism
                  Pre-loader
                  Glassmorphism
                
              
            
          
          
            JAVASCRIPT
            
            
              Dynamic Clock
              Form Validation
              Card Slider
              Complete Website
            
          
          ABOUT US
          CONTACT US

Create a CSS file with the name style.css on your computer and copy-paste the following CSS codes on your CSS document.

/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 70px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
}
nav .navbar{
  height: 100%;
  max-width: 1250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  /* background: red; */
  padding: 0 50px;
}
.navbar .logo a{
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
nav .navbar .nav-links{
  line-height: 70px;
  height: 100%;
}
nav .navbar .links{
  display: flex;
}
nav .navbar .links li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
nav .navbar .links li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(180deg);
  }

nav .navbar .links li .arrow{
  /* background: red; */
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #fff;
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu{
  display: block;
}
.navbar .links li .sub-menu li{
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.navbar .links li .sub-menu .more-arrow{
  line-height: 40px;
}
.navbar .links li .htmlCss-more-sub-menu{
  /* line-height: 40px; */
}
.navbar .links li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.links li .sub-menu .more:hover .more-sub-menu{
  display: block;
}
.navbar .search-box{
  position: relative;
   height: 40px;
  width: 40px;
}
.navbar .search-box i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.navbar .search-box .input-box{
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #3E8DA8;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.navbar.showInput .search-box .input-box{
  top: 65px;
  opacity: 1;
  pointer-events: auto;
  background: #3E8DA8;
}
.search-box .input-box::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #3E8DA8;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}
.search-box .input-box input{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}
.navbar .nav-links .sidebar-logo{
  display: none;
}
.navbar .bx-menu{
  display: none;
}
@media (max-width:920px) {
  nav .navbar{
    max-width: 100%;
    padding: 0 25px;
  }

  nav .navbar .logo a{
    font-size: 27px;
  }
  nav .navbar .links li{
    padding: 0 10px;
    white-space: nowrap;
  }
  nav .navbar .links li a{
    font-size: 15px;
  }
}
@media (max-width:800px){
  nav{
    /* position: relative; */
  }
  .navbar .bx-menu{
    display: block;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 270px;
    width: 100%;
    background:  #3E8DA8;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  .navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #fff;
  }
    .sidebar-logo  i,
    .navbar .bx-menu{
      font-size: 25px;
      color: #fff;
    }
  nav .navbar .links{
    display: block;
    margin-top: 20px;
  }
  nav .navbar .links li .arrow{
    line-height: 40px;
  }
nav .navbar .links li{
    display: block;
  }
nav .navbar .links li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
nav .navbar .links li .sub-menu li{
  border-bottom: none;

}
.navbar .links li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0;
}
.navbar .links li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(0deg);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
  nav .navbar .links li:hover .htmlCss-sub-menu,
  nav .navbar .links li:hover .js-sub-menu{
    display: none;
  }
.navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show3 .links .js-sub-menu,
  .navbar .nav-links.show2 .links .more .more-sub-menu{
      display: block;
    }
    .navbar .nav-links.show1 .links .htmlcss-arrow,
    .navbar .nav-links.show3 .links .js-arrow{
        transform: rotate(180deg);
}
    .navbar .nav-links.show2 .links .more-arrow{
      transform: rotate(90deg);
    }
}
@media (max-width:370px){
  nav .navbar .nav-links{
  max-width: 100%;
} 
}

Create a JS file with the name script.js on your computer and copy-paste the following JScodes on your JS document.

// search-box open close js code
let navbar = document.querySelector(".navbar");
let searchBox = document.querySelector(".search-box .bx-search");
// let searchBoxCancel = document.querySelector(".search-box .bx-x");

searchBox.addEventListener("click", ()=>{
  navbar.classList.toggle("showInput");
  if(navbar.classList.contains("showInput")){
    searchBox.classList.replace("bx-search" ,"bx-x");
  }else {
    searchBox.classList.replace("bx-x" ,"bx-search");
  }
});

// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}


// sidebar submenu open close js code
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
 navLinks.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
 navLinks.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
 navLinks.classList.toggle("show3");
}

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

Portfolio Website in HTML CSS & JavaScript | Free Source Code

CodingNepal — Wed, 17 Mar 2021 21:09:59 +0000

Q: How do I create a personal portfolio website using HTML CSS, and JavaScript?

A: After reading and watching the following articles you will definitely be able to Create a Complete Responsive Personal Portfolio Website by using HTML CSS and JavaScript.

Hello Readers, Today in this blog I’m going to create a complete Responsive Portfolio Website using HTML CSS & JavaScript step by step. In my earlier tutorial, I have been creating All Essential Designs for the Website Separately for example responsive footer, contact us form, our team section, header, and others. Now I’m going to create a full website with several pages.

What is Portfolio Website?

In simple terms, A portfolio website is a combination of several pages that contains articles, images, and hyperlinks to help user necessities easier. A website could be different in design and contains but the main motive of websites is to make people’s necessities easy and fast we can find various types of websites on the internet, for example, commercial websites, portfolio websites, product websites, and banking websites.

As you see on the given image of the portfolio website on the webpage, this is a real example of the personal portfolio website that we are going to build today. Basically, this is the header or home section of our portfolio website, when we scroll we can see various pages of this website like the about me section, my skills section, my services, and others.

To see the real demo of this website and all the code that I have used to make this personal portfolio website, do watch the full video tutorial that I have given below. Yeah, you can download all source codes given below but you will not get the idea, of how all codes are actually working on this portfolio website.

Responsive Portfolio Website using HTML CSS & JavaScript | Video Tutorial

As you have seen on the given tutorial of this responsive portfolio website. I have added all the important pages for the portfolio website that continuously appears when we scroll down this website is fully responsive, which means this website can fit on any screen device like a tablet, laptop, and mobile. Also, I have coded all the code step by step which helps you to build this portfolio website easily.

This is the complete Portfolio Website that I have created by using HTML CSS and JavaScript and I have provided free source code below.

Complete Portfolio Website | Source Code

Responsive Portfolio Website HTML CSS| CodingNepal

Portfolio.

Home
About
Skills
Services
Contact

Hello,
I'm Prem Shahi
UI/UX Designer
From Nepal

About Me

Designing Is My Passion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, porro veritatis pariatur, nobis voluptatem ipsum repellat nemo quisquam error reprehenderit recusandae odio vel, suscipit. Voluptas mollitia accusantium quaerat aspernatur labore dolorum placeat ipsa sint nam perspiciatis eos consectetur veritatis debitis, quis aliquam unde sed maiores sit! Hic molestiae optio iste
iure earum amet nostrum quaerat facere quae veniam maiores harum iusto aperiam vel inventore illo voluptatibus voluptates quo impedit voluptatum error vitae, omnis praesentium? Aperiam nulla non, nesciunt fuga rem perferendis alias et, temporibus, distinctio culpa unde a laborum libero ducimus. Facilis veniam sit praesentium, voluptatibus sint maxime iusto eaque.

My Skills

Skills Reflects Our Knowledge
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus natus tenetur tempora? Quasi, rem quas omnis. Porro rem aspernatur reiciendis ut praesentium minima ad, quos, officia! Illo libero, et, distinctio repellat sed nesciunt est modi quaerat placeat. Quod molestiae, alias?

Years Of

Experience

HTML
90%

CSS
80%

JavScript
70%

PHP
60%

My Services

Web Devlopment
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?

Graphic Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?

Digital Marketing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?

Icon Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?

Photography
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?

Apps Devlopment
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?

Contact Me

Have Any Project?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam neque ipsum corrupti dolores, facere numquam voluptate aspernatur sit perferendis qui nisi modi! Recusandae deserunt consequatur voluptatibus alias repellendus nobis eligendi.

/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  scroll-behavior: smooth;
}

/* Custom Scroll Bar CSS */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #6e93f7;
    border-radius: 12px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #4070f4;
}
/* navbar styling */
nav{
  position: fixed;
  width: 100%;
  padding: 20px 0;
  z-index: 998;
  transition: all 0.3s ease;
  font-family: 'Ubuntu', sans-serif;
}
nav.sticky{
  background: #4070f4;
  padding: 13px 0;
}
nav .navbar{
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
nav .navbar .logo a{
  font-weight: 500;
  font-size: 35px;
  color: #4070f4;
}
nav.sticky .navbar .logo a{
  color: #fff;
}
nav .navbar .menu{
  display: flex;
  position: relative;
}
nav .navbar .menu li{
  list-style: none;
  margin: 0 8px;
}
.navbar .menu a{
  font-size: 18px;
  font-weight: 500;
  color: #0E2431;
  padding: 6px 0;
  transition: all 0.4s ease;
}
.navbar .menu a:hover{
  color: #4070f4;
}
nav.sticky .menu a{
  color: #FFF;
}
nav.sticky .menu a:hover{
  color: #0E2431;
}
.navbar .media-icons a{
  color: #4070f4;
  font-size: 18px;
  margin: 0 6px;
}
nav.sticky .media-icons a{
  color: #FFF;
}

/* Side Navigation Menu Button CSS */
nav .menu-btn,
.navbar .menu .cancel-btn{
  position: absolute;
  color: #fff;
  right: 30px;
  top: 20px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: none;
}
nav .menu-btn{
  color: #4070f4;
}
nav.sticky .menu-btn{
  color: #FFF;
}
.navbar .menu .menu-btn{
  color: #fff;
}

/* home section styling */
.home{
  height: 100vh;
  width: 100%;
  background: url("images/background.png") no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Ubuntu', sans-serif;
}
.home .home-content{
  width: 90%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home .text-one{
  font-size: 25px;
  color: #0E2431;
}
.home .text-two{
  color: #0E2431;
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}
.home .text-three{
  font-size: 40px;
  margin: 5px 0;
  color: #4070f4;
}
.home .text-four{
  font-size: 23px;
  margin: 5px 0;
  color: #0E2431;
}
.home .button{
  margin: 14px 0;
}
.home .button button{
  outline: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 25px;
  font-weight: 400;
  background: #4070f4;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.4s ease;
}
.home .button button:hover{
  border-color: #4070f4;
  background-color: #fff;
  color: #4070f4;
}

/* About Section Styling */
/* Those Elements Where We Have Apply Same CSS,
 I'm Selecting Directly 'Section Tag' and 'Class'  */
section{
  padding-top: 40px;
}
section .content{
  width: 80%;
  margin: 40px auto;
  font-family: 'Poppins', sans-serif;
}
.about .about-details{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section .title{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
section .title span{
  color: #0E2431;
  font-size: 30px;
  font-weight: 600;
  position: relative;
  padding-bottom: 8px;
}
section .title span::before,
section .title span::after{
  content: '';
  position: absolute;
  height: 3px;
  width: 100%;
  background: #4070f4;
  left: 0;
  bottom: 0;
}
section .title span::after{
  bottom: -7px;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
}
.about .about-details .left{
  width: 45%;
}
.about .left img{
  height: 400px;
  width: 400px;
  object-fit: cover;
  border-radius: 12px;
}
.about-details .right{
  width: 55%;
}
section  .topic{
  color: #0E2431;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
}
.about-details .right p{
  text-align: justify;
  color: #0E2431;
}
section .button{
  margin: 16px 0;
}
section .button button{
  outline: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 25px;
  font-weight: 400;
  background: #4070f4;
  color: #fff;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.4s ease;
}
section .button button:hover{
  border-color: #4070f4;
  background-color: #fff;
  color: #4070f4;
}

 /* My Skills CSS */
 .skills{
   background: #F0F8FF;
 }
 .skills .content{
   padding: 40px 0;
 }
 .skills .skills-details{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .skills-details .text{
   width: 50%;
 }
 .skills-details p{
   color: #0E2431;
   text-align: justify;
 }
.skills .skills-details .experience{
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.skills-details .experience .num{
  color: #0E2431;
  font-size: 80px;
}
.skills-details .experience .exp{
  color: #0E2431;
  margin-left: 20px;
  font-size: 18px;
  font-weight: 500;
  margin: 0 6px;
}
.skills-details .boxes{
  width: 45%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.skills-details .box{
  width: calc(100% / 2 - 20px);
  margin: 20px 0;
}
.skills-details .boxes .topic{
  font-size: 20px;
  color: #4070f4;
}
.skills-details .boxes .per{
  font-size: 60px;
  color: #4070f4;
}

/* My Services CSS */
.services .boxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.services .boxes .box{
  margin: 20px 0;
  width: calc(100% / 3 - 20px);
  text-align: center;
  border-radius: 12px;
  padding: 30px 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
  cursor: default;
  transition: all 0.4s ease;
}
.services .boxes .box:hover{
  background: #4070f4;
  color: #fff;
}
.services .boxes .box .icon{
  height: 50px;
  width: 50px;
  background: #4070f4;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  margin: 0 auto 10px auto;
  transition: all 0.4s ease;
}
.boxes .box:hover .icon{
  background-color: #fff;
  color: #4070f4;
}
.services .boxes .box:hover .topic,
.services .boxes .box:hover p{
  color: #0E2431;
  transition: all 0.4s ease;
}
.services .boxes .box:hover .topic,
.services .boxes .box:hover p{
  color: #fff;
}
/* Contact Me CSS */
.contact{
  background: #F0F8FF;
}
.contact .content{
  margin: 0 auto;
  padding: 30px 0;
}
.contact .text{
  width: 80%;
  text-align: center;
  margin: auto;
}

/* Footer CSS */
footer{
  background: #4070f4;
  padding: 15px 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
footer .text span{
  font-size: 17px;
  font-weight: 400;
  color: #fff;
}
footer .text span a{
  font-weight: 500;
  color: #FFF;
}
footer .text span a:hover{
  text-decoration: underline;
}
/* Scroll TO Top Button CSS */
.scroll-button a{
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #fff;
  background: #4070f4;
  padding: 7px 12px;;
  font-size: 18px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15);
  display: none;
}

/* Responsive Media Query */
@media (max-width: 1190px) {
  section .content{
    width: 85%;
  }
}
@media (max-width: 1000px) {
  .about .about-details{
    justify-content: center;
    flex-direction: column;
  }
  .about .about-details .left{
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .about-details .right{
    width: 90%;
    margin: 40px 0;
  }
  .services .boxes .box{
    margin: 20px 0;
    width: calc(100% / 2 - 20px);
  }
}
@media (max-width: 900px) {
  .about .left img{
    height: 350px;
    width: 350px;
  }
}

@media (max-width: 750px) {
  nav .navbar{
    width: 90%;
  }
  nav .navbar .menu{
    position: fixed;
    left: -100%;
    top: 0;
    background: #0E2431;
    height: 100vh;
    max-width: 400px;
    width: 100%;
    padding-top: 60px;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s ease;
  }
  .navbar.active .menu{
    left: 0;
  }
  nav .navbar .menu a{
    font-size: 23px;
    display: block;
    color: #fff;
    margin: 10px 0;
  }
  nav.sticky .menu a:hover{
    color: #4070f4;
  }
  nav .navbar .media-icons{
    display: none;
  }
  nav .menu-btn,
  .navbar .menu .cancel-btn{
    display: block;
  }
  .home .text-two{
    font-size: 65px;
  }
  .home .text-three{
    font-size: 35px;
  }
  .skills .skills-details{
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .skills-details .text{
    width: 100%;
    margin-bottom: 50px;
  }
  .skills-details .boxes{
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .services .boxes .box{
    margin: 20px 0;
    width: 100%;
  }
  .contact .text{
    width: 100%;
}
}

@media (max-width: 500px){
  .home .text-two{
    font-size: 55px;
  }
  .home .text-three{
    font-size: 33px;
  }
  .skills-details .boxes .per{
    font-size: 50px;
    color: #4070f4;
  }
}

// Sticky Navigation Menu JS Code
let nav = document.querySelector("nav");
let scrollBtn = document.querySelector(".scroll-button a");
console.log(scrollBtn);
let val;
window.onscroll = function() {
  if(document.documentElement.scrollTop > 20){
    nav.classList.add("sticky");
    scrollBtn.style.display = "block";
  }else{
    nav.classList.remove("sticky");
    scrollBtn.style.display = "none";
  }

}

// Side NavIgation Menu JS Code
let body = document.querySelector("body");
let navBar = document.querySelector(".navbar");
let menuBtn = document.querySelector(".menu-btn");
let cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = function(){
  navBar.classList.add("active");
  menuBtn.style.opacity = "0";
  menuBtn.style.pointerEvents = "none";
  body.style.overflow = "hidden";
  scrollBtn.style.pointerEvents = "none";
}
cancelBtn.onclick = function(){
  navBar.classList.remove("active");
  menuBtn.style.opacity = "1";
  menuBtn.style.pointerEvents = "auto";
  body.style.overflow = "auto";
  scrollBtn.style.pointerEvents = "auto";
}

// Side Navigation Bar Close While We Click On Navigation Links
let navLinks = document.querySelectorAll(".menu li a");
for (var i = 0; i < navLinks.length; i++) {
  navLinks[i].addEventListener("click" , function() {
    navBar.classList.remove("active");
    menuBtn.style.opacity = "1";
    menuBtn.style.pointerEvents = "auto";
  });
}

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