Skip to content

[4조] 김성현 과제 제출합니다 #7

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

[4조] 김성현 과제 제출합니다 #7

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
116 changes: 116 additions & 0 deletions home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html lang = "ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>멋쟁이사자처럼</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<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=Single+Day&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>

</head>
<body>
<div id="alert">
PC화면에서 접속해주세요!
Copy link

@Goonco Goonco Apr 12, 2023

Choose a reason for hiding this comment

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

좋은데요?

</div>
<div id="main-container">
<header>

</header>



<main>
<div id="top">Check My profile</div>
<div id="container">
<section>
<p>
[내 프로필]<br>
이름 : 김성현<br>
포지션 : 백엔드<br>
학과 : 경영/컴퓨터 공학<br>
생년월일 : 1998.11.08<br>
</p>
</section>
<section id= "mbti">
<div class="entj"></div>
<p>
[MBTI]<br>
<a href="https://namu.wiki/w/ENTJ" target="_blank">ENTJ</a><br>
뭔지 잘 모름 솔직히<br>
Copy link

@fressh1127 fressh1127 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>

<ol id="order">
[좋아하는 음식]
<li>치킨<br></li>
Copy link

@wchan0409 wchan0409 Apr 12, 2023

Choose a reason for hiding this comment

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

서브웨이 추가 정정 부탁드립니다

<li>초밥<br></li>
Copy link
Contributor

@chxxrin chxxrin Apr 12, 2023

Choose a reason for hiding this comment

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

저도 초밥 좋아해요

<li>샐러드<br></li>
</ol>


</section>
<section id="movie">
<div class="movie-content">
<p>
[인생영화]<br>
<a id="movie_image" href="https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%96%B4%EB%B0%94%EC%9B%83%ED%83%80%EC%9E%84">어바웃타임</a><br>
뷰티인사이드<br>
</p>
</div>
</section>
<section id="song">
<div class="sing"></div>
<p>
[요즘 자주 듣는 노래]<br>
니가 보고 싶은 밤 - 윤딴딴<br>
당신과는 천천히 - 장범준<br>
</p>

</section>
<section>
<p>
[싫어하는 날씨]<br>
오늘<br>
</p>
</section>

</div>
<aside>
<div id="team">
<p>
[디버깅조]<br>
1. 정인영은 코로나에 4번 걸렸다<br>
Copy link

@rmdnps10 rmdnps10 Apr 12, 2023

Choose a reason for hiding this comment

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

코로나 3번입니다

2. 송경호가 키우는 고양이는 9kg이다.<br>
3. 강민석의 시력은 왼쪽 0.1 오른쪽 1.0이다.<br>


</p>
</div>
<div id="hi">
[정답]<br>
X<br>
O<br>
X<br>

</div>

</aside>
</main>
<footer>
Copyright 2023 서강대학교 멋쟁이사자처럼 김성현.All right Reserved.
</footer>

</div>

</body>
</html>
164 changes: 164 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@


*{
box-sizing : border-box;
margin: 0px;
font-family: 'Single Day', cursive;
}
title{
font-family: 'Single Day', cursive;
}
body{
background-color: rgb(239, 239, 239);
}
header{
height: 30px;
width:100%;
background-color: rgb(43, 51, 61);
}
main{
height :600px;
width:750px;
margin: 0 auto;
background-color: rgb(219, 219, 219);
}

footer{
height: 200px;
background-color: white;
text-align: center;
color:gray;
padding :50px;
}
#alert{
display:none;
text-align:center;
padding-top:300px;
}

#top{
height: 35px;
font-family: 'Single Day', cursive;
background-color: rgb(240, 178, 229);
margin-bottom: 30px;
border-radius: 0 0 10px 10px;
color: white;
font-size: 18px;
text-align: center;
width:100%;
}
#container{
height: 410px;
padding: 10px;
display:flex;
flex-wrap: wrap;
justify-content: space-around;
align-content:space-around;
}
aside{
height: 110px;
background-color: white(225, 201, 225);
margin-bottom: 60px;
margin: 0 15px 60px 15px;
flex-wrap:flex;
justify-content: space-around;

}

#team{
width:470px;
height:100%;
background-color : #a9ebfb;
color: white;
border-radius: 5px;
font-size: 15px;
float:left;
text-align: center;
color:black;
border: solid 2px #8ce0f6
}
#hi{
width : 230px;
height:100%;
background-color: pink;
color:black;
border-radius: 5px;
font-size : 15px;
float:right;
border : solid 2px rgb(255, 162, 177)
}
#hi :hover{
font-weight: bold;
font-size:20px;
color:black;
}
section{
height: 45%;
width: 30%;
background-color: rgb(255, 255, 255);
border-radius: 7px;
border: solid 3px black;
padding : 30px;
}
p:hover{
font-weight: bold;
font-size:20px;
color:skyblue;

}
#order:hover{
font-weight: bold;
font-size:20px;
color:skyblue;
position:absolute;
}
#order{

text-align:center;
}
section p {

text-align:center;
}
#mbti:hover{
background-image: url("./mbti.jpeg");
background-size: cover;
height: 45%;
width: 30%;
position:relative;
color: transparent;
}
.entj{
width:20%;
height:20%;
border-radius: 5px;
position:absolute;
}
.movie-content{

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 1s ease-in-out;
}

#movie{
background-image: url("./movie.jpeg");
background-size: cover;
height: 45%;
width: 30%;
position: relative;

}
@media(max-width:800px)
{
#main-container{
display:none;
}
#alert{
display:block;
}
}