Merge pull request #6 from JosephMarcell/Perbaikan-homepage,-navlinks…

…,-Stan

Added Stan Option Page

assets/css/app.css

@@ -27,6 +27,77 @@ body {
     margin: 16px 0;
 }
 
+/* homepage */
+.container-fluid.description{
+    background-color: #246871;
+}
+.text1{
+    color: white;
+    font-size: 55px;
+
+}
+.text2{
+    color: #FFA101;
+    font-size: 55px;
+}
+.img_homepage img{
+    margin-left: -55px;
+}
+.stand-c,.location{
+    background-color: #96BDC3;
+}
+.stand-c-container{
+    position: relative;
+    background-color: #FFFFFF;
+    border-radius: 0 30px 0 30px;
+    -webkit-border-radius: 0 30px 0 30px;
+    -moz-border-radius: 0 30px 0 30px;
+    -ms-border-radius: 0 30px 0 30px;
+    -o-border-radius: 0 30px 0 30px;
+}
+.location-container{
+    background-color: #FFFFFF;
+    border-radius: 0 30px 0 30px;
+    -webkit-border-radius: 0 30px 0 30px;
+    -moz-border-radius: 0 30px 0 30px;
+    -ms-border-radius: 0 30px 0 30px;
+    -o-border-radius: 0 30px 0 30px;
+    overflow: hidden;
+}
+.img_location{
+    order: -1;
+}
+.daun{
+    background-color: #246871;
+    width: 200px;
+    height: 60px;
+    border-radius: 0 30px 0 30px;
+    position: absolute;
+    top: -30px;
+    -webkit-border-radius: 0 30px 0 30px;
+    -moz-border-radius: 0 30px 0 30px;
+    -ms-border-radius: 0 30px 0 30px;
+    -o-border-radius: 0 30px 0 30px;
+}
+.daun h2{
+    line-height: 60px;
+    color: white;
+}
+.desc{
+    background-color: #246871;
+    height: 80px;
+}
+.desc p{
+    font-size: 20px;
+
+}
+footer{
+    background-color: #246871;
+    min-height: 100px;
+}
+footer p{
+    color: #96BDC3;
+}
 @media (max-width: 768px) {
     .card {
         width: 400px;

assets/css/styleOpsiStan.css

@@ -0,0 +1,116 @@
+body {
+    background: #045762;
+}
+
+h1 {
+    color: #fff;
+}
+
+.lead {
+    color: #aaa;
+}
+
+.wrapper {
+    margin: 10vh;
+}
+
+/* Post card styles */
+
+.card {
+    border: none;
+    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+    overflow: hidden;
+    border-radius: 20px;
+    min-height: 450px;
+    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
+}
+
+@media (max-width: 768px) {
+    .card {
+        min-height: 350px;
+    }
+}
+
+@media (max-width: 420px) {
+    .card {
+        min-height: 300px;
+    }
+}
+
+.card-has-bg {
+    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+    background-size: 140%;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.card-has-bg:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: inherit;
+    -webkit-filter: grayscale(1);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+.card-has-bg:hover {
+    transform: scale(0.98);
+    box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
+    background-size: 120%;
+    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.card-has-bg:hover .card-img-overlay {
+    transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+    background: rgb(16, 19, 195);
+    background: linear-gradient(0deg, hsl(0, 0%, 100%) 100%, hsl(0, 0%, 100%)  50%);
+}
+
+.card-footer {
+    background: none;
+    border-top: none;
+}
+
+.card-footer .media img {
+    border: solid 3px rgba(255, 255, 255, 0.3);
+}
+
+.card-title {
+    font-weight: 800;
+}
+
+.card-meta {
+    color: rgba(0, 0, 0, 0.3);
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 2px;
+}
+
+.card-body {
+    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.card:hover .card-body {
+    margin-top: 30px;
+    transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+    cursor: pointer;
+    transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.card-img-overlay {
+    transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+    background: rgb(255, 186, 33);
+    background: linear-gradient(0deg, rgba(255, 186, 33, 0.3785889355742297) 0%, rgba(255, 186, 33, 1) 100%);
+}
+
+
+
+@media (max-width: 767px) {
+    /* Add media queries for specific styles if needed */
+}