commit 4885274a04c8676dc62ce9145e1a53c79da45980 Author: Dyzulk Developer <136977118+dyzcdn@users.noreply.github.com> Date: Sun Oct 15 11:37:17 2023 +0700 Add files via upload diff --git a/index.html b/index.html new file mode 100644 index 0000000..9f02eb1 --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + Muhammad Herdy Iskandar + + + + + + + + +
+
+ +

Welcome to Dyzulk's!

+
+
+ + + Facebook + + + + Instagram + + + + Twitter + + + + LinkedIn + + + + GitHub + +
+ +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c92f878 --- /dev/null +++ b/style.css @@ -0,0 +1,219 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'SF Pro Display', sans-serif; + color: aliceblue; +} + +@media (min-width: 993px) { + .container { + max-width: 40%; + } + + .glass-button { + padding: 13px 18px; + } +} + +@media (max-width: 992px) { + .container { + min-width: 50%; + } + + .glass-button { + padding: 13px 14px; + } +} + +@media (max-width: 768px) { + .container { + min-width: 70%; + } + + .glass-button { + padding: 13px 14px; + } +} + +@media (max-width: 580px) { + .container { + min-width: 90%; + } + + .glass-button { + padding: 8px 10px; + } +} + +.main { + background-image: url(https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + height: 110vh; + padding: 10% 0; + + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; +} + +.dev-margin { + margin: 16px !important +} + +.dev-margin-top { + margin-top: 16px !important +} + +.dev-margin-bottom { + margin-bottom: 16px !important +} + +.dev-margin-left { + margin-left: 16px !important +} + +.dev-margin-right { + margin-right: 16px !important +} + +.container { + width: 50%; + margin: auto; + padding: 20px 0; + background-color: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: column; + align-items: center; +} + +.bungkus { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.glass-panel { + max-width: 600px; + align-items: center; +} + +.glass-panel { + color: #fff; + margin: 40px auto; + background-color: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.1); + width: 100%; + border-radius: 15px; + padding: 32px; + backdrop-filter: blur(10px); +} + +.form-title { + font-family: 'SF Pro Display Black', sans-serif; + color: aliceblue; + max-width: 85%; + font-size: 30px; + text-align: center; + + margin: 5px 15px; + padding: 20px 0 20px 0; +} + +.form-group { + margin-bottom: 20px; +} + +.form-group label { + font-weight: 500; +} + +.glass-button { + margin: 8px 0; + width: 75%; + text-align: center; +} + +.glass-button { + display: inline-block; + text-decoration: none; + border-radius: 15px; + background-color: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(30px); + border: 1px solid rgba(255, 255, 255, 0.1); + border: 0; + + font-size: 18px; + color: rgba(255, 255, 255, 0.8); + letter-spacing: 2px; + cursor: pointer; +} + +.glass-button:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +.glass-button i { + margin-right: 5px; + font-size: 18px; +} + +.input { + width: 100%; + padding: 10px; + background-color: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 10px; + outline: none; + transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; + color: white; +} + +.input:focus { + border-color: #0e767e; + box-shadow: 0 0 10px rgba(9, 93, 114, 0.5); +} + +.select-option { + background-color: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + color: rgb(10, 52, 68); + font-size: 16px; + border: none; + outline: none; +} + +.select-option:checked { + background-color: #49545f; + color: white; +} + + +.submit { + margin: auto; + margin-top: 20px; +} + +.footer { + margin-top: 20px; + margin-bottom: 10px; +} + +.footer { + font-size: 11px; + text-align: center; + color: rgba(255, 255, 255, 0.5); +} + +.footer a { + text-decoration: none; +} \ No newline at end of file