GIT HUB https://github.com/daayooung/book_club
[ Landing page ]
[ Home component ]
Home.js
import React from 'react';
import "./home.css";
function Home () {
return (
<div className="inner_wrap">
<h1 className="home_title">읽는다</h1>
<button className="btn_login">로그인</button>
<a href="/" className="signup">회원가입</a>
</div>
)
}
export default Home;
Home.css
@media (max-width: 380px) {
.home {
height: 100%;
display: flex;
justify-content: center;
background-image: url(../images/selective-focus-photo-of-thick-books-1090941.jpg);
background-position: center;
background-size: cover;
}
.inner_wrap {
max-height: 760px;
min-height: 430px;
height: 100%;
margin: 50px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.inner_wrap .home_title {
margin: 0px auto 50px;
font-size: 2em;
color: white;
}
.inner_wrap .btn_login {
width: 200px;
height: 42px;
margin: 0 auto 10px;
border-radius: 50px;
border-style: none;
background-image: linear-gradient(to right, #FFD194 0%, #D1913C 100%);
font-size: 14px;
font-weight: 600;
color: white;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.inner_wrap .btn_login:hover { background-position: right center; }
.inner_wrap .signup {
color: white;
}
}
미완. 마크업 중
'개발 일지(비공개)' 카테고리의 다른 글
[읽는다] React로 독서모임 Web 개발일지_05 Landing / Search component (0) | 2020.06.30 |
---|---|
[읽는다] React로 독서모임 Web 개발일지_03 구조 설계 (0) | 2020.06.28 |
[읽는다] React로 독서모임 Web 개발일지_02 (0) | 2020.06.26 |
[읽는다] React로 독서모임 Web 개발일지_01 (0) | 2020.06.25 |
댓글