diff --git a/home.html b/home.html new file mode 100644 index 0000000..2e8f358 --- /dev/null +++ b/home.html @@ -0,0 +1,78 @@ + + + + + + + Profile + + + +
+ +
+
+
My profile
+
+
+

+ [내 프로필]
+
+ 이름 : 노현서
+ 포지션 : 백엔드
+ 학과 : 물리학과
+ 생년월일 : 2001.02.24
+

+
+

+ [MBTI]
+
+ INTJ
+

+
+

+ [좋아하는 음식]
+
+ 밥
+ 고기
+ 냉면
+

+
+

[인생영화]
+
+ 휴고
+

+
+
+

[요즘 자주 듣는 노래]
+
+ 실리카겔 - NO PAIN
+

+
+

[반려동물]
+
+ (리트리버 희망)
+

+
+ +
+ + +
+
+ PC로 접속해주세요 +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..3a3a618 --- /dev/null +++ b/style.css @@ -0,0 +1,166 @@ +@font-face { + font-family: 'GangwonEduPowerExtraBoldA'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +*{ + box-sizing: border-box; + margin: 0; + font-family: 'GangwonEduPowerExtraBoldA'; +} +body{ + background-color:#f8f8f8; +} +header{ + height:40px; + background-color: #333; +} +main{ + height:600px; + width: 750px; + margin: 0 auto; + background-color: #f8f8f8; +} +footer{ + height: 30px; + background-color: #fdf8f8; + text-align: center; + color: #3366cc; + padding: 50px; + +} +#top{ + height:30px; + background-color: #d1e6fb; + margin-bottom: 25px; + border-radius: 0 0 10px 10px; + color:#333; + font-size: 18px; + text-align: center; + line-height: 35px; +} +#container{ + height:410px; + padding: 10px; + background-color: white; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-content: space-around; +} +aside{ + height: 110px; + background-color: #fdf8f8; + margin-bottom: 60px; + margin: 0 15px 60px 15px; +} +section{ + height: 45%; + width: 30%; + background-color: rgb(185, 185, 185); + border-radius: 7px; +} +#team{ + width: 470px; + height: 100%; + background-color: #c4d2aa; + color: #070303; + border-radius: 5px; + font-size: 14px; + float: left; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + line-height: 1.3; +} +#hi{ + width:230px; + height:100%; + background-color: rgb(229, 180, 192); + color: black; + border-radius: 5px; + font-size: 15px; + float: right; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + line-height: 1.3; +} +section p { + padding: 30px; + text-align: center; + position: relative; +} + +#profile:hover { + background-image: url("./image/blue.jpg"); + background-size: cover; + height: 45%; + width: 30%; + transform: scale(1.4); + transition: all 0.2s linear; +} + +#mbti { + background-image: url("./image/mbti.jpg"); + background-size: cover; + height: 45%; + width: 30%; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; +} + +#movie { + background-image: url("./image/movie.jpg"); + background-size: cover; + height: 45%; + width: 30%; +} + +#dog { + background-image: url("./image/dog.jpg"); + background-size: cover; + height: 45%; + width: 30%; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; +} + +#music { + background-image: url("./image/music.jpg"); + background-size: cover; + height: 45%; + width: 30%; + position: relative; + color: black; +} + +.bg{ + background-color: hwb(0 78% 22% / 0.438); + width: 100%; + height: 100%; + border-radius:5px; + position: absolute; +} + +#alert { + display: none; + text-align: center; + padding-top: 300px; +} + +@media(max-width: 800px){ + #main-container{ + display: none; + } + #alert{ + display: block; + } +} \ No newline at end of file