Skip to content

Instantly share code, notes, and snippets.

@SH20RAJ

SH20RAJ/index.html

Created June 20, 2024 02:56
Show Gist options
  • Save SH20RAJ/285e0f48177a7125b81a27db31964aba to your computer and use it in GitHub Desktop.
Save SH20RAJ/285e0f48177a7125b81a27db31964aba to your computer and use it in GitHub Desktop.
Download ZIP
Medium Homepage Clone
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medium Clone</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a5d5d09acd.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
</head>
<body>
<!-- Hero-Start -->
<div class="hero bg-warning">
<!-- Navbar-Start -->
<nav class="navbar navbar-expand fixed-top bg-warning">
<div class="container py-2 px-2">
<div class="left navbar-nav">
<a class="navbar-brand" href="#">
<svg viewBox="0 0 3940 610" style="height: 25px;">
<path
d="M594.79 308.2c0 163.76-131.85 296.52-294.5 296.52S5.8 472 5.8 308.2 137.65 11.69 300.29 11.69s294.5 132.75 294.5 296.51M917.86 308.2c0 154.16-65.93 279.12-147.25 279.12s-147.25-125-147.25-279.12S689.29 29.08 770.61 29.08s147.25 125 147.25 279.12M1050 308.2c0 138.12-23.19 250.08-51.79 250.08s-51.79-112-51.79-250.08 23.19-250.08 51.8-250.08S1050 170.09 1050 308.2M1862.77 37.4l.82-.18v-6.35h-167.48l-155.51 365.5-155.51-365.5h-180.48v6.35l.81.18c30.57 6.9 46.09 17.19 46.09 54.3v434.45c0 37.11-15.58 47.4-46.15 54.3l-.81.18V587H1327v-6.35l-.81-.18c-30.57-6.9-46.09-17.19-46.09-54.3V116.9L1479.87 587h11.33l205.59-483.21V536.9c-2.62 29.31-18 38.36-45.68 44.61l-.82.19v6.3h213.3v-6.3l-.82-.19c-27.71-6.25-43.46-15.3-46.08-44.61l-.14-445.2h.14c0-37.11 15.52-47.4 46.08-54.3m97.43 287.8c3.49-78.06 31.52-134.4 78.56-135.37 14.51.24 26.68 5 36.14 14.16 20.1 19.51 29.55 60.28 28.09 121.21zm-2.11 22h250v-1.05c-.71-59.69-18-106.12-51.34-138-28.82-27.55-71.49-42.71-116.31-42.71h-1c-23.26 0-51.79 5.64-72.09 15.86-23.11 10.7-43.49 26.7-60.45 47.7-27.3 33.83-43.84 79.55-47.86 130.93-.13 1.54-.24 3.08-.35 4.62s-.18 2.92-.25 4.39a332.64 332.64 0 0 0-.36 21.69C1860.79 507 1923.65 600 2035.3 600c98 0 155.07-71.64 169.3-167.8l-7.19-2.53c-25 51.68-69.9 83-121 79.18-69.76-5.22-123.2-75.95-118.35-161.63m532.69 157.68c-8.2 19.45-25.31 30.15-48.24 30.15s-43.89-15.74-58.78-44.34c-16-30.7-24.42-74.1-24.42-125.51 0-107 33.28-176.21 84.79-176.21 21.57 0 38.55 10.7 46.65 29.37zm165.84 76.28c-30.57-7.23-46.09-18-46.09-57V5.28L2424.77 60v6.7l1.14-.09c25.62-2.07 43 1.47 53.09 10.79 7.9 7.3 11.75 18.5 11.75 34.26v71.14c-18.31-11.69-40.09-17.38-66.52-17.38-53.6 0-102.59 22.57-137.92 63.56-36.83 42.72-56.3 101.1-56.3 168.81C2230 518.72 2289.53 600 2378.13 600c51.83 0 93.53-28.4 112.62-76.3V588h166.65v-6.66zm159.29-505.33c0-37.76-28.47-66.24-66.24-66.24-37.59 0-67 29.1-67 66.24s29.44 66.24 67 66.24c37.77 0 66.24-28.48 66.24-66.24m43.84 505.33c-30.57-7.23-46.09-18-46.09-57h-.13V166.65l-166.66 47.85v6.5l1 .09c36.06 3.21 45.93 15.63 45.93 57.77V588h166.8v-6.66zm427.05 0c-30.57-7.23-46.09-18-46.09-57V166.65L3082 212.92v6.52l.94.1c29.48 3.1 38 16.23 38 58.56v226c-9.83 19.45-28.27 31-50.61 31.78-36.23 0-56.18-24.47-56.18-68.9V166.66l-166.66 47.85V221l1 .09c36.06 3.2 45.94 15.62 45.94 57.77v191.27a214.48 214.48 0 0 0 3.47 39.82l3 13.05c14.11 50.56 51.08 77 109 77 49.06 0 92.06-30.37 111-77.89v66h166.66v-6.66zM3934.2 588v-6.67l-.81-.19c-33.17-7.65-46.09-22.07-46.09-51.43v-243.2c0-75.83-42.59-121.09-113.93-121.09-52 0-95.85 30.05-112.73 76.86-13.41-49.6-52-76.86-109.06-76.86-50.12 0-89.4 26.45-106.25 71.13v-69.87l-166.66 45.89v6.54l1 .09c35.63 3.16 45.93 15.94 45.93 57V588h155.5v-6.66l-.82-.2c-26.46-6.22-35-17.56-35-46.66V255.72c7-16.35 21.11-35.72 49-35.72 34.64 0 52.2 24 52.2 71.28V588h155.54v-6.66l-.82-.2c-26.46-6.22-35-17.56-35-46.66v-248a160.45 160.45 0 0 0-2.2-27.68c7.42-17.77 22.34-38.8 51.37-38.8 35.13 0 52.2 23.31 52.2 71.28V588z">
</path>
</svg>
</a>
</div>
<div class="right navbar-nav">
<ul class="navbar-nav">
<li class="nav-item pr-2">
<a href="#" class="nav-link">Our Story</a>
</li>
<li class="nav-item pr-2">
<a href="#" class="nav-link">Membership</a>
</li>
<li class="nav-item pr-2">
<a href="#" class="nav-link">Write</a>
</li>
<li class="nav-item pr-2">
<a href="#" class="nav-link">Sign In</a>
</li>
</ul>
<button class="btn btn-dark nav-item">Get Started</button>
</div>
</div>
</nav>
<!-- Navbar-End -->
<!-- Hero-Area-Start -->
<div class="hero-area pt-5">
<div class="container">
<div class="row pb-5 pt-5">
<div class="main-text col-6 pt-5">
<h1 class="title pb-5">Where good ideas find you</h1>
<p>Read and share new perspective on just about any
topic. Everyone's welcome. <a href="#">Learn more.</a>
</p>
<button class="btn btn-outline-dark py-2 px-4">Get Started</button>
</div>
<div class="img col-6">
<img src="images/main-img.jpg" alt="main img">
</div>
</div>
</div>
</div>
<!-- Hero-Area-End -->
</div>
<!-- Hero-End -->
<!-- Trends-Part-Start -->
<div class="trends">
<div class="container pt-5 pb-2">
<div class="trends-text" style="display: flex;">
<i class="fa-solid fa-arrow-trend-up"></i>
<h2 class="ml-3">TRENDING ON MEDIUM</h2>
</div>
<div class="row">
<div class="trend-blog d-flex mt-3 col-4">
<div class="trend-blog-number text-muted font-weight-bold mr-3">01</div>
<div class="trend-blog-content d-flex flex-column mt-2">
<div class="trend-blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/237/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<div class="trend-blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
</div>
</div>
<div class="trend-blog d-flex mt-3 col-4">
<div class="trend-blog-number text-muted font-weight-bold mr-3">02</div>
<div class="trend-blog-content d-flex flex-column mt-2">
<div class="trend-blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/238/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<div class="trend-blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
</div>
</div>
<div class="trend-blog d-flex mt-3 col-4">
<div class="trend-blog-number text-muted font-weight-bold mr-3">03</div>
<div class="trend-blog-content d-flex flex-column mt-2">
<div class="trend-blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/239/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<div class="trend-blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
</div>
</div>
<div class="trend-blog d-flex mt-3 col-4">
<div class="trend-blog-number text-muted font-weight-bold mr-3">04</div>
<div class="trend-blog-content d-flex flex-column mt-2">
<div class="trend-blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/240/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<div class="trend-blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
</div>
</div>
<div class="trend-blog d-flex mt-3 col-4">
<div class="trend-blog-number text-muted font-weight-bold mr-3">05</div>
<div class="trend-blog-content d-flex flex-column mt-2">
<div class="trend-blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/241/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<div class="trend-blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
</div>
</div>
<div class="trend-blog d-flex mt-3 col-4">
<div class="trend-blog-number text-muted font-weight-bold mr-3">06</div>
<div class="trend-blog-content d-flex flex-column mt-2">
<div class="trend-blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/242/200/300" alt="" style="width: 20px; height: 20px">
<h2 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h2>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<div class="trend-blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Trends-Part-End -->
<!-- Content-Start -->
<div class="content container">
<div class="row mt-5">
<!-- Content-Left-Start -->
<div class="content-left col-8">
<div class="blog d-flex">
<div class="right">
<div class="blog-content d-flex flex-column">
<div class="blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/242/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<p class="mb-1 text-muted">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam adipisci consectetur, est aut nostrum!</p>
<div class="date-mark d-flex">
<div class="blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
<div class="bookmark ml-auto">
<i class="fa-regular fa-bookmark"></i>
</div>
</div>
</div>
</div>
<div class="ms-auto ml-4">
<img src="https://picsum.photos/id/114/200/300" style="height: 160px;width:220px" alt="">
</div>
</div>
<div class="blog d-flex">
<div class="right">
<div class="blog-content d-flex flex-column">
<div class="blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/243/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<p class="mb-1 text-muted">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam adipisci consectetur, est aut nostrum!</p>
<div class="date-mark d-flex">
<div class="blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
<div class="bookmark ml-auto">
<i class="fa-regular fa-bookmark"></i>
</div>
</div>
</div>
</div>
<div class="ms-auto ml-4">
<img src="https://picsum.photos/id/113/200/300" style="height: 160px;width:220px" alt="">
</div>
</div>
<div class="blog d-flex">
<div class="right">
<div class="blog-content d-flex flex-column">
<div class="blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/244/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<p class="mb-1 text-muted">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam adipisci consectetur, est aut nostrum!</p>
<div class="date-mark d-flex">
<div class="blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
<div class="bookmark ml-auto">
<i class="fa-regular fa-bookmark"></i>
</div>
</div>
</div>
</div>
<div class="ms-auto ml-4">
<img src="https://picsum.photos/id/112/200/300" style="height: 160px;width:220px" alt="">
</div>
</div>
<div class="blog d-flex">
<div class="right">
<div class="blog-content d-flex flex-column">
<div class="blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/248/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<p class="mb-1 text-muted">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam adipisci consectetur, est aut nostrum!</p>
<div class="date-mark d-flex">
<div class="blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
<div class="bookmark ml-auto">
<i class="fa-regular fa-bookmark"></i>
</div>
</div>
</div>
</div>
<div class="ms-auto ml-4">
<img src="https://picsum.photos/id/111/200/300" style="height: 160px;width:220px" alt="">
</div>
</div>
<div class="blog d-flex">
<div class="right">
<div class="blog-content d-flex flex-column">
<div class="blog-profile d-flex">
<img class="rounded-circle mt-1" src="https://picsum.photos/id/249/200/300" alt="" style="width: 20px; height: 20px">
<h5 class="ml-2 mt-1" style="font-size:small">Lorem Ipsum</h5>
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, eos!</h2>
<p class="mb-1 text-muted">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam adipisci consectetur, est aut nostrum!</p>
<div class="date-mark d-flex">
<div class="blog-date d-flex text-secondary" style="font-size: small;">
<p>Dec 27</p>
<p class="mx-2 mb-5">.</p>
<p>6 min read</p>
<i class="fa-sharp fa-solid fa-star ml-2 mt-1" style="font-size: 10px;"></i>
</div>
<div class="bookmark ml-auto">
<i class="fa-regular fa-bookmark"></i>
</div>
</div>
</div>
</div>
<div class="ms-auto ml-4">
<img src="https://picsum.photos/id/110/200/300" style="height: 160px;width:220px" alt="">
</div>
</div>
</div>
<!-- Content-Left-End -->
<!-- Content-Right-Start -->
<div class="content-right col-4">
<h2>DISCOVER MORE OF WHAT MATTERS TO YOU</h2>
<div class="buttons row ml-1 mt-3">
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Self</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Relationships</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Data Science</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Programming</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Productivity</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Javascript</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Machine Learning</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Politics</h4></a>
</div>
<div class="button mr-2 mb-2">
<a href="#" class="text-secondary"><h4>Health</h4></a>
</div>
</div>
<div class="see-all my-4">
<a href="#"><h4 class="text-success">See all topics</h4></a>
</div>
<div class="sub-line"></div>
<div class="tags row mt-4">
<a href="#"><h4 class="text-secondary col-2">Help</h4></a>
<a href="#"><h4 class="text-secondary col-2">Status</h4></a>
<a href="#"><h4 class="text-secondary col-2">Writers</h4></a>
<a href="#"><h4 class="text-secondary col-2">Blog</h4></a>
<a href="#"><h4 class="text-secondary col-2">Careers</h4></a>
<a href="#"><h4 class="text-secondary col-2">Privacy</h4></a>
<a href="#"><h4 class="text-secondary col-2">Terms</h4></a>
<a href="#"><h4 class="text-secondary col-2">About</h4></a>
</div>
</div>
<!-- Content-Right-End -->
</div>
</div>
<!-- Content-End -->
</body>
</html>
Raw
style.css
nav {
border-bottom: 1px solid black;
}
.navbar h2 {
font-family: 'PT Serif', serif;
}
.title {
font-family: 'PT Serif', serif;
}
.right .nav-item {
font-size: medium;
}
li a {
color: inherit;
text-decoration: none;
}
.hero-area {
border-bottom: 1px solid black;
}
p a {
text-decoration: underline;
color: inherit;
}
.title {
font-size: 60px;
}
.trends {
border-bottom: 1px solid lightgrey;
}
.trends h2 {
font-size: small;
font-weight: bold;
}
.trend-blog-number {
font-size: 30px;
opacity: 0.2;
}
.trend-blog h2 {
font-size: medium;
}
.blog-content h2 {
font-size: x-large;
font-weight: bold;
}
.fa-bookmark {
opacity: 0.6;
}
.content-right h2 {
font-size: small;
font-weight: bold;
}
.button {
border: 1px solid lightgrey;
border-radius: 3px;
padding: 6px 16px;
}
.button a {
text-decoration: none;
color: inherit;
}
.button h4 {
font-size: small;
margin: 0;
}
.sub-line {
border-bottom: 1px solid lightgrey;
}
.see-all h4 {
font-size: small;
}
.see-all a {
text-decoration: none;
}
.tags h4 {
font-size: small;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment