Latihan css
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. HTML dan CSS memiliki keterikatan yang erat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selamat datang di latihan css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="list">
<h2>Daftar warna dengan CSS</h2>
<ul>
<li><span class="a">INI ADALAH WARNA MERAH</span></li>
<li><span class="b">INI ADALAH WARNA KUNING</span></li>
<li><span class="c">INI ADALAH WARNA HIJAU</span></li>
<li><span class="d">INI ADALAH WARNA BIRU</span></li>
<li><span class="e">INI ADALAH WARNA PINK</span></li>
<li><span class="f">INI ADALAH WARNA UNGU</span></li>
</ul>
</div>
</body>
</html>
body
{
display: flex;
justify-content: center;
align-items: 100vh;
background: #000;
margin: 0;
padding: 0;
font-family: 'poppins',sans-serif;
}
.list
{
position: relative;
}
.list h2
{
position: relative;
color: white;
}
.list ul
{
position: relative;
}
.list ul li{
position: relative;
left: 0;
list-style: none;
margin: 4px 0;
border-left: 2px solid #24ff0b;
transition: 3s;
cursor: not-allowed;
}
.list ul li::before
{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #000;
transform: scaleX(0);
transform-origin: left;
transition: 0.5s;
}
.list ul li::before
{
transform: scaleX(1);
}
.list ul li:hover{
left: 10px;
}
.list ul li span
{
position: relative;
padding: 8px;
display: inline-block;
z-index: 1;
transition: 0.5s;
}
.a
{
color: red;
}
.b
{
color: yellow;
}
.c
{
color: green;
}
.d
{
color: blue;
}
.e
{
color: pink;
}
.f
{
color: purple;
}
Komentar
Posting Komentar