diff --git a/style.css b/style.css new file mode 100644 index 0000000..e098f0a --- /dev/null +++ b/style.css @@ -0,0 +1,160 @@ +* { + font-family: 'Questrial'; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +h1, h2, h3, .poppins { + font-family: 'Questrial'; +} + +/* questrial-regular - latin_latin-ext_vietnamese */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Questrial'; + font-style: normal; + font-weight: 400; + src: url('./fonts/questrial-v19-latin_latin-ext_vietnamese-regular.woff2') format('woff2'); Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +body { + color: white; + position: relative; + justify-content: center; + gap: 42px; + padding: 20px 14px; + min-height: 100vh; + overflow-y: scroll; +} + +.backgroundImg { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + z-index: -2; + +} + +.backgroundImg img { + width: 100%; + height: 100%; + object-fit: cover; +} + +header { + + text-align: center; + gap: 14px; +} + +body, header, main, .backgroundImg { + display: flex; + flex-direction: column; +} + +header img { + max-width: 350px; + width: 100%; + margin: 0 auto; + border-radius: 0%; + padding-bottom: 0px; +} + +header mark{ + border-radius: 4px; + padding: 2px 4px; + background: #121F2F; + color: white; +} + +header h1 { + font-size: 0.8em; + font-weight: 400; + color: #121F2F; +} + +header p { + font-size: 0.9em; + font-weight: 700; + color: #121F2F; +} + +main { + gap: 14px; +} + +.link { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 14px; + border: 1px solid #121F2F; + border-radius: 8px; + width: 420px; + max-width: 100%; + margin: 0 auto; + transition-duration: 200ms; + cursor: pointer; + overflow: hidden; + color: #121F2F; + text-decoration: none; +} + +.link:hover { + border-color: #121F2F; +} + +.linkBackground { + position: absolute; + inset: 0; + background: #020617; + opacity: 0.6; + z-index: -1; +} + +.link p { + font-size: 0.8em; +} + +@media (min-width: 640px) { + body { + gap: 64px; + padding: 80px 14px; + } + + header, main { + gap: 20px; + } + + header img { + max-width: 250px; + padding-bottom: 24px; + } + + header h1 { + font-size: 1em; + font-weight: 400; + } + + header p { + font-size: 1.1em; + font-weight: 700; + } + + .link p { + font-size: 1.1em; + } +} + +.hetzner { + margin-top:40px !important; + width:100px; + display: block; + margin: 0 auto; +} \ No newline at end of file