search

Cuong620 / IT3

trang web điện thoại
0 stars 0 forks source link

đăng ký đăng nhập #6

Open Cuong620 opened 1 year ago

Cuong620 commented 1 year ago

<!DOCTYPE html>

Đăng nhập

Chào mừng!

Đến trang website của chúng tôi

Cuong620 commented 1 year ago

<!DOCTYPE html>

Đăng nhập

Chào mừng!

Đến trang website của chúng tôi

Cuong620 commented 1 year ago

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.header { position: fixed; width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 20px 100px; z-index: 99; background: transparent; }

.header .nav a { text-decoration: none; color: #fff; font-size: 20px; margin-left: 20px; font-weight: 600; }

.nav a:hover { border-bottom: 4px solid #fff; transition: .5s; }

.search i { color: #fff; font-size: 1.5em; margin-left: 20px; }

.background { width: 100%; height: 100vh; background-image: url('background.jpeg'); background-position: center; background-size: cover; filter: blur(5px); }

.home { position: absolute; top: 50%; left: 50%; width: 75%; height: 75%; transform: translate(-50%, -50%); background-image: url('background.jpeg'); background-position: center; background-size: cover; display: flex; margin-top: 10px; border: 1px solid black; border-radius: 10px; border: none; box-shadow: 5px 10px 10px 0; }

.content { display: flex; flex-direction: column; width: 700px; padding: 100px 0; }

.content a { position: relative; text-decoration: none; color: #fff; font-size: 3em; font-weight: 700; top: -40px; left: 80px; }

.content h2 { font-size: 3.5em; text-align: center; color: #fff; letter-spacing: 10px; }

.content h3 { font-size: 2em; text-align: center; color: #fff; }

.content pre { margin-top: 20px; text-align: center; font-size: 1em; color: #fff; }

.content .icon { margin-top: 20px; font-size: 1.5em; display: flex; justify-content: center; }

.content .icon i { margin-left: 20px; color: #fff; }

.login { width: 450px; position: relative; padding: 100px 30px; backdrop-filter: blur(10px); }

.login h2 { font-size: 2em; text-align: center; margin-bottom: 20px; color: #fff; }

.login .input { position: relative; width: 100%; height: 30px; margin-bottom: 40px }

.login .input .input1 { font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: transparent; border: none; outline: none; border-bottom: 2px solid #fff; color: #fff; width: 100%; height: 100%; }

::placeholder { color: #fff; font-size: 18px; }

.login .input i { position: relative; right: -370px; bottom: 27px; color: #fff; }

.check { display: flex; justify-content: space-between; margin-bottom: 40px; color: #fff; }

.check a { text-decoration: none; color: #fff; }

.check a:hover { text-decoration: underline; }

.login .button { width: 100%; height: 40px; margin-bottom: 15px; }

button { width: 100%; height: 40px; background-color: rgb(66, 44, 48); border: none; outline: none; font-size: 20px; font-weight: 700; border-radius: 7px; color: #fff; }

button:active { font-size: 25px; }

.login .sign-up { display: flex; justify-content: center; }

.login .sign-up a { text-decoration: none; color: #fff; font-weight: 700; }

.login .sign-up p { color: #fff; }

.sign-up a:hover { text-decoration: underline; }