• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
How to Create Responsive Fiverr Website in HTML and CSS
If you’re a beginner web developer, creating a Fiverr website using HTML and CSS is a valuable opportunity to gain real-world experience. By recreating the design of a well-established platform like Fiverr, you’ll not only develop practical skills in HTML and CSS but also demonstrate your ability to replicate existing designs.
Throughout the post, we’ll explore a variety of HTML tags and CSS properties to efficiently create our Fiverr-inspired homepage. To create an attractive layout that attracts viewers and ensures a simple interface, we’ll use tags like nav, sections, divs, inputs, links, and other commonly used tags.
Steps To Create Fiverr Website in HTML and CSS
To build a Drawing App using HTML CSS & JavaScript, follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fiverr Homepage Clone | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<!-- Google Icons Link -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
</head>
<body>
<header>
<nav class="navbar">
<a href="#" class="logo">
<img src="images/logo.svg" alt="Fiverr Logo">
</a>
<ul class="menu-links">
<li><a href="#">Fiverr Business</a></li>
<li><a href="#">Explore</a></li>
<li class="language-item">
<a href="#">
<span class="material-symbols-outlined">language</span>
English
</a>
</li>
<li><a href="#">Become a Seller</a></li>
<li><a href="#">Sign In</a></li>
<li class="join-btn"><a href="#">Join Us</a></li>
<span id="close-menu-btn" class="material-symbols-outlined">close</span>
</ul>
<span id="hamburger-btn" class="material-symbols-outlined">menu</span>
</nav>
</header>
<section class="hero-section">
<div class="content">
<h1>Find the right freelance service, right away</h1>
<form action="#" class="search-form">
<input type="text" placeholder="Search for any service..." required>
<button class="material-symbols-outlined" type="sumbit">search</button>
</form>
<div class="popular-tags">
Popular:
<ul class="tags">
<li><a href="#">Webite Design</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">AI Design</a></li>
</ul>
</div>
</div>
</section>
<script>
const header = document.querySelector("header");
const hamburgerBtn = document.querySelector("#hamburger-btn");
const closeMenuBtn = document.querySelector("#close-menu-btn");
// Toggle mobile menu on hamburger button click
hamburgerBtn.addEventListener("click", () => header.classList.toggle("show-mobile-menu"));
// Close mobile menu on close button click
closeMenuBtn.addEventListener("click", () => hamburgerBtn.click());
</script>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fiverr Homepage Clone | CodingNepal</title> <link rel="stylesheet" href="style.css"> <!-- Google Icons Link --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"> </head> <body> <header> <nav class="navbar"> <a href="#" class="logo"> <img src="images/logo.svg" alt="Fiverr Logo"> </a> <ul class="menu-links"> <li><a href="#">Fiverr Business</a></li> <li><a href="#">Explore</a></li> <li class="language-item"> <a href="#"> <span class="material-symbols-outlined">language</span> English </a> </li> <li><a href="#">Become a Seller</a></li> <li><a href="#">Sign In</a></li> <li class="join-btn"><a href="#">Join Us</a></li> <span id="close-menu-btn" class="material-symbols-outlined">close</span> </ul> <span id="hamburger-btn" class="material-symbols-outlined">menu</span> </nav> </header> <section class="hero-section"> <div class="content"> <h1>Find the right freelance service, right away</h1> <form action="#" class="search-form"> <input type="text" placeholder="Search for any service..." required> <button class="material-symbols-outlined" type="sumbit">search</button> </form> <div class="popular-tags"> Popular: <ul class="tags"> <li><a href="#">Webite Design</a></li> <li><a href="#">Logo Design</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">AI Design</a></li> </ul> </div> </div> </section> <script> const header = document.querySelector("header"); const hamburgerBtn = document.querySelector("#hamburger-btn"); const closeMenuBtn = document.querySelector("#close-menu-btn"); // Toggle mobile menu on hamburger button click hamburgerBtn.addEventListener("click", () => header.classList.toggle("show-mobile-menu")); // Close mobile menu on close button click closeMenuBtn.addEventListener("click", () => hamburgerBtn.click()); </script> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Importing Google font - Fira Sans */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fira Sans', sans-serif;
}
body {
background: #1B1B1D;
}
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 1;
padding: 20px;
}
header .navbar {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .menu-links {
display: flex;
align-items: center;
list-style: none;
gap: 30px;
}
.navbar .menu-links li a {
color: #fff;
font-weight: 500;
text-decoration: none;
transition: 0.2s ease;
}
.navbar .menu-links .language-item a {
display: flex;
gap: 8px;
align-items: center;
}
.navbar .menu-links .language-item span {
font-size: 1.3rem;
}
.navbar .menu-links li a:hover {
color: #1dbf73;
}
.navbar .menu-links .join-btn a {
border: 1px solid #fff;
padding: 8px 15px;
border-radius: 4px;
}
.navbar .menu-links .join-btn a:hover {
color: #fff;
border-color: transparent;
background: #1dbf73;
}
.hero-section {
height: 100vh;
background-image: url("images/hero-img.jpg");
background-position: center;
background-size: cover;
position: relative;
display: flex;
padding: 0 20px;
align-items: center;
}
.hero-section .content {
max-width: 1280px;
margin: 0 auto 40px;
width: 100%;
}
.hero-section .content h1 {
color: #fff;
font-size: 3rem;
max-width: 630px;
line-height: 65px;
}
.hero-section .search-form {
height: 48px;
display: flex;
max-width: 630px;
margin-top: 30px;
}
.hero-section .search-form input {
height: 100%;
width: 100%;
border: none;
outline: none;
padding: 0 15px;
font-size: 1rem;
border-radius: 4px 0 0 4px;
}
.hero-section .search-form button {
height: 100%;
width: 60px;
border: none;
outline: none;
cursor: pointer;
background: #1dbf73;
color: #fff;
border-radius: 0 4px 4px 0;
transition: background 0.2s ease;
}
.hero-section .search-form button:hover {
background: #19a463;
}
.hero-section .popular-tags {
display: flex;
color: #fff;
gap: 25px;
font-size: 0.875rem;
font-weight: 500;
margin-top: 25px;
}
.hero-section .popular-tags .tags {
display: flex;
gap: 15px;
align-items: center;
list-style: none;
}
.hero-section .tags li a {
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 4px 12px;
border-radius: 50px;
transition: 0.2s ease;
}
.hero-section .tags li a:hover {
color: #000;
background: #fff;
}
.navbar #hamburger-btn {
color: #fff;
cursor: pointer;
display: none;
font-size: 1.7rem;
}
.navbar #close-menu-btn {
position: absolute;
display: none;
color: #000;
top: 20px;
right: 20px;
cursor: pointer;
font-size: 1.7rem;
}
@media screen and (max-width: 900px) {
header.show-mobile-menu::before {
content: "";
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
backdrop-filter: blur(5px);
}
.navbar .menu-links {
height: 100vh;
max-width: 300px;
width: 100%;
background: #fff;
position: fixed;
left: -300px;
top: 0;
display: block;
padding: 75px 40px 0;
transition: left 0.2s ease;
}
header.show-mobile-menu .navbar .menu-links {
left: 0;
}
.navbar .menu-links li {
margin-bottom: 30px;
}
.navbar .menu-links li a {
color: #000;
font-size: 1.1rem;
}
.navbar .menu-links .join-btn a {
padding: 0;
}
.navbar .menu-links .join-btn a:hover {
color: #1dbf73;
background: none;
}
.navbar :is(#close-menu-btn, #hamburger-btn) {
display: block;
}
.hero-section {
background: none;
}
.hero-section .content {
margin: 0 auto 80px;
}
.hero-section .content :is(h1, .search-form) {
max-width: 100%;
}
.hero-section .content h1 {
text-align: center;
font-size: 2.5rem;
line-height: 55px;
}
.hero-section .search-form {
display: block;
margin-top: 20px;
}
.hero-section .search-form input {
border-radius: 4px;
}
.hero-section .search-form button {
margin-top: 10px;
border-radius: 4px;
width: 100%;
}
.hero-section .popular-tags {
display: none;
}
}
/* Importing Google font - Fira Sans */ @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Fira Sans', sans-serif; } body { background: #1B1B1D; } header { position: fixed; left: 0; top: 0; width: 100%; z-index: 1; padding: 20px; } header .navbar { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .navbar .menu-links { display: flex; align-items: center; list-style: none; gap: 30px; } .navbar .menu-links li a { color: #fff; font-weight: 500; text-decoration: none; transition: 0.2s ease; } .navbar .menu-links .language-item a { display: flex; gap: 8px; align-items: center; } .navbar .menu-links .language-item span { font-size: 1.3rem; } .navbar .menu-links li a:hover { color: #1dbf73; } .navbar .menu-links .join-btn a { border: 1px solid #fff; padding: 8px 15px; border-radius: 4px; } .navbar .menu-links .join-btn a:hover { color: #fff; border-color: transparent; background: #1dbf73; } .hero-section { height: 100vh; background-image: url("images/hero-img.jpg"); background-position: center; background-size: cover; position: relative; display: flex; padding: 0 20px; align-items: center; } .hero-section .content { max-width: 1280px; margin: 0 auto 40px; width: 100%; } .hero-section .content h1 { color: #fff; font-size: 3rem; max-width: 630px; line-height: 65px; } .hero-section .search-form { height: 48px; display: flex; max-width: 630px; margin-top: 30px; } .hero-section .search-form input { height: 100%; width: 100%; border: none; outline: none; padding: 0 15px; font-size: 1rem; border-radius: 4px 0 0 4px; } .hero-section .search-form button { height: 100%; width: 60px; border: none; outline: none; cursor: pointer; background: #1dbf73; color: #fff; border-radius: 0 4px 4px 0; transition: background 0.2s ease; } .hero-section .search-form button:hover { background: #19a463; } .hero-section .popular-tags { display: flex; color: #fff; gap: 25px; font-size: 0.875rem; font-weight: 500; margin-top: 25px; } .hero-section .popular-tags .tags { display: flex; gap: 15px; align-items: center; list-style: none; } .hero-section .tags li a { text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 12px; border-radius: 50px; transition: 0.2s ease; } .hero-section .tags li a:hover { color: #000; background: #fff; } .navbar #hamburger-btn { color: #fff; cursor: pointer; display: none; font-size: 1.7rem; } .navbar #close-menu-btn { position: absolute; display: none; color: #000; top: 20px; right: 20px; cursor: pointer; font-size: 1.7rem; } @media screen and (max-width: 900px) { header.show-mobile-menu::before { content: ""; height: 100%; width: 100%; position: fixed; left: 0; top: 0; backdrop-filter: blur(5px); } .navbar .menu-links { height: 100vh; max-width: 300px; width: 100%; background: #fff; position: fixed; left: -300px; top: 0; display: block; padding: 75px 40px 0; transition: left 0.2s ease; } header.show-mobile-menu .navbar .menu-links { left: 0; } .navbar .menu-links li { margin-bottom: 30px; } .navbar .menu-links li a { color: #000; font-size: 1.1rem; } .navbar .menu-links .join-btn a { padding: 0; } .navbar .menu-links .join-btn a:hover { color: #1dbf73; background: none; } .navbar :is(#close-menu-btn, #hamburger-btn) { display: block; } .hero-section { background: none; } .hero-section .content { margin: 0 auto 80px; } .hero-section .content :is(h1, .search-form) { max-width: 100%; } .hero-section .content h1 { text-align: center; font-size: 2.5rem; line-height: 55px; } .hero-section .search-form { display: block; margin-top: 20px; } .hero-section .search-form input { border-radius: 4px; } .hero-section .search-form button { margin-top: 10px; border-radius: 4px; width: 100%; } .hero-section .popular-tags { display: none; } }
Conclusion and Final words
To wrap up, creating a Fiverr website using HTML, CSS, and JavaScript is a valuable project, especially for beginners in web programming. By following the instructions outlined in this post, you’ve successfully created a responsive Fiverr-inspired homepage.
If you encounter any problems while creating your Fiverr website, you can download the source code files for this Fiverr Homepage project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

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