diff --git a/README.md b/README.md index 6453761..4b104cf 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ # 11th_HTML-CSS -4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다. +강민석 프로필 페이지 추가 완료! \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..b375305 --- /dev/null +++ b/home.html @@ -0,0 +1,88 @@ + + + + + + + Profile + + + +
+
+
+
+

강민석's Profile

+
+
+
+

+ [자기소개]
+ 이름 : 강민석
+ 나이 : 25세
+ 전공 : 수학과
+ 포지션 : 백엔드
+ MBTI : ISFP +

+
+
+
+

나의 사진

+
+
+

+ [수강 중인 과목]
+ 데이터베이스시스템
+ 컴퓨터네트워크
+ 멀티코어프로그래밍
+ 기초머신러닝
+ 소프트웨어공학
+ 푸리에해석 및 응용 +

+
+
+

+ 좋아하는 운동 +

+
+
+

+ [노래방 애창곡]
+ izi - 응급실
+ 이승기 - 삭제
+ 윤종신 - 좋니
+ 김민석 - 취중고백
+ 성시경 - 너의 모든 순간 +

+
+
+

인생 영화

+
+
+ +
+ +
+
+ PC화면에서 접속해주세요! +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..422be6b --- /dev/null +++ b/style.css @@ -0,0 +1,192 @@ +*{ + box-sizing : border-box; + margin : 0; +} + +body{ + background-color: #f8f8f8; +} + +header{ + height : 40px; + background-color : black; +} + +main{ + height : 600px; + width : 750px; + margin : 0 auto; + background-color: rgb(247, 230, 233); +} + +footer{ + color : black; + font-size : 25px; + font-family : 'establishRoomNo703OTF'; + height : 200px; + background-color: rgba(247, 131, 247, 0.441); + text-align : center; + padding : 30px; +} + +#top{ + padding : 3px; + height : 35px; + background-color: rgb(238, 76, 76); + margin-bottom : 25px; + border-radius : 0 0 10px 10px; + color : white; + font-family : 'establishRoomNo703OTF'; + font-size : 20px; + 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{ + font-family: 'establishRoomNo703OTF'; + height : 80px; + background-color : rgb(247, 230, 233); + margin-bottom : 60px; + margin : 0 15px 60px 15px; + display : flex; + flex-wrap : wrap; + justify-content : space-around; +} + +section{ + height : 45%; + width : 30%; + background-color: white; + border-radius : 7px; +} + +section p{ + text-align : center; + font-family: 'establishRoomNo703OTF'; + position: relative; + padding : 20px; +} + +#introduce{ + /* padding : 30px; */ + font-size : 20px; + +} +.sel{ + border-radius : 7px; + background-color : rgba(0, 0, 0, 0.3); + position : absolute; + width : 100%; + height : 100%; +} + +#selfie{ + font-size : 23px; + color : white; + background-image : url("./image/selfie.jpg"); + background-size : cover; + background-repeat : no-repeat; + background-position : center; + position : relative; +} + + + +#selfie:hover{ + transform : scale(1.4); + transition : all 0.2s linear; +} + +#course{ + /* padding : 20px; */ + font-size : 16px; +} + +#football{ + color : white; + font-size : 23px; + /* padding : 20px; */ + background-image : url("./image/football.jpg"); + background-size : cover; + background-repeat : no-repeat; + background-position : center; +} + +#football:hover{ + transform : scale(1.4); + transition : all 0.2s linear; +} + +#sing{ + /* padding : 22px; */ + font-size : 17px; +} + +#movie{ + /* padding : 20px; */ + font-size : 23px; + color : white; + background-image : url("./image/potter.jpg"); + background-size : cover; + background-repeat : no-repeat; + background-position : center; +} + +#movie:hover{ + transform : scale(1.4); + transition : all 0.2s linear; +} + +#team{ + padding : 7px; + width : 465px; + height : 100%; + background-color: #f2776b91; + color : black; + text-align : center; + border-radius : 5px; + font-size : 14px; +} + +#hi{ + padding : 10px; + width : 220px; + height : 100%; + background-color: rgba(244, 177, 32, 0.642); + color : black; + border-radius : 5px; + font-size : 15px; + text-align : center; +} + +@font-face { + font-family: 'establishRoomNo703OTF'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/establishRoomNo703OTF.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +#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