whatisthis?
Project. 반응형 페이지 - Review + README.md 본문
GitHub - thisisyjin/Bootstrap-prac: Practice BootStrap Grid System+ Page Layout (HTML/CSS)
Practice BootStrap Grid System+ Page Layout (HTML/CSS) - GitHub - thisisyjin/Bootstrap-prac: Practice BootStrap Grid System+ Page Layout (HTML/CSS)
github.com
Project. 반응형 페이지
제작기간 : 1일
Design, Assetst REF : 포스팅 하단 참조
- Bootstrap Grid System + CSS MediaQuery 연습용
- Page-Layout 연습용
🔻 gh-pages로 구현해봄.
Final Project
Program Frontend Dev. Immersive Course Your best course for career transformation in front-end developement. This full-time bootcamp features expert instruction, one-on-one career coaching, and connections to top employers to get you hired.
thisisyjin.github.io
📌 전체 코드
🔻 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Final Project</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="grid.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="landing">
<div class="container">
<div class="row">
<div class="col-12">
<div class="landing-content">
<h1 class="landing-title">
Change your carrer,<br />Change your life
</h1>
<p class="landing-desc">
Get ahead with expert-led training in <br />
frontend development
</p>
<div class="button-group">
<a href="#" class="fill-button"> Apply now </a>
<a href="#" class="fill-button inverted"> Learn more </a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="service">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h2 class="service-title">
Master the Fundamentals while Exploring new Tech
</h2>
<p class="service-desc">
We teach cutting-edge tech Full Stack Javascript as well as
Computer Science fundamentals.
</p>
</div>
<div class="col-12 col-md-6">
<h2 class="service-title">
Develop Production Level Web Applications
</h2>
<p class="service-desc">
You put your knowledge into action with carefully designed
assignments and personal software engineering projects.
</p>
</div>
</div>
</div>
</section>
<section class="program section">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10">
<strong class="section-category">Program</strong>
<h1 class="section-title">
Frontend Dev. <br />
Immersive Course
</h1>
<p class="section-desc">
Your best course for career transformation in front-end
developement. This full-time bootcamp features expert instruction,
one-on-one career coaching, and connections to top employers to
get you hired.
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4">
<a href="#" class="program-card">
<img
src="./assets/img-fulltime-campus.png"
alt="fulltime-campus"
/>
<strong>Full-Time On Campus</strong>
</a>
</div>
<div class="col-12 col-md-4">
<a href="#" class="program-card">
<img
src="./assets/img-fulltime-remote.png"
alt="fulltime-remote"
/>
<strong>Full-Time Remote</strong>
</a>
</div>
<div class="col-12 col-md-4">
<a href="#" class="program-card">
<img src="./assets/img-parttime-flex.png" alt="parttime-flex" />
<strong>Part-Time Flex</strong>
</a>
</div>
</div>
</div>
</section>
<section class="curriculum section">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6">
<strong class="section-category">Curriculum</strong>
<h1 class="section-title">Dive into the web development</h1>
<p class="section-desc">
Dive into the software development <br />
environment and the basics of computing, networks, and data
structures.
</p>
<a href="#" class="fill-button">Apply now</a>
</div>
<div class="col-12 col-md-6">
<div class="curriculum-image">
<img src="./assets/img-curriculum.png" alt="Curriculum" />
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p class="curriculum-detail-desc">
<strong>Real-World Projects.</strong> Solve challenges that
professional engineers face as you work individually and in teams
with designers.
</p>
</div>
<div class="col-12 col-md-6">
<p class="curriculum-detail-desc">
<strong>Instructor Support.</strong> Get guidance, feedback, and
more during scheduled one-on-one check-ins.
</p>
</div>
</div>
</div>
</section>
<aside class="subscription">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-5">
<div class="subscription-image">
<img src="./assets/img-banner.png" alt="Subscribe us" />
</div>
</div>
<div class="col-12 col-md-7">
<h1 class="subscription-title">Stay with us</h1>
<p class="subscription-desc">
Subscribe to our email newsletter to stay up to date on the latest
updates
</p>
<form action="#" method="POST" class="subscription-form">
<div class="input-group">
<input type="email" placeholder="Enter your email" />
<button type="submit" class="fill-button">Get started</button>
</div>
<p class="form-notice">
Cancel any time. Check out <a href="#">Terms of Use.</a>
</p>
</form>
</div>
</div>
</div>
</aside>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-12">
<ul class="footer-links">
<li class="footer-link"><a href="#">Terms</a></li>
<li class="footer-link"><a href="#">Privacy</a></li>
<li class="footer-link"><a href="#">License</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
🔻 style.css
* {
box-sizing: border-box;
margin: 0;
}
body {
width: 100%;
font-family: "DM Sans", sans-serif;
}
/* Reset CSS */
a {
text-decoration: none;
color: inherit;
}
button,
input,
textarea {
font-family: "DM Sans", sans-serif;
font-size: 16px;
}
button:focus,
button:active,
input:focus,
input:active,
textarea:focus,
textarea:active {
outline: none;
box-shadow: none;
}
ul,
ol,
li {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
p {
font-size: 16px;
line-height: 1.5;
color: #2b292d;
letter-spacing: 0.01em;
}
.fill-button {
display: inline-flex;
justify-content: center;
align-items: center;
width: 140px;
height: 48px;
border: none;
border-radius: 2px;
color: #fff;
background-color: #3040c4;
font-size: 15px;
line-height: 1.6;
font-weight: 700;
letter-spacing: -0.05em;
transition: opacity 300ms ease-in-out;
}
.fill-button.inverted {
background-color: #fff;
color: #3040c4;
}
.fill-button:hover {
opacity: 0.5;
}
.section {
padding: 80px 0;
}
.section-category {
display: block;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.section-title {
color: #2b292d;
font-size: 34px;
line-height: 1.0588235;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
/* Landing Page */
.landing {
background-color: #fdded8;
text-align: center;
}
.landing-content {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
}
.landing-title {
font-size: 40px;
line-height: 1;
letter-spacing: -0.05em;
color: #2b292d;
margin-bottom: 24px;
}
.landing-desc {
margin-bottom: 20px;
}
.landing .button-group {
display: flex;
justify-content: center;
align-items: center;
}
.landing .button-group .fill-button:first-child {
margin-right: 8px;
}
/* Service Page */
.service {
padding: 80px 0px;
background-color: #f4f5f7;
}
.service-title {
font-size: 22px;
line-height: 1.36363636;
letter-spacing: -0.04em;
color: #2b292d;
margin-bottom: 16px;
}
.service .col-12:first-child {
margin-bottom: 40px;
}
/* Program Page */
.program .row:first-child {
margin-bottom: 32px;
}
.program .col-md-4 {
margin-bottom: 20px;
}
.program .col-md-4:last-child {
margin-bottom: 0;
}
.program .section-category {
color: #009b4d;
}
.program-card {
display: block;
padding: 24px 0 32px;
border-radius: 8px;
text-align: center;
background-color: #fff;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05),
inset 0px 1px 0px rgba(255, 255, 255, 0.1);
transition: background-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}
.program-card:hover {
background-color: #3141c5;
box-shadow: 0px 13px 18px rgba(0, 0, 0, 0.15),
0px 11px 55px rgba(0, 0, 0, 0.07);
}
.program-card:hover strong {
color: #fff;
}
.program-card img {
display: block;
width: auto;
height: 195px;
margin: 0 auto 16px;
}
.program-card strong {
font-size: 18px;
line-height: 1.33333333;
letter-spacing: -0.02em;
transition: color 500ms ease-in-out;
}
/* Curriculum Page */
.curriculum .section-category {
color: #0189d1;
}
.curriculum-image {
display: none;
}
.curriculum-detail-desc {
font-size: 15px;
line-height: 1.466666667;
color: #2b292d;
letter-spacing: -0.01em;
}
.curriculum .section-desc {
margin-bottom: 32px;
}
.curriculum .row:first-child {
margin-bottom: 48px;
}
.curriculum .row:last-child .col-12:first-child {
margin-bottom: 40px;
}
/* Subscription Page */
.subscription {
background-color: #f2f8fa;
text-align: center;
padding: 40px 0;
}
.subscription-image {
padding: 25px;
margin-bottom: 16px;
}
.subscription-image img {
display: block;
width: auto;
height: 190px;
margin: 0 auto;
}
.subscription-title {
margin-bottom: 16px;
font-size: 32px;
line-height: 1;
letter-spacing: -0.05em;
color: #2b292d;
}
.subscription-desc {
margin-bottom: 24px;
}
.subscription .input-group {
margin-bottom: 8px;
}
.subscription .input-group input {
display: block;
width: 100%;
height: 48px;
padding: 0 16px;
border: none;
border-radius: 2px;
margin-bottom: 8px;
color: #7b7b7e;
background-color: #fff;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.01em;
}
.subscription .input-group .fill-button {
width: 100%;
cursor: pointer;
}
.subscription-form .form-notice {
font-size: 13px;
line-height: 1.5384615;
letter-spacing: 0;
color: #7b7b7e;
}
.subscription-form .form-notice a {
cursor: pointer;
text-decoration: underline;
color: #3040c4;
}
/* Footer Page */
.footer {
padding: 24px 0;
}
.footer-link {
margin-bottom: 8px;
}
.footer-link:last-child {
margin-bottom: 0;
}
.footer-link a {
font-size: 14px;
line-height: 1.71428571;
letter-spacing: -0.01em;
color: #807f81;
}
/* >= 768px (Desktop) */
@media screen and (min-width: 768px) {
p {
font-size: 22px;
line-height: 1.36363636;
}
.fill-button {
width: 160px;
height: 56px;
font-size: 18px;
line-height: 1.5555555;
}
.section {
padding-bottom: 96px;
}
.section-category {
font-size: 22px;
line-height: 1.09090909;
margin-bottom: 16px;
}
.section-title {
font-size: 56px;
line-height: 1;
margin-bottom: 32px;
}
/* Landing */
.landing-content {
height: auto;
padding: 120px 0;
}
.landing-title {
font-size: 70px;
line-height: 1.02857143;
margin-bottom: 32px;
}
.landing-desc {
margin-bottom: 32px;
}
.landing .button-group .fill-button:first-child {
margin-right: 16px;
}
/* Service */
.service-title {
font-size: 26px;
line-height: 1.30769231;
}
.service .col-12:first-child {
margin-bottom: 0;
}
/* Program */
.program {
text-align: center;
}
.program .row:first-child {
margin-bottom: 72px;
}
.program-card img {
margin-bottom: 24px;
}
.program-card strong {
font-size: 20px;
line-height: 1.2;
}
/* Curriculum */
.curriculum .row:first-child {
margin-bottom: 24px;
}
.curriculum .row:last-child .col-12:first-child {
margin-bottom: 0;
}
.curriculum .section-desc {
margin-bottom: 72px;
}
.curriculum-detail-desc {
font-size: 18px;
line-height: 1.44444444;
}
.curriculum-image {
display: block;
}
.curriculum-image img {
display: block;
width: 100%;
max-width: 425px;
height: auto;
}
/* Subscription */
.subscription {
text-align: left;
padding: 80px 0;
}
.subscription-image {
padding: 8px 0;
}
.subscription-image img {
height: 285px;
margin-left: 0;
}
.subscription-title {
font-size: 40px;
}
.subscription .input-group {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.subscription .input-group input {
height: 56px;
font-size: 18px;
line-height: 1.3333333;
margin-bottom: 0;
margin-right: 8px;
}
.subscription .input-group .fill-button {
flex-shrink: 0;
width: 160px;
}
.subscription-form .form-notice {
font-size: 14px;
line-height: 1.7142857143;
}
/* footer */
.footer {
padding: 16px 0;
}
.footer-links {
display: flex;
align-items: center;
}
.footer-link {
margin-bottom: 0;
margin-right: 16px;
}
}
/* Custom Grid System - Fix container Width */
@media screen and (min-width: 1200px) {
.container {
max-width: 960px !important;
}
}
🔻 Page Preview
🔻 Design File
Figma
Created with Figma
www.figma.com
🔻Reference Lecture
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'PROJECT > WEB' 카테고리의 다른 글
| Project - Rainy-player App (재구성) (0) | 2022.05.01 |
|---|---|
| [project] For You 인테리어 사무 정보 관리 사이트 기획서 (0) | 2022.03.05 |
| Project. 반응형 페이지 - (7) Footer Section (0) | 2022.03.02 |
| Project. 반응형 페이지 - (6) Subscription Section (0) | 2022.03.02 |
| Project. 반응형 페이지 - (5) Curriculum Section (0) | 2022.03.02 |
'PROJECT/WEB' Related Articles
more
