index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hancie e-Learning Studio</title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/
libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="topic">CSS Vertical Tabs.</div>
<div class="content">
<input type="radio" name="slider" checked id="home">
<input type="radio" name="slider" id="blog">
<input type="radio" name="slider" id="help">
<input type="radio" name="slider" id="code">
<input type="radio" name="slider" id="about">
<div class="list">
<label for="home" class="home">
<i class="fas fa-home"></i>
<span class="title">Home</span>
</label>
<label for="blog" class="blog">
<span class="icon"><i class="fas fa-blog"></i></span>
<span class="title">Blog</span>
</label>
<label for="help" class="help">
<span class="icon"><i class="far fa-envelope"></i></span>
<span class="title">Help</span>
</label>
<label for="code" class="code">
<span class="icon"><i class="fas fa-code"></i></span>
<span class="title">Code</span>
</label>
<label for="about" class="about">
<span class="icon"><i class="far fa-user"></i></span>
<span class="title">About</span>
</label>
<div class="slider"></div>
</div>
<div class="text-content">
<div class="home text">
<div class="title">Home Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quasi excepturi ducimus sequi dignissimos expedita tempore
omnis quos cum, possimus, aspernatur esse nihil commodi
est maiores dolorum rem iusto atque, beatae voluptas sit
eligendi architecto dolorem temporibus. Non magnam ipsam,
voluptas quasi nam dicta ut. Ad corrupti aliquid
obcaecati alias, nemo veritatis porro nisi eius sequi
dignissimos ea repellendus quibusdam minima ipsum
animi quae, libero quisquam a! Laudantium iste est
sapiente, ullam itaque odio iure laborum voluptatem
quaerat tempore doloremque quam modi, atque minima enim
saepe! Dolorem rerum minima incidunt, officia!</p>
</div>
<div class="blog text">
<div class="title">Home Content</div>
<p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quasi excepturi ducimus sequi dignissimos expedita tempore
omnis quos cum, possimus, aspernatur esse nihil commodi
est maiores dolorum rem iusto atque, beatae voluptas sit
eligendi architecto dolorem temporibus. Non magnam ipsam,
voluptas quasi nam dicta ut. Ad corrupti aliquid
obcaecati alias, nemo veritatis porro nisi eius sequi
dignissimos ea repellendus quibusdam minima ipsum
animi quae, libero quisquam a! Laudantium iste est
sapiente, ullam itaque odio iure laborum voluptatem
quaerat tempore doloremque quam modi, atque minima enim
saepe! Dolorem rerum minima incidunt, officia!</p>
</div>
<div class="help text">
<div class="title">Home Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quasi excepturi ducimus sequi dignissimos expedita tempore
omnis quos cum, possimus, aspernatur esse nihil commodi
est maiores dolorum rem iusto atque, beatae voluptas sit
eligendi architecto dolorem temporibus. Non magnam ipsam,
voluptas quasi nam dicta ut. Ad corrupti aliquid
obcaecati alias, nemo veritatis porro nisi eius sequi
dignissimos ea repellendus quibusdam minima ipsum
animi quae, libero quisquam a! Laudantium iste est
sapiente, ullam itaque odio iure laborum voluptatem
quaerat tempore doloremque quam modi, atque minima enim
saepe! Dolorem rerum minima incidunt, officia!</p>
</div>
<div class="code text">
<div class="title">Home Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quasi excepturi ducimus sequi dignissimos expedita tempore
omnis quos cum, possimus, aspernatur esse nihil commodi
est maiores dolorum rem iusto atque, beatae voluptas sit
eligendi architecto dolorem temporibus. Non magnam ipsam,
voluptas quasi nam dicta ut. Ad corrupti aliquid
obcaecati alias, nemo veritatis porro nisi eius sequi
dignissimos ea repellendus quibusdam minima ipsum
animi quae, libero quisquam a! Laudantium iste est
sapiente, ullam itaque odio iure laborum voluptatem
quaerat tempore doloremque quam modi, atque minima enim
saepe! Dolorem rerum minima incidunt, officia!</p>
</div>
<div class="about text">
<div class="title">Home Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quasi excepturi ducimus sequi dignissimos expedita tempore
omnis quos cum, possimus, aspernatur esse nihil commodi
est maiores dolorum rem iusto atque, beatae voluptas sit
eligendi architecto dolorem temporibus. Non magnam ipsam,
voluptas quasi nam dicta ut. Ad corrupti aliquid
obcaecati alias, nemo veritatis porro nisi eius sequi
dignissimos ea repellendus quibusdam minima ipsum
animi quae, libero quisquam a! Laudantium iste est
sapiente, ullam itaque odio iure laborum voluptatem
quaerat tempore doloremque quam modi, atque minima enim
saepe! Dolorem rerum minima incidunt, officia!</p>
</div>
</div>
</div>
</div>
<style>
@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{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #dad3f8;
}
::selection{
background: #6d50e2;
color: #fff;
}
.container{
max-width: 950px;
width: 100%;
padding: 40px 50px 40px 40px;
background: #fff;
margin: 0 20px;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .topic{
font-size: 30px;
font-weight: 500;
margin-bottom: 20px;
}
.content{
display: flex;
align-items: center;
justify-content: space-between;
}
.content .list{
display: flex;
flex-direction: column;
width: 20%;
margin-right: 50px;
position: relative;
}
.content .list label{
height: 60px;
font-size: 22px;
font-weight: 500;
line-height: 60px;
cursor: pointer;
padding-left: 25px;
transition: all 0.5s ease;
color: #333;
z-index: 12;
}
#home:checked ~ .list label.home,
#blog:checked ~ .list label.blog,
#help:checked ~ .list label.help,
#code:checked ~ .list label.code,
#about:checked ~ .list label.about{
color: #fff;
}
.content .list label:hover{
color: #6d50e2;
}
.content .slider{
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 100%;
border-radius: 12px;
background: #6d50e2;
transition: all 0.4s ease;
}
#home:checked ~ .list .slider{
top: 0;
}
#blog:checked ~ .list .slider{
top: 60px;
}
#help:checked ~ .list .slider{
top: 120px;
}
#code:checked ~ .list .slider{
top: 180px;
}
#about:checked ~ .list .slider{
top: 240px;
}
.content .text-content{
width: 80%;
height: 100%;
}
.content .text{
display: none;
}
.content .text .title{
font-size: 25px;
margin-bottom: 10px;
font-weight: 500;
}
.content .text p{
text-align: justify;
}
.content .text-content .home{
display: block;
}
#home:checked ~ .text-content .home,
#blog:checked ~ .text-content .blog,
#help:checked ~ .text-content .help,
#code:checked ~ .text-content .code,
#about:checked ~ .text-content .about{
display: block;
}
#blog:checked ~ .text-content .home,
#help:checked ~ .text-content .home,
#code:checked ~ .text-content .home,
#about:checked ~ .text-content .home{
display: none;
}
.content input{
display: none;
}
</style>
</body>
</html>
