How to Clone LinkedIn Home page using only HTML + CSS || 2021
Subscribe to my newsletter and never miss my upcoming articles
How to Clone LinkedIn Home page using only HTML + CSS || 2021
Hey there , this is an awesome Tutorial IN WHICH I FULLY CLONED LINKEDIN home page using only plain CSS and html.
I felt that cloning some website without seeing the source code will be difficult, but trust me cloning by just seeing the website(not the actual source code) is super fun!
Help me reach 100 subscribers. Help me reach 100 subscribers. Help me reach 100 subscribers. Help me reach 100 subscribers.
Best to sharpen your CSS Skills.
Learn advanced CSS Cloning with SOURCE CODE!!!
Best even for beginners. The source code is here:
All the source code need are given below in the post and all you need is just to copy paste the code and create your dream LinkedIn frontend.
Here is the GOOGLE SEARCH page frontend clone:
share the link: https://youtu.be/eLCGME3dZsI
and here is the Clone of HASHNODE frontend:
share the link:
PLease do suggest me what to clone next?
This is a best project for anyone who started coding.
Skills used:
- CSS
- HTML
Yes only this much.
Get the interactive vedio tutorial.
Share the link: https://youtu.be/3Dgt_Vb19Z0
About
Don't worry all the assests used and source code will be available on my github handle.
Here the link for the repo:
Get started
The main html content will be saved in index.HTML file.
The main index.html code is given below:
<div class="nav">
<div style="width: 150px;">
<img style="fill:#2977c9;" src="nav.svg">
</div>
<div class="spano">
<div><span>Join with resume</span></div>
<div><span>|</span></div>
<div><span>Join Now</span></div>
<div><span class="signin">Sign in</span></div>
</div>
</div>
<div class="container">
<div>
<p class="sub">Open jobs. People <br> hiring.</p>
<div class="ctabs">
<div class="options">
<span>Jobs</span>
<span>People</span>
<span>Learning</span>
</div>
<div class="inputa">
<span class="label"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#3B5526" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg></span>
<input type="text" placeholder="Search job titles or companies" name="">
</div>
<div class="inputa">
<span class="label"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#3B5526" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="11" r="3" />
<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />
</svg></span>
<input type="text" name="" placeholder="Thane, Maharastra, India">
</div>
</div>
<button class="sbtn">Search Jobs</button>
</div>
<div>
<img src="home.svg">
</div>
</div>
<!-- mid section starts -->
<div class="container">
<div><p style="font-size: 38px; font-weight: 700;">Find open jobs <br> and internships</p></div>
<div>
<p style="color: #495450;">SUGGESTED SEARCHES</p>
<div class="tags-con">
<span class="tag">Engineering</span>
<span class="tag">Business Development</span>
<span class="tag">Finance</span>
<span class="tag">Administrative Assistant</span>
<span class="tag">Retail Associate</span>
<span class="tag">Customer Service</span>
<span class="tag">Operations</span>
<span class="tag">Information Technology</span>
<span class="tag">Marketing</span>
<span class="tag">Human Resources</span>
</div>
<p style="cursor: pointer;color: #495450;opacity: 0.7;">Show more ></p>
</div>
</div>
<!-- middle banner -->
<div class="banner">
<p style="color: #B24020; font-size: 32px;
font-weight: 700;">Post your job and find <br> the people you need</p>
<button class="dt">Post a job</button>
</div>
<!-- footer starts here -->
<div class="footer">
<div style="padding: 15px;">
<img style="height: 35px;" src="nav.svg">
</div>
<div>
<ul>
<li style="margin-bottom: 8px;font-weight:700;font-size:16px;">General</li>
<li>Sign Up</li>
<li>Help Center</li>
<li>About</li>
<li>Press</li>
<li>Blog</li>
<li>Careers</li>
<li>Developers</li>
</ul>
</div>
<div>
<ul>
<li style="margin-bottom: 8px;font-weight:700;font-size:16px;">Browse LinkedIn</li>
<li>Learning</li>
<li>Jobs</li>
<li>Salary</li>
<li>Mobile</li>
<li>Services</li>
</ul>
</div>
<div>
<ul>
<li style="margin-bottom: 8px;font-weight:700;font-size:16px;">Business Solutions</li>
<li>Talent</li>
<li>Marketing</li>
<li>Sales</li>
<li>Learning</li>
</ul>
</div>
<div>
<ul>
<li style="margin-bottom: 8px;font-weight:700;font-size:16px;">Directories</li>
<li>Members</li>
<li>Jobs</li>
<li>Companies</li>
<li>Salaries</li>
<li>Featured</li>
<li>Learning</li>
<li>Posts</li>
<li>Articles</li>
<li>Schools</li>
<li>News</li>
<li>News Letters</li>
<li>Services</li>
</ul>
</div>
</div>
<p style="padding: 15px;
text-align: center;width: 95%; color: #495450;
opacity: 0.7;">© 2021 Linkedin.</p>
The styling part is as follow:
body {
width: 100%;
font-family: sans-serif;
margin:0;
}
.nav {
display: flex;
padding: 15px;
align-items: center;
justify-content: space-between;
}
.nav div {
display: flex;
align-items: center;
}
.spano {
display: flex;
align-items: center;
width: 50%;
justify-content: center;
}
.spano > div {
margin-right: 20px;
}
.spano div span {
color: #495450;
}
.signin {
border: 1px solid #2977c9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
background-color: #fff;
border-radius: 30px;
}
.container {
padding: 20px;
display: flex;
height: 80vh;
align-items: flex-start;
margin-bottom: 40px;
}
.container > div {
width: 50%;
}
.sub {
color: #2977c9;
font-weight: 600;
font-size: 42px;
}
.ctabs {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 8px;
}
.options {
padding: 20px;
}
.options > span {
padding: 10px;
cursor: pointer;
color: #495450;
}
.options > span:hover {
background-color: #eee;
}
.sbtn {
padding: 18px;
background-color: #2977c9;
color: #fff;
font-size: 18px;
border-radius: 30px;
border: 0;
outline: none;
cursor: pointer;
}
.inputa {
border: 1px solid #FDFDFD;
padding: 5px;
display: flex;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.08) 0px -1px 1px 0px, rgba(0, 0, 0, 0.08) 1px 0px 1px 0px, rgba(0, 0, 0, 0.08) -1px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 1px 1px 0px;
}
input {
border: 0;
padding: 8px;
width: 100%;
}
[placeholder] {
color: grey;
opacity: 0.7;
}
.tags-con {
display: flex;
width: 50%;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
background-color: #495450;
opacity: 0.3;
padding: 10px;
margin: 6px;
/*margin-right: 10px;*/
color: #eee;
border-radius: 30px;
font-weight: 500;
display: flex;
align-items: center;
}
.banner {
background-color: #F1ECE5;
display: flex;
align-items: center;
padding: 30px;
justify-content: space-around;s
}
.dt {
border: 1px solid #52514E;
padding: 8px;
border-radius: 20px;
}
/*footer*/
ul , li {
list-style-type: none;
}
.footer {
display: flex;
}
.footer > div {
width: 20%;
}
ul > li {
color: #495450;
cursor: pointer;
}
You may also like:
$ GOOGLE SEARCH page clone using only HTML + CSS youtu.be/eLCGME3dZsI
Node.js Cracker cheatsheet || 2021 MUST WATCH for beginners - part #2 youtu.be/ajTDDm6lfUQ
Ultimate CSS Code Generator tool on the web! a2021 Free youtu.be/zjPbREldtOY
Animate anything by just 1 line of JS Code! 2021 || Motionia.js youtube.com/watch?v=tHcFjDVqn-Q&feature..
People looking for: coding, programing , webdevelopment, skills, tutorials
#coding #programing #webdevelopment #CSS
No Comments Yet