본문 바로가기
코린이의 코딩배우기

[35] 로그인/ 이름점 웹페이지 만들기

by 시리얼헌터 2022. 1. 10.
728x90

원래 과제는 로그인 페이지 만들기 임

 

index.html 코드

 

<!DOCTYPE html>
<html>
<head>
  <title>버튼 디자인</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <div class="login-form">
    <form>
      <input type="text" name="email" class="text-field" placeholder="아이디"><br>
      <input type="password" name="password" class="text-field" placeholder="비밀번호"><br>
      <input type="submit" value="로그인" class="submit-btn">
    </form>

    <div class="links">
      <a href="#">비밀번호를 잊어버리셨나요?</a>
    </div>
  </div>
</body>
</html>

 

styles.css 코드

 

* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

body {
  margin: 0;
  background-color: #1BBC9B;
}

.login-form {
    padding: 20px;
    background-color: #EEEFF1;
    width: 300px;
    display: block;
    margin: 50px auto auto auto;
    border-radius: 5px;
   
    }

.text-field {
  font-size: 14px;
  border-style: none;
  padding: 10px;
   margin-bottom: 10px;
    border-radius: 5px;
    width: 260px;
    color: #9B9B9B;
}

.submit-btn {
  font-size: 14px;
  background-color: #1BBC9B;
    border-style: none;
    padding: 10px;
    margin: auto auto 20px auto;
    border-radius: 5px;
    width: 260px;
    color: white;
}

.submit-btn:hover {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}
    

.links {
    text-align: center;
    
}

.links a {
  font-size: 12px;
  color: #9B9B9B;
  
}

 

 

 

 

https://bakey-api.codeit.kr/web/enrollments/5f6c3858ee49c8695c63de53/lessons/624/index.html

 

버튼 디자인

 

bakey-api.codeit.kr

 

 


이걸  이름점 보는 페이지로 바꿔보았다 ㅋㅋ

 

<!DOCTYPE html>
<html>
<head>
  <title>로그인</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  
 <h1><i>흥미딘딘한</i> 이름점 보기~!</h1>
  
  
  <div class="login-form">
    <form>
      <input type="text" name="email" class="text-field" placeholder="이름"> <br>
      <input type="text" name="email" class="text-field" placeholder="상대방 이름"> <br>
      <div class="submit-btn">
        <a href="https://media.fmkorea.com/files/attach/new2/20210322/486616/3265746926/3470731859/d78b43952a3f0e33aeccfcca6640bc7d.gif.mp4?d">우리 궁합은?</a>
      </div>
    </form>

   
  </div>
</body>
</html>

 


* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

input {
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.links {
  margin-bottom: 20px;
}

.login-form {
  width: 300px;
  height: auto;
  margin:auto;
  text-align: center;
  background-color: #EEEFF1;
  border-radius: 5px;
  padding: 20px;
}




body {
  margin: 0;
  background-color: #1BBC9B;
}


h1 i {
  color: green;
}

h1 {
  color: black;
  text-align: center;
}



.text-field {
  font-size: 14px;
}

.submit-btn {
  background-color: #1BBC9B;
  width: 160px;
  text-align: center;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.submit-btn:hover {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}

a {
  font-size: 14px;
  color: white;
  text-decoration: none;
}
}

 

 

https://bakey-api.codeit.kr/web/enrollments/5f6c3858ee49c8695c63de53/lessons/621/index.html

 

로그인

 

bakey-api.codeit.kr

 

728x90
반응형

댓글