Tugas 2

H071211051/Tugas2/style.css

@@ -0,0 +1,234 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  background-color: #f2f2f2;
+}
+
+a {
+  text-decoration: none !important;
+}
+
+li {
+  list-style: none;
+}
+
+.navbar {
+  display: flex;
+  position:fixed;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #333333;
+  color: #bfbfbf;
+}
+
+.navbar a {
+  color: #bfbfbf !important;
+}
+
+.logo {
+  font-size: 32px;
+  font-family: Aprilia;
+}
+
+.menu {
+  display: flex;
+  overflow: auto;
+  gap: 1em;
+  font-size: 18px;
+}
+
+.menu li:hover {
+  background-color: #8b324d;
+  color: #bfbfbf;
+
+}
+
+.menu li {
+  padding: 5px 14px;
+}
+
+.jumbotron {
+  width: 100%;
+  height: 700px;
+  margin: 0;
+  padding: 150px;
+  text-align: center;
+  background-color: #808080;
+  color: #8b324d;
+  background-image: url(/Tugas2/image/header.png);
+  background-attachment: fixed;
+  background-size: auto 100%;
+  font-size: 50px;
+  background-blend-mode: darken;
+  background-position: center;
+}
+
+@font-face {
+  font-family: James-Stroker;
+  src: url(/Tugas2/font/James-Stroker.ttf);
+}
+@font-face {
+  font-family: Aprilia;
+  src: url(/Tugas2/font/Aprilia.otf);
+}
+
+.h2-header {
+  font-family: James-Stroker;
+  font-size: 95px;
+  text-align: center;
+}
+
+.container {
+  width: 100%;
+  height: 500px;
+  margin: 0 auto;
+  overflow: auto;
+}
+
+.left-content {
+  text-align: justify;
+  width: 50%;
+  height: 100px;
+  background-color: #f2f2f2;
+  float: left;
+  padding-right: 50px;
+
+}
+
+.right-content {
+  text-align: justify;
+  width: 50%;
+  height: 100px;
+  background-color: #f2f2f2;
+  float: right;
+}
+
+
+.table {
+  margin: 0;
+  margin-bottom: 0;
+  padding: 80px;
+}
+
+h2 {
+  text-align: center;
+  margin: 50px;
+}
+
+.title {
+  text-align: center;
+
+}
+
+.galery {
+  margin-top: 0;
+  margin: 20px;
+  float: left;
+  width: 220px;
+  gap: 5px;
+  box-sizing: border-box;
+  border: 1px solid #bfbfbf;
+  border-radius: 8px;
+  flex: auto;
+}
+
+.galery:hover {
+  box-sizing: border-box;
+  /* transform: scale(1.1); */
+  border: 1px solid #8b324d;
+  /* margin-top: 0.5px; */
+}
+
+.galery-img {
+  width: 100%;
+  height: 80%;
+  border-radius: 8px;
+  transition: 2s;
+}
+
+.desc {
+  font-size: 15px;
+  padding: 20px;
+  text-align: center;
+}
+
+.desc p {
+  text-align: justify;
+  font-size: small;
+  width: 100%;
+}
+
+.flex-container {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 10px;
+  text-align: center;
+  margin: 24px;
+}
+
+
+h3 {
+  font-family: Aprilia;
+  font-size: 30px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+
+}
+
+.column {
+  flex: 25%;
+  max-width: 25%;
+  padding: 0 4px;
+}
+
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+  width: 100%;
+  filter: brightness(50%);
+  filter: blur(20%);
+
+}
+
+@media screen and (max-width: 800px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .column {
+    flex: 100%;
+    max-width: 100%;
+  }
+  .h2-header {
+    font-size: 80px;
+  }
+}
+
+
+
+.div h2 {
+  margin: 100px;
+  display: flex;
+}
+
+