+
+
+
+
+
+ CONTACT
+ US
+
+
CONTACT INFO : +62 81 314 928 595
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
index 8c3c072..99e62da 100644
--- a/style.css
+++ b/style.css
@@ -1,119 +1,239 @@
-* {
- margin: 0;
- padding: 0;
-}
-
-body {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background: #1d1e2c;
-}
-
-.wave{
- height: 306px;
- width: 306px;
- transform-style: preserve-3d;
- transform: perspective(500px) rotateX(60deg);
-}
-
-.wave span{
- position: absolute;
- display: block;
- border: 3px solid #00802A;
- border-radius: 50%;
- box-shadow: 0 5px 0 #014d1a;
- animation: animate 3s ease-in-out infinite;
-}
-
-@keyframes animate {
- 0%,100%{
- transform:translateZ(-100px);
- }
- 50%{
- transform: translateZ(100px);
- }
-}
-
-.wave span:nth-child(1), .wave span:nth-child(5), .wave span:nth-child(9), .wave span:nth-child(13) {
- border-color: #F8F2FF;
- box-shadow: 0 5px 0 #c5c2c9;
-}
-.wave span:nth-child(2), .wave span:nth-child(6), .wave span:nth-child(10), .wave span:nth-child(14) {
- border-color: #3FC1C9;
- box-shadow: 0 5px 0 #339da3;
-}
-.wave span:nth-child(3), .wave span:nth-child(7), .wave span:nth-child(11), .wave span:nth-child(15) {
- border-color: #FC5185;
- box-shadow: 0 5px 0 #c53963;
-}
-.wave span:nth-child(4), .wave span:nth-child(8), .wave span:nth-child(12), .wave span:nth-child(16) {
- border-color: #5d23a4;
- box-shadow: 0 5px 0 #4b247a;
-}
-
-.wave span:nth-child(1){
- inset: 0;
- animation-delay: 1.6s;
-}
-.wave span:nth-child(2){
- inset: 10px;
- animation-delay: 1.5s;
-}
-.wave span:nth-child(3){
- inset: 20px;
- animation-delay: 1.4s;
-}
-.wave span:nth-child(4){
- inset: 30px;
- animation-delay: 1.3s;
-}
-.wave span:nth-child(5){
- inset: 40px;
- animation-delay: 1.2s;
-}
-.wave span:nth-child(6){
- inset: 50px;
- animation-delay: 1.1s;
-}
-.wave span:nth-child(7){
- inset: 60px;
- animation-delay: 1s;
-}
-.wave span:nth-child(8){
- inset: 70px;
- animation-delay: 0.9s;
-}
-.wave span:nth-child(9){
- inset: 80px;
- animation-delay: 0.8s;
-}
-.wave span:nth-child(10){
- inset: 90px;
- animation-delay: 0.7s;
-}
-.wave span:nth-child(11){
- inset: 100px;
- animation-delay: 0.6s;
-}
-.wave span:nth-child(12){
- inset: 110px;
- animation-delay: 0.5s;
-}
-.wave span:nth-child(13){
- inset: 120px;
- animation-delay: 0.4s;
-}
-.wave span:nth-child(14){
- inset: 130px;
- animation-delay: 0.3s;
-}
-.wave span:nth-child(15){
- inset: 140px;
- animation-delay: 0.2s;
-}
-.wave span:nth-child(16){
- inset: 150px;
- animation-delay: 0.1s;
-}
\ No newline at end of file
+
+*, *:before, *:after {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ body {
+ background: linear-gradient(to right, #ea1d6f 0%, #eb466b 100%);
+ font-size: 12px;
+ }
+
+ body, button, input {
+ font-family: 'Montserrat', sans-serif;
+ font-weight: 700;
+ letter-spacing: 1.4px;
+ }
+
+ .background {
+ display: flex;
+ min-height: 100vh;
+ }
+
+ .container {
+ flex: 0 1 700px;
+ margin: auto;
+ padding: 10px;
+ }
+
+ .screen {
+ position: relative;
+ background: #3e3e3e;
+ border-radius: 15px;
+ }
+
+ .screen:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 20px;
+ right: 20px;
+ bottom: 0;
+ border-radius: 15px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
+ z-index: -1;
+ }
+
+ .screen-header {
+ display: flex;
+ align-items: center;
+ padding: 10px 20px;
+ background: #4d4d4f;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+ }
+
+ .screen-header-left {
+ margin-right: auto;
+ }
+
+ .screen-header-button {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ margin-right: 3px;
+ border-radius: 8px;
+ background: white;
+ }
+
+ .screen-header-button.close {
+ background: #ed1c6f;
+ }
+
+ .screen-header-button.maximize {
+ background: #e8e925;
+ }
+
+ .screen-header-button.minimize {
+ background: #74c54f;
+ }
+
+ .screen-header-right {
+ display: flex;
+ }
+
+ .screen-header-ellipsis {
+ width: 3px;
+ height: 3px;
+ margin-left: 2px;
+ border-radius: 8px;
+ background: #999;
+ }
+
+ .screen-body {
+ display: flex;
+ }
+
+ .screen-body-item {
+ flex: 1;
+ padding: 50px;
+ }
+
+ .screen-body-item.left {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .app-title {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ color: #ea1d6f;
+ font-size: 26px;
+ }
+
+ .app-title:after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 0;
+ bottom: -10px;
+ width: 25px;
+ height: 4px;
+ background: #ea1d6f;
+ }
+
+ .app-contact {
+ margin-top: auto;
+ font-size: 8px;
+ color: #888;
+ }
+
+ .app-form-group {
+ margin-bottom: 15px;
+ }
+
+ .app-form-group.message {
+ margin-top: 40px;
+ }
+
+ .app-form-group.buttons {
+ margin-bottom: 0;
+ text-align: right;
+ }
+
+ .app-form-control {
+ width: 100%;
+ padding: 10px 0;
+ background: none;
+ border: none;
+ border-bottom: 1px solid #666;
+ color: #ddd;
+ font-size: 14px;
+ text-transform: uppercase;
+ outline: none;
+ transition: border-color .2s;
+ }
+
+ .app-form-control::placeholder {
+ color: #666;
+ }
+
+ .app-form-control:focus {
+ border-bottom-color: #ddd;
+ }
+
+ .app-form-button {
+ background: none;
+ border: none;
+ color: #ea1d6f;
+ font-size: 14px;
+ cursor: pointer;
+ outline: none;
+ }
+
+ .app-form-button:hover {
+ color: #b9134f;
+ }
+
+ .credits {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 20px;
+ color: #ffa4bd;
+ font-family: 'Roboto Condensed', sans-serif;
+ font-size: 16px;
+ font-weight: normal;
+ }
+
+ .credits-link {
+ display: flex;
+ align-items: center;
+ color: #fff;
+ font-weight: bold;
+ text-decoration: none;
+ }
+
+ .dribbble {
+ width: 20px;
+ height: 20px;
+ margin: 0 5px;
+ }
+
+ @media screen and (max-width: 520px) {
+ .screen-body {
+ flex-direction: column;
+ }
+
+ .screen-body-item.left {
+ margin-bottom: 30px;
+ }
+
+ .app-title {
+ flex-direction: row;
+ }
+
+ .app-title span {
+ margin-right: 12px;
+ }
+
+ .app-title:after {
+ display: none;
+ }
+ }
+
+ @media screen and (max-width: 600px) {
+ .screen-body {
+ padding: 40px;
+ }
+
+ .screen-body-item {
+ padding: 0;
+ }
+ }
+
+
+
\ No newline at end of file
+