728x90
반응형
이번에 따라 만들어본 사이트는 트위터 로그인 사이트이다.
실제로 다양한 기법들이 쓰인 사이트이지만 최대한 모양과 느낌만 따라한다는 느낌으로 만들어 보았다.
아래는 트위터 로그인페이지 디자인이다.
내가 따라 만든 페이지는 다음과 같다.
왼쪽에 큰 트위터 이미지는 실제로 path 태그로 그려져 있었다. (생략)
가운데 영역이 브라우저 높이를 따르려면 100vh로 높이를 주면된다.
vh는 Viewport Height를 나타내며 100vh로 지정하게되면 100% 높이를 따르게 된다. 10vh는 10%의 높이를 따르게 된다.
다음은 HTML, CSS 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter</title>
<script src="https://kit.fontawesome.com/51db22a717.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div class="main-wrap">
<div class="side left-section">
<div class="left-msg-wrap">
<ul>
<li><i class="fas fa-search"></i><span>Follow your interests.</span></li>
<li><i class="fas fa-user-friends"></i><span>Hear what people are talking about.</span></li>
<li><i class="far fa-comment"></i><span>Join the conversation.</span></li>
</ul>
</div>
</div>
<div class="side right-section">
<div class="login-form-wrap">
<div class="login-input-wrap">
<label>Phone,email,or username</label>
<input type="text">
</div>
<div class="login-input-wrap">
<label>Password</label>
<input type="password">
</div>
<div class="login-btn-wrap">
<button class="login-btn">Log in</button>
</div>
</div>
<div class="join-container">
<div class="join-wrap">
<div class="join-logo-wrap">
<i class="fab fa-twitter"></i>
</div>
<h2>See what’s happening in the world right now</h2>
<div class="login-signup-btn-wrap">
<span>Join Twitter today.</span>
<button class="signup-btn">Sign up</button>
<button class="login-btn">Log in</button>
</div>
</div>
</div>
</div>
</div>
<footer>
<ul>
<li><a href=""> About
<li><a href="">Help Center</a></li>
<li><a href="">Terms</a></li>
<li><a href="">Privacy policy</a></li>
<li><a href="">Cookies</a></li>
<li><a href="">Ads info</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Status</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Brand</a></li>
<li><a href="">Advertise</a></li>
<li><a href="">Marketing</a></li>
<li><a href="">nesses</a></li>
<li><a href="">Developers</a></li>
<li><a href="">Directory</a></li>
<li><a href="">Settings</a></li>
<li><a href="">© 2020 Twitter, Inc.</a></li>
</ul>
</footer>
</div>
</body>
</html>:root{
--light-blue:#71c9f8;
--twitter-blue:#1da1f2;
--input-text-background-gray: #f5f8fa;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrap{
width: 100%;
}
.wrap .main-wrap{
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
}
.side{
width: 50%;
}
.left-section{
background: var(--light-blue);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.left-msg-wrap ul{
list-style: none;
height:160px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.left-section ul li{
color:white;
font-size: 24px;
}
.left-section ul li span{
font-weight: 800;
font-size: 20px;
}
.left-section ul li i{
padding-right: 15px;
}
.right-section{
padding:15px;
flex: auto;
}
.login-form-wrap{
display: flex;
align-items: center;
justify-content: center;
flex: auto;
}
.login-input-wrap{
margin: 8px;
display: flex;
flex-direction: column;
border-bottom: solid 2px #6e7f8e;
background: var(--input-text-background-gray);
width: 200px;
height: 55px;
padding: 10px;
border-radius: 2px;
}
.login-input-wrap label{
color: #657787;
font-size: 15px;
}
.login-input-wrap input{
border: 0px;
height: 29px;
background:none ;
}
.login-btn{
width: 75px;
height: 40px;
border-radius: 20px;
background: white;
font-weight: 900;
font-size: 16px;
border: solid 1px var(--twitter-blue);
color : var(--twitter-blue);
}
.join-container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.join-wrap{
padding-top: 300px;
width:390px;
height: 330px;
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-evenly;
}
.join-wrap h2{
font-size: 32px;
font-weight: 900;
}
.join-logo-wrap i{
font-size: 40px;
color: var(--twitter-blue);
margin-bottom: 25px;
}
.login-signup-btn-wrap{
width:400px;
padding-top: 60px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.login-signup-btn-wrap span{
font-size: 18px;
font-weight: 900;
}
.login-signup-btn-wrap button{
background: var(--twitter-blue);
width: 100%;
height: 40px;
border: solid 1px var(--twitter-blue);
font-weight: 900;
color: white;
border-radius: 20px;
margin-top: 15px;
}
.login-signup-btn-wrap .signup-btn{
}
.login-signup-btn-wrap .login-btn
{
background: white;
border: solid 1px var(--twitter-blue);
color: var(--twitter-blue);
}
footer{
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: white;
}
footer ul{
display: flex;
list-style: none;
align-items: center;
justify-content: center;
height: 100%;
}
footer ul a{
text-decoration: none;
color: #657787;
font-size: 14px;
}
footer ul li{
padding-left: 20px;
}https://github.com/lucidmaj7/frontend_study/tree/master/twitter-login
lucidmaj7/frontend_study
Frontend Study(html, css,react,etc). Contribute to lucidmaj7/frontend_study development by creating an account on GitHub.
github.com
728x90
반응형
'개발 > HTML_CSS' 카테고리의 다른 글
| [HTML/CSS] 로그인 페이지 만들기 / css 그림자, 그라데이션 (0) | 2020.09.01 |
|---|---|
| [HTML/CSS] 네이버 로그인 화면 따라 만들기 (3) | 2020.08.27 |
| [HTML/CSS] google 따라 만들기 (0) | 2020.08.27 |
| [HTML/CSS] 스타벅스 홈페이지 메뉴 따라 만들기 (0) | 2020.08.25 |
| CSS flex, justify-content 옵션 비교 (0) | 2020.04.28 |
댓글