Kata Kita
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<stle>
@import url('http://fonts.googleapis.com/css?family=Poppins');
:root{
--colorEven: #00a0e3;
--colorOdd: #c3073f
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Poppins',sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: -webkit-linear-gradient(top, #222838 0%, #131621 100%);
}
.container{
width: 1350px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 3rem auto;
padding: 0 1rem;
}
.container .card{
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
background: #fff;
transition: .5s;
}
.container .card:nth-child(even):hover{
box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset,
0px 0px 30px 0px var(--colorEven);
}
.container .card:nth-child(odd):hover{
box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset,
0px 0px 30px 0px var(--colorOdd);
}
.container .card .face{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .card .face.face1{
box-sizing: border-box;
padding: 20px;
text-align: center;
background: #fff;
}
.container .card:nth-child(even) .face.face1 h2, .container .card:nth-child(even) .face.face1 p{
color: var(--colorEven);
}
.container .card:nth-child(odd) .face.face1 h2, .container .card:nth-child(odd) .face.face1 p{
color: var(--colorOdd);
}
.container .card .face.face1 h2{
margin-top: 100px;
margin-bottom: 10px;
display: inline-block;
padding: 0 10px;
border-radius: 30px;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
cursor: pointer;
transition: .3s;
}
.container .card:nth-child(even) .face.face1 h2:hover{
border-left: 3px solid var(--colorEven);
border-right: 3px solid var(--colorEven);
}
.container .card:nth-child(odd) .face.face1 h2:hover{
border-left: 3px solid var(--colorOdd);
border-right: 3px solid var(--colorOdd);
}
.container .card .face.face1 a{
display: inline-block;
text-decoration: none;
padding: 5px 10px;
cursor: pointer;
margin-top: 30px;
transition: .5s;
}
.container .card:nth-child(even) .face.face1 a{
color: var(--colorEven);
border: 2px solid var(--colorEven);
}
.container .card:nth-child(odd) .face.face1 a{
color: var(--colorOdd);
border: 2px solid var(--colorOdd);
}
.container .card:nth-child(even) .face.face1 a:hover{
color: #fff;
background: var(--colorEven);
}
.container .card:nth-child(odd) .face.face1 a:hover{
color: #fff;
background: var(--colorOdd);
}
.container .card .face.face2{
border: 1px solid #fff;
}
.container .card:nth-child(even) .face.face2{
background: var(--colorEven);
transition: .5s;
flex-direction: column;
}
.container .card:nth-child(odd) .face.face2{
background: var(--colorOdd);
transition: .5s;
flex-direction: column;
}
.container .card:hover .face.face2{
height: 80px;
width: 80px;
border-radius: 50%;
top: 40px;
left: 50%;
transform: translateX(-50%);
background: transparent;
}
.container .card:hover .face.face2 h1{
display: none;
}
.container .card:hover .face.face2 h2{
font-size: 2em;
}
.container .card:nth-child(even):hover .face.face2 h2{
color: var(--colorEven);
}
.container .card:nth-child(odd):hover .face.face2 h2{
color: var(--colorOdd);
}
.container .card:nth-child(even):hover .face.face2{
border: 2px solid var(--colorEven);
}
.container .card:nth-child(odd):hover .face.face2{
border: 2px solid var(--colorOdd);
}
.container .card .face.face2 h1{
color: #fff;
margin-top: 25px;
}
.container .card .face.face2 h2{
font-size: 8em;
color: #fff;
transform: .5s;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<h2>Budi Ardianto</h2>
<p>Berhentilah menunda-nunda, setiap waktu adalah sesuatu yang berharga.
</p>
<a href="">Read More</a>
</div>
</div>
<div class="face face2">
<h1>Kalsel</h1>
<h2>01</h2>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<h2>Asbihannor</h2>
<p>Tetaplah rendah hati bahkan ketika sudah berada di puncak.</p>
<a href="">Read More</a>
</div>
</div>
<div class="face face2">
<h1>Kalteng</h1>
<h2>02</h2>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<h2>Tiana Sani</h2>
<p>Lakukanlah sesuatu hari ini yang membuat dirimu berterima kasih di masa depan.
</p>
<a href="">Read More</a>
</div>
</div>
<div class="face face2">
<h1>Kalbar</h1>
<h2>03</h2>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<h2>Bernando Lee</h2>
<p>Ingat tujuan yang kamu inginkan, kejarlah dengan sepenuh hati.</p>
<a href="">Read More</a>
</div>
</div>
<div class="face face2">
<h1>Kaltim</h1>
<h2>04</h2>
</div>
</div>
</div>
</body>
</html>
0 komentar: