서울에 있으니까 자꾸 뭔가 의무적으로 나가게된다.
집에 있기 아깝다는 생각이 든다.
그래서 오늘은 별마당 도서관에 다녀왔다.✨
책이 정말 많았다.
근데 맨 위쪽에 진열된 책은 어떻게 꺼내는 걸까
내일은 뮤지컬 펜레터랑 샤갈 특별전 표를 예매했다.
오전에는 공부하고 저녁에는 문화활동(?)해야지 크크
고등학교 때부터 펜레터 보고 싶었는데 이제야 보는구나...!
내일이 2021년 마지막 날이라니 실감이 안난다.
내년부터는 뮤지컬 청소년 할인도 못 받는구나 흑흑😭
암튼 오늘 오전부터 튜터링 웹을 만들기 시작했다.😁
이번 프로젝트의 목표는 <div> 안쓰기!
근데 <div> 대신에 <section>을 남발하고 있는거 같은데 이게 맞나싶네...ㅋㅋㅋ
일단 코딩부터하고 로고나 폰트, 내용은 추후에 변경할 생각이다.
아래는 오늘 진행한 분량...! 나도 손이 좀 빨랐으면 좋겠다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B.tutoring</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<section id="main_page">
<header>
<section class="logo_wrap">
<a class="logo_link" href="#">
<img src="./img/logo.png" alt="로고 이미지">
</a>
</section>
<ul class="menu_wrap">
<li class="menu">How it’s works</li>
<li class="menu">Become a tutor</li>
<li class="menu">FAQs</li>
<li class="menu">English (En)</li>
<li class="menu">About Us</li>
</ul>
</header>
<section class="info_wrap">
<section class="how_it_works">
<img src="./img/how_it_works.png" alt="">
<button class="how_it_works_btn buttons">Become a tutor now!</button>
</section>
<section class="become_tutor">
<section class="become_tutor_wrap">
<h1 class="h1">How it Works</h1>
<p>An outstanding place for better education!</p>
<ul class="square_wrap">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="start_tutoring_wrap">
<ul class="start_tutoring">
<li class="start_tutoring_title">Start tutoring with B.tutor</li>
<li class="start_tutoring_subtitle">We’re always looking for talented tutors.<br>
Set your own rate, get paid and make a difference.</li>
<li><button class="buttons">Become a tutor now!</button></li>
</ul>
<img src="./img/tutoring_ex.png" alt="">
</section>
</section>
<section class="FAQs">
<h1 class="h1">FAQs</h1>
<ul class="question_wrap">
<li class="question">Which countries do you operate?</li>
<li class="question">Subjects offered?</li>
<li class="question">School Curriculum offered?</li>
<li class="question">Do I set my own fee or is it a fixed fee?</li>
<li class="question">Do I have to download special software?</li>
</ul>
<button class="FAQs_btn">More FAQs</button>
</section>
</section>
<footer id="copyright">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<section></section>
<section></section>
</footer>
</section>
<!-- <section id="become_tutor_page">
<section>
<section></section>
<section></section>
<section></section>
</section>
</section> -->
</body>
</html>CSS
@font-face {
font-family: 'GmarketSansBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html, body {
height: 100%;
}
body {
font-family: 'GmarketSansMedium';
}
#main_page {
/* width: 100%; */
width: 1640px;
overflow: hidden;
}
.buttons {
width: 289px;
height: 58px;
background-color: #0066FF;
color: #FFFFFF;
border-radius: 8px;
border: none;
font-size: 18px;
cursor: pointer;
}
.h1 {
font-size: 48px;
color: #1C1C20;
}
/* .shadow {
color: #000 16%;
} */
/* header */
header {
display: flex;
align-items: center;
height: 89px;
background-color: #fff;
padding-left: 140.5px;
padding-right: 142.4px;
}
header .logo_wrap {
cursor: pointer;
padding-right: 63.3px;
}
header .logo_wrap .logo_link img {
width: 140px;
height: 45px;
}
header .menu_wrap {
width: 100%;
display: flex;
justify-content: space-between;
}
header .menu_wrap .menu:nth-child(4) {
margin-left: 473.2px;
}
/* info_wrap */
.info_wrap .how_it_works {
position: relative;
height: 690px;
background-color: #F8F8F8;
}
.info_wrap .how_it_works img {
position: absolute;
width: 100%;
margin-left: 19px;
bottom: 0;
}
.info_wrap .how_it_works .how_it_works_btn {
position: absolute;
left: 1012px;
top: 407px;
}
.info_wrap .become_tutor {
height: 1092px;
background-color: #F8F4EF;
padding-left: 140px;
}
.info_wrap .become_tutor .become_tutor_wrap h1 {
padding-top: 110px;
}
.info_wrap .become_tutor .become_tutor_wrap p {
font-size: 18px;
color: #1C1C20;
opacity: 0.8;
padding-bottom: 45px;
}
.info_wrap .become_tutor .become_tutor_wrap .square_wrap {
display: flex;
padding-right: 154px;
justify-content: space-between;
}
.info_wrap .become_tutor .become_tutor_wrap .square_wrap li {
width: 312px;
height: 357px;
background-color: #fff;
border-radius: 25px;
border: none;
}
.info_wrap .become_tutor .start_tutoring_wrap .start_tutoring .start_tutoring_title {
font-size: 44px;
color: #000000;
padding-top: 225px;
}
.info_wrap .become_tutor .start_tutoring_wrap {
position: relative;
display: flex;
}
.info_wrap .become_tutor .start_tutoring_wrap .start_tutoring .start_tutoring_subtitle {
font-size: 18px;
color: #000000;
padding-bottom: 18px;
}
.info_wrap .become_tutor .start_tutoring_wrap img {
position: absolute;
width: 920px;
height: 300px;
padding-top: 170px;
right: -111px;
}
.info_wrap .FAQs {
height: 750px;
background-color: #F8F8F8;
padding-left: 142px;
}
.info_wrap .FAQs h1 {
padding-top: 107px;
padding-bottom: 19px;
}
.info_wrap .FAQs .question_wrap {
}
.info_wrap .FAQs .question_wrap .question {
font-size: 20px;
color: #1C1C20;
border-bottom: 1px solid #E7E7E7;
padding-top: 30px;
padding-bottom: 30px;
}
.info_wrap .FAQs .FAQs_btn {
width: 289px;
height: 58px;
background-color: #F5F5F5;
font-size: 18px;
color: #0066FF;
border: 1px solid #0066FF;
border-radius: 3px;
margin-top: 47px;
cursor: pointer;
}
/* copyright */
#copyright {
height: 388px;
background-color: #273343;
}