Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[곽민조]Sprint3 #136

Merged
merged 3 commits into from
Jun 16, 2024
Merged

[곽민조]Sprint3 #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
329baf0
vw 수치 소숫점 첫자리까지 정리, 로그인 & 회원가입 모든 인풋에 값 있을 때
Minjo123 Jun 10, 2024
453fc1e
index 페이지에 페이스북 오픈그래프 추가
Minjo123 Jun 11, 2024
979d254
휴대폰, 태블릿 사이즈 미디어쿼리 추가
Minjo123 Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions css/color_palette.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
:root {
--blue : #3692ff;
--red : #F74747;
--white : #ffffff;
--borderBottom : #dfdfdf;
--gray900 : #111827;
--gray800 : #1f2937;
--gray700 : #374151;
Expand Down
4 changes: 4 additions & 0 deletions css/empty-space.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.empty-space {
width: 100px;
flex-grow: 1;
}
Empty file added css/mediaQuerys.css
View file
Open in desktop
Empty file.
Binary file added img/img_pandaMarket.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 10 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta property="og:title" content="판다 마켓">
<meta property="og:description" content="일상의 모든 물건을 거래해보세요">
<meta property="og:image" content="/img/img_pandaMarket.png">
<meta property="og:type" content="website">

<title>판다마켓</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" as="style" crossorigin
Expand All @@ -13,11 +19,11 @@
<body>
<header>
<div class="logo">
<a href='/'>
<a href='/'style="display:flex">
Minjo123 marked this conversation as resolved.
Show resolved Hide resolved
<img src="./icon/logo_pandaMarket.svg" alt="판다마켓 로고">
</a>
</div >
<a href="/login/" class="login-button button">
<a href="./login.html" class="login-button button">
로그인
</a>
</header>
Expand Down Expand Up @@ -121,8 +127,8 @@ <h1>
<div class="right sns_icon">
<a onclick=window.open('https://www.facebook.com/?locale=ko_KR')><img src="./icon/ic_facebook.svg" alt="facebook_icon"></a>
<a onclick=window.open('https://x.com/?lang=ko')><img src="./icon/ic_twitter.svg" alt="twitter_icon"></a>
<a onclick=window.open('https://www.youtube.com/'')><img src="./icon/ic_youtube.svg" alt="youtube_icon"></a>
<a onclick=window.open('https://www.instagram.com/'')><img src="./icon/ic_instagram.svg" alt="instagram_icon"></a>
<a onclick=window.open('https://www.youtube.com/')><img src="./icon/ic_youtube.svg" alt="youtube_icon"></a>
<a onclick=window.open('https://www.instagram.com/')><img src="./icon/ic_instagram.svg" alt="instagram_icon"></a>
</div>
</footer>

Expand Down
311 changes: 309 additions & 2 deletions login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
font-family: pretendard;
}

html {
width: 100vw;
}
body {
margin: 0 0;
Minjo123 marked this conversation as resolved.
Show resolved Hide resolved
}

a, button {
cursor:pointer;
}
Expand Down Expand Up @@ -48,10 +55,13 @@ form button {
border-radius: 40px;
background-color: var(--gray400);
font-size: 20px;
padding:16px 294px;
padding: 16px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
.page-contaner {
.page-container {
display: flex;
margin: 60px 0;
}
Expand Down Expand Up @@ -114,4 +124,301 @@ form button {

button.enabled {
background-color: var(--blue);
}

/* @media screen and (min-width:1199px) and (max-width:1920px) {

form label {
font-size:1vw;
font-weight:36.4vw;
margin: 0 0 0.8vw;
}

form input {
padding:0.8vw 1.2vw;
font-size:0.8vw;
border-radius: 0.6vw;
margin: 0 0 1.2vw;
}

form input:placeholder {

}


form button {
border-radius: 2vw;
font-size: 1vw;
padding:0.8vw 15vw;
}
.page-container {
margin: 3vw 0;
}

.eye-icon-parents img {
top:2.6vw;
left:31vw;
width:1.2vw;
}

.login-container {
width:33vw;
gap:1.2vw;
}

.login-top-logo img {
width: 20.6vw;

}

.empty-space {
width: 33vw;
}

.easy-login {
border-radius: 0.4vw;
padding:0.8vw 1.2vw;
}

.easy-login-icon {
gap:0.8vw;
}

.easy-login-icon img {
width: 2.2vw;
}

.login-container p {
font-size: 0.8vw;
}

} */

@media screen and (min-width: 768px) and (max-width: 1199px) {
a, button {
cursor:pointer;
}
label,
input,
button,
form {
display: block;
width:100%;
border:0;
}


form label {
font-size:18px;
font-weight:700px;
color: var(--gray800);
margin: 0 0 16px;
}

form input {
padding:16px 24px;
font-size:16px;
font-weight:400;
border-radius: 12px;
color: var(--gray800);
background-color: var(--gray100);
margin: 0 0 24px;
}

form input:placeholder {
color: var(--gray400);
}

form input:focus {
border: 2px solid var(--blue);
outline: none;
}

form button {
border-radius: 40px;
background-color: var(--gray400);
font-size: 20px;
padding:16px;
color: #ffffff;
}
.page-container {
display: flex;
margin: 48px 0 0;
}

.eye-icon-parents {
position:relative;
}

.eye-icon-parents img {
position: absolute;
top:50px;
left:595px;
width:24px;
}

.login-container {
width:640px;
display:flex;
flex-direction:column;
align-items: center;
flex-shrink: 0;
gap:24px;
}

.login-top-logo img {
width: 396px;

}

.empty-space {
width: 640px;
flex-grow:1;
}

.easy-login {
font-weight: 500;
background-color: #E6F2FF;
border-radius: 8px;
padding:16px 23px;
width: 100%;
display:flex;
justify-content: space-between;
align-items: center;
}

.easy-login-icon {
display: flex;
gap:16px;
}

.easy-login-icon img {
width: 42px;
}

.login-container p {
font-weight: 500;
font-size: 15px;
color: var(--gray800);
}

button.enabled {
background-color: var(--blue);
}
}

@media screen and (min-width: 300px) and (max-width: 767px) {

a, button {
cursor:pointer;
}
label,
input,
button,
form {
display: block;
width:100%;
border:0;
}


form label {
font-size:14px;
font-weight:700px;
color: var(--gray800);
margin: 0 0 8px;
}

form input {
padding:16px 24px;
font-size:16px;
font-weight:400;
border-radius: 12px;
color: var(--gray800);
background-color: var(--gray100);
margin: 0 0 16px;
}

form input:placeholder {
color: var(--gray400);
}

form input:focus {
border: 2px solid var(--blue);
outline: none;
}

form button {
border-radius: 40px;
background-color: var(--gray400);
font-size: 20px;
padding:16px 0px;
color: #ffffff;
}
.page-container {
display: flex;
margin: 24px 0;
width:100%
}

.eye-icon-parents {
position:relative;
}

.eye-icon-parents img {
position: absolute;
top:40px;
left: 80vw;
width:24px;
}

.login-container {
padding: 0 16px;
width:100vw;
display:flex;
flex-direction:column;
align-items: center;
flex-shrink: 0;
gap:24px;
}

.login-top-logo img {
width: 198px;

}

.empty-space {
width: 640px;
flex-grow:1;
}

.easy-login {
font-weight: 500;
background-color: #E6F2FF;
border-radius: 8px;
padding:16px 23px;
width: 100%;
display:flex;
justify-content: space-between;
align-items: center;
}

.easy-login-icon {
display: flex;
gap:16px;
}

.easy-login-icon img {
width: 42px;
}

.login-container p {
font-weight: 500;
font-size: 15px;
color: var(--gray800);
}

button.enabled {
background-color: var(--blue);
}
}
Loading
Loading