*,
html,
body{
padding: 0;
margin: 0;
font-family: Lato, sans-serif;
}
/* Latar Header */
.latar-header{
width: 100%;
background-image: url('https://img.freepik.com/free-vector/circles-background-dark-tones_60389-166.jpg?semt=ais_hybrid');
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
}
.latar-header-container{
background-color: rgba(0, 0, 0, 0.308);
}
/* Latar Header */
/* Navbar START */
header{
width: 100%;
}
header nav{
padding: 20px;
}
header nav ul{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
header nav ul li{
list-style-type: none;
align-content: center;
}
/* Judul */
header nav ul li .judul{
color: white;
font-weight: 700;
}
/* Judul */
/* Link */
header nav ul li a{
color: rgb(207, 207, 207);
text-decoration: none;
margin: 10px;
}
/* Link */
/* Navbar END */
/* Hero START */
.hero{
width: 100%;
}
.hero .container{
padding: 10px;
}
.hero .container ul{
display: flex;
justify-content: center;
}
.hero .container ul .flex{
margin: 50px auto;
padding: 10px;
}
/* Tags */
.hero .container ul .tags{
display: flex;
}
.hero .container ul .tags p{
color: #fff;
font-weight: 700;
background-color: #b6b6b66c;
padding: 6px;
border-radius: 6px;
margin-right: 10px;
}
/* Tags */
/* Judul */
.hero .container ul .flex .judul-hero{
font-size: 2rem;
color: #fff;
margin: 20px 0;
}
/* Judul */
/* History */
.hero .container ul .flex .history{
color: rgba(255, 255, 255, 0.658);
font-size: 1rem;
}
.hero .container ul .flex .history .group{
display: flex;
}
.hero .container ul .flex .history .group p{
margin: 0 20px 10px 0;
}
/* History */
/* Hero END */
/* Latar Main START */
.latar-main{
background-color: #111014;
}
.latar-main-container{
padding: 10px;
}
/* Latar Main END */
/* Main START */
main{
width: 100%;
}
main .container{
padding: 20px;
}
main .container ul{
display: block;
}
/* Main END */
/* Sidebar START */
aside{
width: 100%;
/* background-color: #1D1E22; */
flex: 1;
order: 2;
}
aside .container{
padding: 10px;
}
/* Card 1 */
aside .container .card-1{
background-color: white;
border-radius: 12px;
padding: 20px;
display: flex;
justify-content: center;
}
/* Profile */
aside .container .card-1 img{
min-width: 100px;
max-width: 300px;
min-height: 100px;
max-height: 200px;
object-fit: cover;
}
/* Profile */
/* Information */
aside .container .card-1 .information{
padding: 10px;
min-width: 100px;
max-width: 200px;
} aside .container .card-1 .information h3{
font-size: 1.2rem;
margin-bottom: 5px;
}
aside .container .card-1 .information .group{
font-size: 14.5px;
padding: 5px;
}
/* Link */
aside .container .card-1 .information .group a{
color: black;
} aside .container .card-1 .information .group a:hover{
opacity: 50%;
}
/* Link */
/* Information */
/* Card 1 */
/* Card 2 */
.card-2{
width: 100%;
background-color: #fff;
border-radius: 12px;
margin-top: 10px;
}
.card-2 .container{
padding: 10px;
}
.card-2 .container h4{
color: black;
margin: 0 0 0 10px;
}
/* Card 2 */
/* Card 3 */
.card-3{
width: 100%;
background-color: #fff;
border-radius: 12px;
margin-top: 10px;
}
.card-3 .container{
padding: 10px;
}
/* h3 */
.card-3 .container h3{
color: black;
}
/* h3 */
.card-3 .container ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Child 1 */
.card-3 .container ul .child-1{
width: 100%;
padding: 10px;
}
/* link */
.card-3 .container ul .child-1 a{
color: black;
text-decoration: none;
display: flex;
}.card-3 .container ul .child-1 a:hover{
opacity: 50%;
}
/* link */
/* img */
.card-3 .container ul .child-1 img{
min-width: 50px;
max-width: 100px;
min-height: 100px;
max-height: 200px;
object-fit: cover;
}
/* img */
/* p */
.card-3 .container ul .child-1 p{
color: black;
align-content: center;
margin: 0 0 0 10px;
}
/* p */
/* Child 1 */
/* Child 2 */
.card-3 .container ul .child-2{
width: 100%;
padding: 10px;
}
/* link */
.card-3 .container ul .child-2 a{
color: black;
text-decoration: none;
display: flex;
}.card-3 .container ul .child-2 a:hover{
opacity: 50%;
}
/* link */
/* img */
.card-3 .container ul .child-2 img{
min-width: 50px;
max-width: 100px;
min-height: 100px;
max-height: 200px;
object-fit: cover;
}
/* img */
/* p */
.card-3 .container ul .child-2 p{
color: black;
align-content: center;
margin: 0 0 0 10px;
}
/* p */
/* Child 2 */
/* Child 3 */
.card-3 .container ul .child-3{
width: 100%;
padding: 10px;
}
/* link */
.card-3 .container ul .child-3 a{
color: black;
text-decoration: none;
display: flex;
}.card-3 .container ul .child-3 a:hover{
opacity: 50%;
}
/* link */
/* img */
.card-3 .container ul .child-3 img{
min-width: 50px;
max-width: 100px;
min-height: 100px;
max-height: 200px;
object-fit: cover;
}
/* img */
/* p */
.card-3 .container ul .child-3 p{
color: black;
align-content: center;
margin: 0 0 0 10px;
}
/* p */
/* Child 3 */
/* Child 4 */
.card-3 .container ul .child-4{
width: 100%;
padding: 10px;
}
/* link */
.card-3 .container ul .child-4 a{
color: black;
text-decoration: none;
display: flex;
}.card-3 .container ul .child-4 a:hover{
opacity: 50%;
}
/* link */
/* img */
.card-3 .container ul .child-4 img{
min-width: 50px;
max-width: 100px;
min-height: 100px;
max-height: 200px;
object-fit: cover;
}
/* img */
/* p */
.card-3 .container ul .child-4 p{
color: black;
align-content: center;
margin: 0 0 0 10px;
}
/* p */
/* Child 4 */
/* Card 3 */
/* Sidebar END */
/* Article START */
article{
width: 100%;
background-color: #1d1e228f;
flex: 3;
order: 1;
border-radius: 12px;
}
article .container{
padding: unset;
/* padding: 20px; */
}
/* About START */
article .container .about{
background-color: #21232A;
padding: unset;
/* padding: 20px; */
border-radius: 12px;
border: 1px solid rgba(128, 128, 128, 0.582);
overflow: hidden;
}
/* h2 */
article .container .about h2{
color: #fff;
margin: 0 0 10px 10px;
}
/* h2 */
article .container .about ul{
background-color: rgba(0, 0, 0, 0.493);
/* padding: unset; */
padding: 20px;
}
article .container ul .group{
min-width: 100px;
max-width: 800px;
}
/* h3 */
article .container ul .group h3{
color: #b6b6b6d2;
font-size: 1.3rem;
text-align: left;
}
/* h3 */
/* p */
article .container .about ul .group p{
color: #b6b6b6d2;
margin: 10px 20px 10px 0;
}
/* p */
/* img */
article .container .about ul img{
min-width: 50%;
max-width: 100%;
min-height: 100px;
max-height: 200px;
object-fit: contain;
}
/* img */
/* Language and Tools*/
/* h3 */
article .container .about ul h3{
color: #b6b6b6d2;
}
/* h3 */
article .container .about ul .language-and-tools{
padding: 10px;
}
article .container .about ul .language-and-tools .language{
display: flex;
justify-content: right;
flex-wrap: wrap;
}
/* img */
article .container .about ul .language-and-tools .language img{
min-width: 50px;
max-width: 100px;
min-height: 50px;
max-height: 50px;
object-fit: cover;
}
/* img */
article .container .about ul .language-and-tools .tools{
display: flex;
justify-content: right;
flex-wrap: wrap;
}
/* img */
article .container .about ul .language-and-tools .tools img{
min-width: 50px;
max-width: 100px;
min-height: 50px;
max-height: 50px;
object-fit: cover;
}
/* img */
/* Language and Tools*/
/* About END */
/* Gallery START */
article .container .gallery{
background-color: #21232A;
padding: unset;
/* padding: 20px; */
border-radius: 12px;
border: 1px solid rgba(128, 128, 128, 0.582);
overflow: hidden;
margin: 40px 0 40px 0;
}
/* h2 */
article .container .gallery h2{
color: #fff;
margin: 0 0 10px 10px;
}
/* h2 */
article .container .gallery ul{
background-color: rgba(0, 0, 0, 0.493);
/* padding: unset; */
padding: 20px;
}
article .container .gallery ul .group{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Child 1 */
.child-g-1{
background-color: white;
padding: 10px;
margin: 10px;
}
/* Img */
.child-g-1 img{
min-width: 50%;
max-width: 100%;
min-height: 100px;
max-height: 400px;
object-fit: cover;
border: 1px solid black;
}
/* Img */
/* Content */
.child-g-1 .content{
/* 1200 vp */
min-width: 50%;
max-width: 100%;
/* 1200 vp */
padding: 10px;
}
/* Content */
/* h3 */
.child-g-1 .content h3{
color: black;
}
/* h3 */
/* p */
.child-g-1 .content p{
color: black;
}
/* p */
/* a */
.child-g-1 .content a{
color: black;
text-decoration: none;
margin: 0 10px 0 0;
transition: all ease-in 210ms;
float: right;
}
.child-g-1 .content a:hover{
color: red;
transition: all ease-in-out 512ms;
}
.child-g-1 .content a i{
color: red;
font-size: 14px;
margin: 0 0 0 3px;
transition: all ease-in 510ms; }
.child-g-1 .content a:hover i{
color: black;
margin: 0 0 0 10px;
transition: all ease-in-out 512ms; }
/* a */
/* Child 1 */
/* Gallery END */
/* Article END */
/* Footer START */
footer{
width: 100%;
background-color: white;
}
footer .container{
padding: 20px;
}
footer .container ul{
display: flex;
justify-content: center;
}
footer .container ul p{
color: black;
}
/* Footer END */
/* Responsive START */
@media( min-width: 400px){
main .container{
padding: unset;
}
article .container{
padding: 20px;
}
/* About */
article .container .about{
padding: 20px;
}
article .container .about ul{
padding: 20px;
}
/* About */
/* Gallery */
article .container .gallery{
padding: 20px;
}
article .container .gallery ul{
padding: 20px;
}
/* Gallery */
article .container .about ul img{
min-width: 50%;
max-width: 100%;
min-height: 100px;
min-height: 50px;
object-fit: cover;
}
}
@media( min-width: 700px){
main .container ul{
display: block;
}
}
@media( min-width: 900px){
main .container ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}
@media( min-width: 1200px){
main .container{
padding: 50px;
}
main .container ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Article */
aside .container{
position: sticky;
}
/* Article */
article .container{
padding: 40px;
}
.child-g-1 .content{
min-width: 100px;
max-width: 300px;
}
.child-g-1 img{
min-width: 100px;
max-width: 300px;
}
}
/* Responsive END */