Skip to content

Commit

Permalink
refactor(mentor): 스프린트 미션 3
Browse files Browse the repository at this point in the history
  • Loading branch information
@KorpoQ
KorpoQ committed Jun 7, 2024
1 parent 8ba50fc commit c674fd6
Show file tree
Hide file tree
Showing 13 changed files with 985 additions and 91 deletions.
3 changes: 3 additions & 0 deletions assets/common/logo-mobile.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/common/meta-image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions css/common.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css");

@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");
* {
font-family: Pretendard, sans-serif;
box-sizing: border-box;
Expand Down Expand Up @@ -77,4 +77,4 @@ body {

.button:disabled {
background-color: var(--disabled);
}
}/*# sourceMappingURL=common.css.map */
1 change: 1 addition & 0 deletions css/common.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

227 changes: 184 additions & 43 deletions css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
/* Header */
header {
/* Heading nav */
header#gnb {
display: flex;
justify-content: space-between;

border-bottom: #dfdfdf 1px solid;
position: fixed;
top: 0;
left: 0;

width: 100%;
height: 70px;
padding: 10px 200px;
background-color: #ffffff;

z-index: 999;
}

#gnb {
nav#heading-nav {
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -27,6 +24,10 @@ header {
width: 153px;
}

.logo-mobile {
display: none;
}

/* Banners */
.banner {
position: relative;
Expand All @@ -38,14 +39,12 @@ header {
background-size: auto;
background-position: 80% bottom;
}

.home-main-top.banner {
.banner.home-main-top {
background-image: url("../assets/index/Img_home_top.png");
margin-top: 70px;
padding: 0 200px;
}

.home-main-bottom.banner {
.banner.home-main-bottom {
background-image: url("../assets/index/Img_home_bottom.png");
padding: 0 200px;
}
Expand All @@ -54,68 +53,75 @@ header {
width: 100%;
max-width: 1200px;
height: 540px;

display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;

text-align: left;
gap: 32px;
}

.home-main-title {
display: inline-block;
font-size: 2.5rem;
font-weight: 700;
line-height: 56px;
letter-spacing: 0.02em;
color: var(--gray700);
}

h1.home-main-title {
width: 320px;
}

/* Contents */
.home-main-section {
display: flex;
justify-content: center;
align-items: center;

width: 100%;
max-width: 100vw;
max-width: 1920px;
height: 720px;
margin: 0 auto;
margin-bottom: 24px;
}

.home-main-content {
display: flex;
justify-content: flex-start;
align-items: center;

width: 100%;
width: 1200px;
padding: 138px 0;
padding: 0 0;
gap: 64px;
}

.home-main-content.home-main-reverse {
flex-direction: row-reverse;
text-align: right;
}

.home-main-service {
display: flex;
flex-direction: column;
gap: 18px;
}

.home-main-reverse.home-main-content {
flex-direction: row-reverse;
text-align: right;
}
.home-main-reverse .home-main-service {
align-items: flex-end;
}

p.service-title {
font-size: 1.125rem;
font-weight: 700;
line-height: 25.2px;
color: var(--brand-blue);
} /* h2 = .home-main-title */
}

h2.home-main-title {
width: 300px;
}

p.service-desc {
font-size: 1.5rem;
font-weight: 500;
line-height: 28.8px;
letter-spacing: 0.08em;
}

Expand All @@ -129,48 +135,183 @@ footer {
padding: 30px 200px;
background-color: var(--gray900);
}

.home-main-footer-content {
footer .home-main-footer-content {
width: 100%;
max-width: 1520px;
display: flex;
justify-content: space-between;
align-items: center;
}

.footer-left {
footer .footer-left {
flex: 1;
text-align: left;
}

.footer-left p {
footer .footer-left p {
color: var(--gray400);
font-family: "Abel", sans-serif;
}

.footer-center {
footer .footer-center {
display: flex;
flex: 1;
justify-content: center;
text-align: center;
gap: 30px;
}

.footer-center a {
footer .footer-center a {
text-align: center;
text-decoration: none;
color: var(--gray200);
font-family: "Abel", sans-serif;
}

.footer-right {
footer .footer-right {
display: flex;
justify-content: right;
align-items: flex-start;
flex: 1;
text-align: right;
}

.footer-icons a {
footer .footer-icons li {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 10px;
}

.footer-icons img {
footer .footer-icons img {
width: 20px;
height: 20px;
}

/* =============================== */
/* ========= Tablet Size ========= */
/* =============================== */
@media (max-width: 1199px) {
header#gnb {
padding: 10px 24px;
}
.logo {
width: 153px;
}
h1.home-main-title {
width: 100%;
}
/* Banners */
.banner {
background-position: center bottom;
}
.banner.home-main-top {
padding: 0 24px 0 24px;
height: 771px;
}
.banner.home-main-bottom {
height: 927px;
}
.home-main-desc {
padding-top: 60px;
justify-content: flex-start;
align-items: center;
text-align: center;
height: 771px;
gap: 32px;
}
/* Contents */
.home-main-section {
height: auto;
padding: 24px;
}
.home-main-content {
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
max-width: 1200px;
height: auto;
gap: 36px;
}
.home-main-content.home-main-reverse {
text-align: right;
flex-direction: column;
}
.home-main-content img {
width: 100%;
}
.home-main-service {
width: 100%;
}
p.service-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--brand-blue);
}
h2.home-main-title {
width: 100%;
font-size: 2rem;
line-height: 44.8px;
}
p.service-desc {
font-size: 1.125rem;
font-weight: 500;
letter-spacing: 0.08em;
}
/* Footer */
footer {
padding: 30px 160px;
}
}
/* =============================== */
/* ========= Mobile Size ========= */
/* =============================== */
@media (max-width: 767px) {
/* Heading nav */
.logo {
display: none;
}
.logo-mobile {
display: block;
}
h1.home-main-title {
width: 310px;
font-size: 2rem;
line-height: 44.8px;
}
/* Banners */
.banner.home-main-top {
padding: 0 24px 0 24px;
height: 540px;
background-size: auto 50%;
}
.banner.home-main-bottom {
height: 540px;
background-size: auto 50%;
}
.banner.home-main-bottom .home-main-desc {
padding-top: 84px;
}
.home-main-desc {
padding-top: 44px;
justify-content: flex-start;
align-items: center;
text-align: center;
height: 540px;
gap: 32px;
}
.home-main-desc .btn-large {
width: 154px;
height: 48px;
border-radius: 40px;
padding: 12px 20px;
font-size: 1rem;
}
/* Footer */
footer {
padding: 0px;
}
footer .home-main-footer-content {
padding: 30px 30px 30px 30px;
}
footer .footer-left {
position: absolute;
left: 30px;
bottom: 30px;
}
footer .footer-center {
justify-content: flex-start;
}
}/*# sourceMappingURL=index.css.map */
1 change: 1 addition & 0 deletions css/index.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c674fd6

Please sign in to comment.