stylesheet.css

* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
  position: absolute;
}

a {
  text-decoration: none;
}

/* Header/logo Title */
.header {
  padding: 20px 0 0 0;
  text-align: center;
  background: url("bintang1.jpg");
  background-size: cover;
}



.gradient-text {
  font-size: 70px;
  font-family: "Archivo Black", sans-serif;

  background-color: red;

  background-image: linear-gradient(45deg, #f3ec78, #af4261);

  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  /* animation header*/
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
}

/* Style the top navigation bar */
.navbar {
  display: flex;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
  font-family: "Archivo Black", sans-serif;
  border-radius: 5px;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  overflow: hidden;
  position: relative;
  flex: 30%;
  padding: 20px;
}

.side-bg {
  background: url("spacex4.jpg");
  background-size: cover;
  opacity: 0.4;
  position: absolute;
  left: 0;
  top: 0;
  width: 700px;
  height: 100%;
  padding-left: 100%;
}

.side-content {
  position: relative;
}

.logo-nama:hover {
  color: #ff8b1f;
  text-decoration: none;
}

.side h1{
  text-align: center;
  font-family: "Archivo Black", sans-serif;
}

.logo-nama-lengkap:hover{
  color: #ff8b1f;
  text-decoration: none;
}
  
.zoom-effect {  
  position: relative;
  width: 200px;
  height: 268px;
  margin: auto;
  overflow: hidden;  
}
 
.kotak {
  position: absolute;
  top: 0;
  left: 0;
}
 
.kotak img {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  width: 200px;
  height: 268px;
  margin: auto;
}
 
.zoom-effect:hover .kotak img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

.side p {
  text-align: justify;
}
.side p:hover {
  color: #ff8b1f;
  text-decoration: none;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  height: 130px;
  padding: 20px;
  background-image: url("bintang1.jpg");
  background-size: cover;
}

.footer-logo {
  float: left;
  color: white;
  font-size: 25px;
}

.logo-item {
  text-decoration: underline;
  text-decoration-color: #eb780d;
}

.logo-item:hover {
  color: #ff8b1f;
  text-decoration: none;
  font-style: italic;
}

.footer-list {
  float: right;
}

.footer-list li {
  padding-bottom: 6px;
  list-style-type: none;
}
.btn {
  padding: 12px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
}
/* Tambahkan CSS untuk instagram */
.instagram {
  background-color: indigo;
  margin-right: 10px;
}
/* Tambahkan CSS untuk facebook */
.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}
/* Tambahkan CSS untuk twitter */
.twitter {
  background-color: #55acee;
}
/* Tambahkan CSS untuk btn-wrapper */
.btn-wrapper {
  margin: 20px 0px;
}
/* Tambahkan CSS untuk tag <p> didalam class btn-wrapper */
.btn-wrapper p {
  margin: 10px 0px;
}
.fa {
  margin-right: 5px;
}

.li-item:hover a {
  color: #ff8b1f;
  font-style: italic;
}

.footer-list-a {
  float: right;
  display: none;
}

.footer-list-a a{
  width: 60px;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 743px) {
  .row,
  .navbar {
    flex-direction: column;
  }
  .slide {
    width: 100%;
  }
  .footer-list {
    display: none;
  }
  .footer-list-a{
    display: block;
  }
}

/* animation header awal*/
@keyframes fadein {
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
      opacity:0;
  }
  to {
      opacity: 1;
  }
}
/* animation header akhir*/

/*awal code slider untuk gambar SpaceX*/
.slide {
  max-width: auto;
  height: 300px;
  width: 700px;
  position: relative;
  margin-bottom :50px;
}

.slide1, .slide2, .slide3 {
  position:absolute;
  width: 700px;
  height: 100%;
}
.slide1 {
  background: url("spacex.jpg") no-repeat center;
  background-size: cover;
  animation: fade 8s infinite;
  -webkit-animation: fade 8s infinite;
}
.slide2 {
  background: url("spacex2.jpg") no-repeat center;
  background-size: cover;
  animation: fade2 8s infinite;
  -webkit-animation: fade2 8s infinite;
}
.slide3 {
  background: url("spacex3.jpg") no-repeat center;
  background-size: cover;
  animation: fade3 8s infinite;
  -webkit-animation: fade3 8s infinite;
}
@keyframes fade {
  0%{ opacity: 1;}
  33.333%{ opacity: 0;}
  66.666%{ opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes fade2 {
  0%{ opacity: 0;}
  33.333%{ opacity: 1;}
  66.666%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes fade3 {
  0%{ opacity: 0;}
  33.333%{ opacity: 0;}
  66.666%{ opacity: 1;}
  100%{ opacity: 0;}
}
/* akhir slider untuk gambar SpaceX */
.slide-1 { /*awal slide untuk tesla */
  max-width: auto;
  height: 300px;
  width: 700px;
  position: relative;
  margin: 50px 0;
}

.tesla1, .tesla2, .tesla3 {
  position:absolute;
  width: 700px;
  height: 100%;
}
.tesla1 {
  background: url("Tesla1.jpg") no-repeat center;
  background-size: cover;
  animation: fade4 8s infinite;
  -webkit-animation: fade 8s infinite;
}
.tesla2 {
  background: url("Tesla2.jpg") no-repeat center;
  background-size: cover;
  animation: fade5 8s infinite;
  -webkit-animation: fade2 8s infinite;
}
.tesla3 {
  background: url("Tesla3.jpg") no-repeat center;
  background-size: cover;
  animation: fade6 8s infinite;
  -webkit-animation: fade3 8s infinite;
}
@keyframes fade4 {
  0%{ opacity: 1;}
  33.333%{ opacity: 0;}
  66.666%{ opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes fade5 {
  0%{ opacity: 0;}
  33.333%{ opacity: 1;}
  66.666%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes fade6 {
  0%{ opacity: 0;}
  33.333%{ opacity: 0;}
  66.666%{ opacity: 1;}
  100%{ opacity: 0;}
}
/* akhir slide untuk tesla */
.slide-2 { /*awal slide untuk the boring company */
  max-width: auto;
  height: 300px;
  width: 700px;
  position: relative;
  margin: 50px 0;
}

.boring1, .boring2, .boring3 {
  position:absolute;
  width: 700px;
  height: 100%;
}
.boring1 {
  background: url("boring 1.jpg") no-repeat center;
  background-size: cover;
  animation: fade7 8s infinite;
  -webkit-animation: fade 8s infinite;
}
.boring2 {
  background: url("boring 2.jpg") no-repeat center;
  background-size: cover;
  animation: fade8 8s infinite;
  -webkit-animation: fade2 8s infinite;
}
.boring3 {
  background: url("boring 3.jpg") no-repeat center;
  background-size: cover;
  animation: fade9 8s infinite;
  -webkit-animation: fade3 8s infinite;
}
@keyframes fade7 {
  0%{ opacity: 1;}
  33.333%{ opacity: 0;}
  66.666%{ opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes fade8 {
  0%{ opacity: 0;}
  33.333%{ opacity: 1;}
  66.666%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes fade9 {
  0%{ opacity: 0;}
  33.333%{ opacity: 0;}
  66.666%{ opacity: 1;}
  100%{ opacity: 0;}
}
/* akhir slide untuk the boring company */
.slide-3 { /*awal slide untuk musk foundation */
  max-width: auto;
  height: 250px;
  width: 700px;
  position: relative;
  margin: 50px 0;
}
.musk1, .musk2, .musk3 {
  position:absolute;
  width: 700px;
  height: 100%;
}
.musk1 {
  background: url("musk 1.jpg") no-repeat center;
  background-size: cover;
  animation: fade10 8s infinite;
  -webkit-animation: fade 8s infinite;
}
.musk2 {
  background: url("musk 2.jpg") no-repeat center;
  background-size: cover;
  animation: fade11 8s infinite;
  -webkit-animation: fade2 8s infinite;
}
.musk3 {
  background: url("musk 3.jpg") no-repeat center;
  background-size: cover;
  animation: fade12 8s infinite;
  -webkit-animation: fade3 8s infinite;
}
@keyframes fade10 {
  0%{ opacity: 1;}
  33.333%{ opacity: 0;}
  66.666%{ opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes fade11 {
  0%{ opacity: 0;}
  33.333%{ opacity: 1;}
  66.666%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes fade12 {
  0%{ opacity: 0;}
  33.333%{ opacity: 1;}
  66.666%{ opacity: 0;}
  100%{ opacity: 0;}
}

p {
  text-align: justify;
}
/*akhir slide untuk musk foundation */