diff --git a/home.html b/home.html new file mode 100644 index 0000000..f1ae91d --- /dev/null +++ b/home.html @@ -0,0 +1,116 @@ + + + + + + + + + + 멋쟁이사자처럼 + + + + + + + + + + +
+ PC화면에서 접속해주세요! +
+
+
+ +
+ + + +
+
Check My profile
+
+
+

+ [내 프로필]
+ 이름 : 김성현
+ 포지션 : 백엔드
+ 학과 : 경영/컴퓨터 공학
+ 생년월일 : 1998.11.08
+

+
+
+
+

+ [MBTI]
+ ENTJ
+ 뭔지 잘 모름 솔직히
+

+
+
+ +
    + [좋아하는 음식] +
  1. 치킨
    2. +
  2. 초밥
    3. +
  3. 샐러드
    4. +
+ + +
+
+
+

+ [인생영화]
+ 어바웃타임
+ 뷰티인사이드
+

+
+
+
+
+

+ [요즘 자주 듣는 노래]
+ 니가 보고 싶은 밤 - 윤딴딴
+ 당신과는 천천히 - 장범준
+

+ +
+
+

+ [싫어하는 날씨]
+ 오늘
+

+
+ +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ab9ca43 --- /dev/null +++ b/style.css @@ -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; + } +} \ No newline at end of file