Skip to content

[김미진]Week3 #77

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

Open
mijin0928 wants to merge 1 commit into
base: part1-김미진
Choose a base branch
from
Open

[김미진]Week3 #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 1-weekly-mission-week1-main/.gitignore → linkbrary/.gitignore
View file
Open in desktop
File renamed without changes.
0 1-weekly-mission-week1-main/faq.html → linkbrary/faq.html
View file
Open in desktop
File renamed without changes.
0 ...ly-mission-week1-main/images/facebook.svg → linkbrary/images/facebook.svg
View file
Open in desktop
File renamed without changes
0 1-weekly-mission-week1-main/images/hero.png → linkbrary/images/hero.png
View file
Open in desktop
File renamed without changes
0 ...ekly-mission-week1-main/images/image1.png → linkbrary/images/image1.png
View file
Open in desktop
File renamed without changes
0 ...ekly-mission-week1-main/images/image2.png → linkbrary/images/image2.png
View file
Open in desktop
File renamed without changes
0 ...ekly-mission-week1-main/images/image3.png → linkbrary/images/image3.png
View file
Open in desktop
File renamed without changes
0 ...ekly-mission-week1-main/images/image4.png → linkbrary/images/image4.png
View file
Open in desktop
File renamed without changes
Binary file added linkbrary/images/img-og.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.
0 ...y-mission-week1-main/images/instagram.svg → linkbrary/images/instagram.svg
View file
Open in desktop
File renamed without changes
0 1-weekly-mission-week1-main/images/logo.svg → linkbrary/images/logo.svg
View file
Open in desktop
File renamed without changes
0 ...kly-mission-week1-main/images/twitter.svg → linkbrary/images/twitter.svg
View file
Open in desktop
File renamed without changes
0 ...kly-mission-week1-main/images/youtube.svg → linkbrary/images/youtube.svg
View file
Open in desktop
File renamed without changes
33 changes: 17 additions & 16 deletions 1-weekly-mission-week1-main/index.html → linkbrary/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="./images/img-og.png">
<meta property="og:title" content="Linkbrary">
<meta property="og:description" content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요">
<meta property="og:url" content="https://linkbrary-mj.netlify.app/">
<title>Linkbrary</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"/>
<link rel="stylesheet" href="./src/reset.css" />
<link rel="stylesheet" href="./src/style.css" />
</head>
<body>
<header>
<nav>
<a href="index.html">
<img src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" />
<img src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" / class="mobile-logo">
</a>
<a class="cta cta-short" href="signin.html">
<span>로그인</span>
Expand All @@ -25,7 +26,7 @@
<h1 class="slogan">
<span class="slogan-gradient background-clip-text"> 세상의 모든 정보</span>를
<br />
쉽게 저장하고 관리해 보세요
쉽게 저장하고 <br / class="mobile-hide">관리해 보세요
</h1>
<a class="cta cta-long" href="signup.html">
<span>링크 추가하기</span>
Expand All @@ -37,50 +38,50 @@ <h1 class="slogan">
<section>
<h2 class="title">
<span class="title-1-gradient background-clip-text"> 원하는 링크</span>를
<br />
<br / class="pc-hide">
저장하세요
</h2>
<p class="description">
나중에 읽고 싶은 글, 다시 보고 싶은 영상,
<br />
<br / class="pc-hide">
사고 싶은 옷, 기억하고 싶은 모든 것을
<br />
<br / class="pc-hide">
한 공간에 저장하세요.
</p>
<img src="./images/image1.png" class="content-image" alt="링크의 내용이 담긴 카드들" />
</section>
<section>
<h2 class="title">
링크를 폴더로
<br />
<br / class="pc-hide">
<span class="title-2-gradient background-clip-text">관리</span>하세요
</h2>
<p class="description">
나만의 폴더를 무제한으로 만들고
<br />
<br / class="pc-hide">
다양하게 활용할 수 있습니다.
</p>
<img src="./images/image2.png" class="content-image" alt="폴더 이름 변경 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<br />
<br / class="pc-hide">
<span class="title-3-gradient background-clip-text">공유</span>해 보세요
</h2>
<p class="description">
여러 링크를 폴더에 담고 공유할 수 있습니다.
<br />
<br / class="pc-hide">
가족, 친구, 동료들에게 쉽고 빠르게 링크를
<br />
<br / class="pc-hide">
공유해 보세요.
</p>
<img src="./images/image3.png" class="content-image" alt="폴더 공유 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<br />
<br / class="pc-hide">
<span class="title-4-gradient background-clip-text">검색</span>해 보세요
</h2>
<p class="description">중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
Expand Down
0 1-weekly-mission-week1-main/privacy.html → linkbrary/privacy.html
View file
Open in desktop
File renamed without changes.
0 1-weekly-mission-week1-main/signin.html → linkbrary/signin.html
View file
Open in desktop
File renamed without changes.
0 1-weekly-mission-week1-main/signup.html → linkbrary/signup.html
View file
Open in desktop
File renamed without changes.
0 1-weekly-mission-week1-main/src/reset.css → linkbrary/src/reset.css
View file
Open in desktop
File renamed without changes.
190 changes: 173 additions & 17 deletions 1-weekly-mission-week1-main/src/style.css → linkbrary/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,7 @@ nav {
max-width: 192rem;
height: 9.4rem;
padding: 0 20rem;
}

.hero-header {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 4rem;
padding-top: 7rem;
background-color: #edf7ff;
}

.cta {
Expand All @@ -47,6 +40,14 @@ nav {
width: 35rem;
}

.hero-header {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 4rem;
padding-top: 16.4rem;
}

.slogan {
text-align: center;
font-size: 6.4rem;
Expand All @@ -64,13 +65,17 @@ nav {
color: transparent;
}

.mobile-hide {
display: none;
}

.hero-image {
width: 120rem;
height: 59rem;
width: 1200px;
height: 590px;
}

article {
padding-top: 7rem;
padding-top: 3rem;
padding-bottom: 12rem;
}

Expand All @@ -84,22 +89,24 @@ section {
padding: 50px 0;
}

section .pc-hide {
display: block;
}

section:nth-of-type(odd) {
grid-template:
". image"
"title image"
"description image"
". image"
/291px 55rem;
". image";
}

section:nth-of-type(even) {
grid-template:
"image ."
"image title"
"image description"
"image ."
/550px 29.1rem;
"image .";
}

.title {
Expand Down Expand Up @@ -133,8 +140,8 @@ section:nth-of-type(even) {

.content-image {
grid-area: image;
width: 55rem;
height: 45rem;
width: 550px;
height: 450px;
}

footer {
Expand Down Expand Up @@ -178,3 +185,152 @@ footer {
column-gap: 1.2rem;
height: 2rem;
}

@media screen and (max-width:1200px) {
.mobile-hide {
display: block;
}

.hero-header {
padding-top: 13.3rem;
}

.hero-image {
width: 698px;
height: 343px;
}

section {
column-gap: 5.1rem;
height: 41.5rem;
}

section:nth-of-type(odd) {
grid-template:
". image"
"title image"
"description image"
". image";
}

section:nth-of-type(even) {
grid-template:
"image ."
"image title"
"image description"
"image .";
}

.content-image {
width: 385px;
height: 315px;
}
}

@media screen and (min-width:375px) and (max-width:768px) {
header {
padding: 0 32px;
}

nav {
height: 6.3rem;
padding: 0 32px;
}

nav .mobile-logo {
width: 88px;
}

.hero-header {
row-gap: 2.4rem;
padding-top: 9.1rem;
}

.hero-image {
width: 100%;
height: 100%;
}

.slogan {
font-size: 3.2rem;
line-height: 4.2rem;
}

.cta {
height: 3.7rem;
font-size: 1.4rem;
}

.cta-short {
width: 8rem;
}

.cta-long {
width: 20rem;
}

header .content-image {
width: 325px;
height: 160px;
}

article {
padding: 0 32px 4rem 32px;
}

section {
column-gap: 0;
row-gap: 1.6rem;
height: auto;
padding: 40px 0;
}

section:nth-of-type(odd),
section:nth-of-type(even)
{
grid-template:
"title"
"image"
"description";
}

.title {
margin: 0 0 0.4rem 0;
}

section .pc-hide {
display: none;
}

section .content-image {
width: 100%;
height: 100%;
}

.title {
font-size: 2.4rem;
line-height: 2.8rem;
}

.description {
font-size: 1.5rem;
}

footer {
position: relative;
}

.footer-box {
flex-wrap: wrap;
padding: 0 32px;
}

.copyright {
position: absolute;
left: 32px;
bottom: 32px;
}
}



0 css/reset.css → signin/css/reset.css
View file
Open in desktop
File renamed without changes.
Loading