Skip to content

[3조] 김규빈 과제 제출합니다. #22

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
kyubiin wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[3조] 김규빈 과제 제출합니다. #22

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
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# 11th_HTML-CSS
4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다.

지금은 4월 12일 18시57분
Copy link

@sunmyeonglee sunmyeonglee Apr 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이제 지금은 4월 12일 19시 15분!

Copy link

@nexdavid2020 nexdavid2020 Apr 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ㅎㄹㅎㅇㅎㅇㅎㅇㅎㅇ~~

Copy link

@slsl2 slsl2 Apr 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ㅎㅎㅎ

87 changes: 87 additions & 0 deletions home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main-container">
<div id="alert">
PC화면에서 접속해주세요!
</div>
<header></header>
<main>
<div id="top">My profile</div>
<div id="container">
<section>
<p>
[내 프로필]<br>
이름 : 김규빈<br>
포지션 : 백엔드<br>
학과 : 영문과<br>
생년월일 : 2001.03.14
Copy link

@Koyujin815 Koyujin815 Apr 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헉 생일이 화이트데이!!

</p>
</section>

<section id="mbti">
<div class="bg"></div>
<p>
[MBTI]<br>
ESTP<br>
모험을 즐기는 사업가<br>
</p>
</section>

<section>
<p>
[좋아하는 음식]<br>
초밥<br>
고기<br>
</p>
</section>

<section id="movie">
<div class="bg"></div>
<p>
[인생영화]<br>
해리포터<br>
</p>
</section>
<section id="music">
<p>
[요즘 자주 듣는 노래]<br>
헤이즈 - 비가오는날엔<br>
</p>
</section>
<section id="hobby">
<div class="bg"></div>
<p>
[취미]<br>
롤<br>
</p>
</section>
</div>
<aside>
<div id="team">
<p>
[디버깅 3조]<br>
디버깅 3조에는 entj가 세명이다<br>
건화는 소주가 아닌 맥주파이다<br>
선명이는 메탈리카, 뮤즈 등 락광팬이다<br>
</p>
</div>
<div id="hi">
<p>
멋쟁이사자처럼🦁<br>
아기사자 11기<br>
</p>
</div>
</aside>
</main>
<footer>Copyright © 2023 서강대학교 멋쟁이사자처럼🦁 김규빈. All right Reserved.</footer>
</div>
</body>
</html>
163 changes: 163 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
@font-face {
font-family: 'TTCrownMychewR';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/TTCrownMychewR.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
*{
box-sizing: border-box;
margin: 0;
font-family: 'TTCrownMychewR';
}

header{
height: 40px;
background-color: #333;
}

main{
height: 600px;
width: 750px;
margin: 0 auto;
background-color: #f8f8f8;
}
#alert{
display: none;
text-align: center;
padding-top: 300px;
}
@media(max-width: 800px){
#main-container{
display: none;
}

#alert{
display: block;
}
}
footer{
height: 200px;
background-color: white;
text-align: center;
color: rgb(170, 170, 170);
padding: 50px;

}

#top{
height: 35px;
background-color: #f0cdea;
margin-bottom: 25px;
border-radius: 0 0 10px 10px;
color: white;
font-size: 18px;
text-align: center;
line-height: 35px;
}

#container{
height: 410px;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}

aside{
height: 110px;
background-color: #f8f8f8;
margin-bottom: 60px;
margin: 0 15px 60px 15px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
}
aside p {
padding: 30px;
text-align: center;
}
section{
height: 45%;
width: 30%;
background-color: white;
border-radius: 7px;
}
section p {
padding: 30px;
text-align: center;
position: relative;
}
#mbti{
background-image: url("./images/estp.png");
background-size: cover;
height: 45%;
width: 30%;
font-family: 'TTCrownMychewR';
position: relative;
color: white;
}
#mbti:hover{
transform: scale(1,4);
transition: all 02.s linear;
}
#movie{
background-image: url("./images/potter.jpeg");
background-size: cover;
height: 45%;
width: 30%;
position: relative;
color: white;
}
#movie:hover{
transform: scale(1,4);
transition: all 02.s linear;
}
.bg{
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
border-radius: 5px;
position: absolute;
}
#music{
/* background-image: url("./images/heize.jpeg");
background-size: cover; */
height: 45%;
width: 30%;
font-family: 'TTCrownMychewR';
}
#hobby{
background-image: url("./images/lol.jpeg");
background-size: cover;
height: 45%;
width: 30%;
position: relative;
color: white;
}
#hobby:hover{
transform: scale(1,4);
transition: all 02.s linear;
}
#team{
width: 470px;
height: 100%;
background-color: #9cb4d4;
color: white;
border-radius: 5px;
font-size: 15px;
font-family: 'TTCrownMychewR';
}


#hi{
width: 230px;
height: 100%;
background-color: pink;
color: black;
border-radius: 5px;
font-size: 15px;
font-family: 'TTCrownMychewR';
text-align: center;
}