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

[황은지]Week3 #85

Merged
merged 2 commits into from
Mar 3, 2024
Merged

[황은지]Week3 #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e1557e
week3
eunji-0623 Feb 28, 2024
d1a8a3a
footer 부분 수정
eunji-0623 Mar 2, 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
0 CSS/common.css → Styles/common.css
View file
Open in desktop
File renamed without changes.
103 changes: 92 additions & 11 deletions CSS/main.css → Styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ nav {
background-image: url(../Images/logo.svg);
flex: 0 0 133px;
height: 24px;
background-size: cover;
}

nav .button-grad.signin {
Expand Down Expand Up @@ -61,8 +62,8 @@ header {
}

.intro img {
width: 1200px;
height: 590px;
width: 1118px;
height: 659px;
}

/* MAIN */
Expand Down Expand Up @@ -168,27 +169,107 @@ footer {
height: 20px;
}

@media (max-width: 1500px) {
/* PC */
@media (min-width: 1200px) {
.hidden {
display: none;
}
}

/* TABLET */
@media (max-width: 1199px) {
.pc:not(.tablet),
.mobile {
display: none;
}
.tablet:not(.flex) {
display: block;
}
nav {
justify-content: center;
gap: 450px;
padding: 20px 32px;
}
.intro img {
width: 650px;
height: 380px;
}
.content {
gap: 51px;
}
.content img {
width: 385px;
height: 315px;
}
}

/* MOBILE */
@media (max-width: 767px) {
.tablet:not(.mobile) {
display: none;
}
.mobile {
display: block;
}
nav {
justify-content: space-between;
gap: 0;
}
.logo {
flex-basis: 88px;
height: 16px;
}
nav .button-grad.signin {
flex-basis: 100px;
flex-basis: 80px;
padding: 10px 16px;
font-size: 14px;
}
.intro {
padding: 28px 32px 0;
}
.intro h1 {
font-size: 48px;
font-size: 32px;
line-height: 130%;
}
.intro .button-grad.signup {
width: 280px;
width: 200px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
}
.intro img {
width: 900px;
width: 100%;
height: auto;
}
.content {
gap: 80px;
flex-direction: column;
align-items: flex-start;
padding: 40px 32px 36px;
gap: 0;
}
.content h2 {
font-size: 24px;
}
.content p {
font-size: 15px;
font-weight: 500;
margin: 0;
}
.content img {
width: 400px;
width: 100%;
height: auto;
margin: 20px 0 16px;
}
.content h2 {
font-size: 40px;
.info {
display: grid;
grid-template: 1fr / 1fr 1fr;
padding: 32px 32px 64px;
gap: 60px;
}
.info .license {
grid-area: 2/ 1;
}
.sns {
justify-content: flex-end;
}
}
13 changes: 13 additions & 0 deletions CSS/sign.css → Styles/sign.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,3 +126,16 @@ button:hover {
width: 42px;
height: 42px;
}

/* MOBILE */
@media (max-width: 767px) {
body {
padding: 0 32px;
}
header {
margin-top: 120px;
}
main {
width: min(100%, 400px);
}
}
152 changes: 96 additions & 56 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,14 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./CSS/main.css" />
<link rel="stylesheet" href="./CSS/common.css" />
<meta property="og:title" content="Linkbrary" />
<meta property="og:url" content="https://linkbrary-eunji.netlify.app/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://ifh.cc/g/lqjlHT.jpg" />
<meta property="og:title" content="Linkbrary" />
<meta property="og:description" content="세상의 모든 정보를 쉽게 저장하고 관리해보세요" />
<link rel="stylesheet" href="./Styles/main.css" />
<link rel="stylesheet" href="./Styles/common.css" />
<title>Linkbrary</title>
</head>
<body>
Expand All @@ -14,66 +20,100 @@
</nav>
<header>
<section class="intro">
<h1>
<span class="grad">세상의 모든 정보</span>를<br />
쉽게 저장하고 관리해 보세요
</h1>
<div class="pc">
<h1>
<span class="grad">세상의 모든 정보</span>를<br />
쉽게 저장하고 관리해 보세요
</h1>
</div>
<div class="tablet mobile hidden">
<h1>
<span class="grad">세상의 모든 정보</span>를<br />
쉽게 저장하고<br />관리해 보세요
</h1>
</div>
<a href="./signup.html" class="button-grad signup">링크 추가하기</a>
<img src="./Images/image25.png" alt="Linkbrary 사이트 이미지" />
</section>
</header>
<main>
<article class="content">
<div class="description">
<h2>
<span class="grad pink">원하는 링크</span>를<br />
저장하세요
</h2>
<p>
나중에 읽고 싶은 글, 다시 보고 싶은 영상,<br />
사고 싶은 옷, 기억하고 싶은 모든 것을<br />
한 공간에 저장하세요.
</p>
</div>
<img src="./Images/_img1.png" alt="링크 저장 이미지" />
</article>
<article class="content">
<img src="./Images/img2.png" alt="폴더 관리 이미지" />
<div class="description">
<h2>
링크를 폴더로<br />
<span class="grad yellow">관리</span>하세요
</h2>
<p>
나만의 폴더를 무제한으로 만들고<br />
다양하게 활용할 수 있습니다.
</p>
</div>
</article>
<article class="content">
<div class="description">
<h2>
저장한 링크를<br />
<span class="grad purple">공유</span>해 보세요.
</h2>
<p>
여러 링크를 폴더에 담고 공유할 수 있습니다.<br />
가족, 친구, 동료들에게 쉽고 빠르게 링크를<br />
공유해 보세요.
</p>
</div>
<img src="./Images/img3.png" alt="링크 공유 이미지" />
</article>
<article class="content">
<img src="./Images/_img4.png" alt="링크 검색 이미지" />
<div class="description">
<h2>
저장한 링크를<br />
<span class="grad blue">검색</span>해 보세요
</h2>
<!-- PC & Tablet content -->
<div class="pc tablet">
<article class="content">
<div class="description">
<h2>
<span class="grad pink">원하는 링크</span>를<br />
저장하세요
</h2>
<p>
나중에 읽고 싶은 글, 다시 보고 싶은 영상,<br />
사고 싶은 옷, 기억하고 싶은 모든 것을<br />
한 공간에 저장하세요.
</p>
</div>
<img src="./Images/_img1.png" alt="링크 저장 이미지" />
</article>
<article class="content">
<img src="./Images/img2.png" alt="폴더 관리 이미지" />
<div class="description">
<h2>
링크를 폴더로<br />
<span class="grad yellow">관리</span>하세요
</h2>
<p>
나만의 폴더를 무제한으로 만들고<br />
다양하게 활용할 수 있습니다.
</p>
</div>
</article>
<article class="content">
<div class="description">
<h2>
저장한 링크를<br />
<span class="grad purple">공유</span>해 보세요.
</h2>
<p>
여러 링크를 폴더에 담고 공유할 수 있습니다.<br />
가족, 친구, 동료들에게 쉽고 빠르게 링크를<br />
공유해 보세요.
</p>
</div>
<img src="./Images/img3.png" alt="링크 공유 이미지" />
</article>
<article class="content">
<img src="./Images/_img4.png" alt="링크 검색 이미지" />
<div class="description">
<h2>
저장한 링크를<br />
<span class="grad blue">검색</span>해 보세요
</h2>
<p>중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
</div>
</article>
</div>
<!-- Mobile content -->
<div class="mobile hidden">
<article class="content">
<h2><span class="grad pink">원하는 링크</span>를 저장하세요</h2>
<img src="./Images/_img1.png" alt="링크 저장 이미지" />
<p>나중에 읽고 싶은 글, 다시 보고 싶은 영상, 사고 싶은 옷, 기억하고 싶은 모든 것을 한 공간에 저장하세요.</p>
</article>
<article class="content">
<h2>링크를 폴더로 <span class="grad yellow">관리</span>하세요</h2>
<img src="./Images/img2.png" alt="폴더 관리 이미지" />
<p>나만의 폴더를 무제한으로 만들고 다양하게 활용할 수 있습니다.</p>
</article>
<article class="content">
<h2>저장한 링크를 <span class="grad purple">공유</span>해 보세요.</h2>
<img src="./Images/img3.png" alt="링크 공유 이미지" />
<p>여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 쉽고 빠르게 링크를 공유해 보세요.</p>
</article>
<article class="content">
<h2>저장한 링크를 <span class="grad blue">검색</span>해 보세요</h2>
<img src="./Images/_img4.png" alt="링크 검색 이미지" />
<p>중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
</div>
</article>
</article>
</div>
</main>
<footer>
<div class="info">
Expand Down
4 changes: 2 additions & 2 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./CSS/sign.css" />
<link rel="stylesheet" href="./CSS/common.css" />
<link rel="stylesheet" href="./Styles/sign.css" />
<link rel="stylesheet" href="./Styles/common.css" />
<title>Linkbrary</title>
</head>
<body>
Expand Down
4 changes: 2 additions & 2 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./CSS/sign.css" />
<link rel="stylesheet" href="./CSS/common.css" />
<link rel="stylesheet" href="./Styles/sign.css" />
<link rel="stylesheet" href="./Styles/common.css" />
<title>Linkbrary</title>
</head>
<body>
Expand Down
Loading