반응형 로그인 + 가입 양식 | 4일차 | 중급 HTML 및 CSS 프로젝트 50일

HTML 및 CSS로 반응형 로그인 양식 만들기

우리는 무엇을 생각해 낼까요? 💚






만들어보자🎯🔥


🎯 신체 구조

HTML

<form>

    <h2>Login Here</h2>

    <label for="username">Username</label>
    <input type="text" placeholder="Enter your User " id="username">
    <label for="password">Password</label>
    <input type="password" placeholder="Enter a 8+ character password" id="password">

    <button>Log In</button>

    <div class="sociallogin">
      <div class="go"><b class="fab fa-google"></b> Google</div>
      <div class="fb"><b class="fab fa-facebook"></b> Facebook</div>
    </div>

  </form>

📢팁💡

* 표시를 해서 표시하고 싶다면 필수 -


사용 - <sup>*</sup>

CSS

일부 고정 값.

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

스타일링 body ....🔥

body {
    background-image: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bo50etkr3xgjgjcp4z8.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Nunito', sans-serif;
  }

📢 팁 💡

폼이 멋져보이도록💚 사용-

::selection {
    color: #003300;
    background-color: #e6ffe6;
  }

폼을 꾸며보자..💚

form {
    height: 520px;
    width: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
  }

  form * {
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
  }

transform: translate(-50%, -50%);는 양식을 가운데로 가져오는 데 사용됩니다

.

blur는 배경 이미지에 반투명 유리 효과를 주는 데 사용됩니다.

position: absolute;

를 사용하겠습니다

여기에 로그인 합시다 💚

form h2 {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    font-family: 'Playfair Display', serif;
  }

이제 label

label {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
  }

지금 input 💚

input {
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
  }

🎯 팁 💡
:focus를 사용하여 멋진 룩을 연출하세요...
사용자가 입력할 입력 섹션을 클릭하면 스타일이 표시됩니다.

input:focus {
    border-style: solid;
    border-color: rgb(0, 179, 0);
    border-width: 1px;
    box-shadow: 0 4px 8px 0 rgb(0, 179, 0, 0.3),
      0 6px 20px 0 rgb(0, 179, 0, 0.2);
  }

placeholder

::placeholder {
   color: #e5e5e5;
 }

로그인 버튼입니다💚

button {
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
  }

소셜 아이콘 스타일 지정 - Google 및 Facebook

.social {
    margin-top: 30px;
    display: flex;
  }
.social .fb{
  margin-left: 25px;
}
.social b{
  margin-right: 4px;
}
.social div {
   background: red;
   width: 150px;
   border-radius: 3px;
   padding: 5px 10px 10px 5px;
   background-color: rgba(255, 255, 255, 0.27);
   color: #eaf0fb;
   text-align: center;
}

🎯 팁 💡

멋진 모양을 제공하기 위해 사용합시다-

:hover - 마우스를

위에 놓을 때

:active - div를 클릭하면

. button div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.button div:active {
    background-color: rgba(255, 255, 255, 0.60)
.social div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.social div:active {
    background-color: rgba(255, 255, 255, 0.60)
  }

CONGRATULATIONS✨ WE MADE

반응형 로그인 양식

이제 여러분 차례입니다 🎯


🎯 오늘의 과제🔥
1.


이 시도

가입 양식

2.



학점
이미지 - Unsplash
글꼴 - Google Fonts


전체 시리즈를 확인하세요!
혜택을 받을 수 있는 사람과 공유하세요💚
❤️ 해피 코딩!
더 많은 것을 위해 따르십시오!