diff --git a/README.md b/README.md index 6453761..3448444 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # 11th_HTML-CSS -4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다. + +문소정의 4월 5일자 실습입니다. \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..01592e6 --- /dev/null +++ b/home.html @@ -0,0 +1,99 @@ + + + + + + + Home + + + + + +
+
+
+
+

My Page

+
+
+
+

+ [내 프로필]
+ 이름: 문소정
+ 포지션: 프론트엔드
+ 학과: 컴퓨터공학과👩‍💻
+ 생년월일: 2001.02.27
+

+
+
+
+

+ [MBTI]
+ INTP👩‍🔬
+ 논리술사
+ N/S T/P는 반반!
+

+ +
+
+

+ [좋아하는 음식🍽️]
+ 떡볶이
+ 마라탕
+ 연어
+ 마제소바
+

+
+
+
+

+ [인생영화🎬]
+ everything everywhere all at once
+

+
+
+

+ [노래 ᕷ˖°]
+ cupid💘
+ by fiftyfifty +

+ +
+
+
+

+ [취미]
+ 타로보기✨
+ 다이어리 꾸미기
+

+ +
+
+ +
+ +
+
+ PC 화면에서 접속해주세요! +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f1ad202 --- /dev/null +++ b/style.css @@ -0,0 +1,199 @@ +@font-face { + font-family: 'KimjungchulGothic-Bold'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Bold.woff2') format('woff2'); + font-weight: 400; + font-style: normal; +} + +*{ + box-sizing: border-box; + margin:0; + font-family: 'KimjungchulGothic-Bold'; +} + +body{ + background-color: rgba(255, 255, 255, 0.662); + +} + +header{ + height: 40px; + background-color:rgb(230, 245, 220); +} + +main{ + height: 600px; + width: 750px; + margin: 0 auto; + background-color: rgb(159, 182, 159); +} + +footer{ + height: 200px; + background-color: rgb(230, 245, 220); + text-align: center; + color:rgba(63, 66, 66, 0.662); + padding: 20px; +} + +#top{ + height: 35px; + background-color:honeydew; + margin-bottom: 25px; + border-radius: 0 0 10px 10px; + color: rgb(28, 58, 41); + font-size: 18px; + text-align: center; + line-height: 35px; +} + +#container{ + height: 410px; + padding: 10px; + /* background-color:beige;*/ + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-content: space-around; + +} + +aside{ + height: 110px; + background-color:rgb(159, 182, 159); + margin-bottom: 60px; + margin: 0 23px 60px 23px; + border-radius: 5px; + +} + +section{ + height: 45%; + width: 30%; + background-color: rgb(234, 246, 235); + border-radius: 7px; +} + +#team{ + height: 110px; + width: 58%; + background-color: rgb(203, 233, 191); + color: rgb(0, 0, 0); + border-radius: 5px; + font-size: 15px; + float: left; +} + +#hi{ + height: 110px; + width: 40%; + background-color: rgb(206, 222, 197); + color: black; + border-radius: 5px; + font-size: 15px; + float: right; +} + +section{ + display: flex; + justify-content: center; + align-items: center; +} + +section p{ + padding: 30px; + text-align: center; + position: relative; + + +} + +#team p{ + padding: 5px; + text-align: center; + +} + +#movie { + background-image: url(./image/eee.jpg); + background-size: cover; + height: 45%; + width: 30%; + position: relative; + color: white; +} +#movie:hover{ + transform: scale(1.1); + transition: all 0.2s linear; +} + +#mbti { + background-image: url(./image/inpt1.jpg); + background-size: cover; + height: 45%; + width: 30%; + + color: white; + position: relative; +} +#mbti:hover{ + transform: scale(1.1); + transition: all 0.2s linear; +} + +#with { + background-image: url(./image/ttt.jpg); + background-size: cover; + height: 45%; + width: 30%; + position: relative; + color: white + +} +#with:hover{ + transform: scale(1.1); + transition: all 0.2s linear; +} + +#profile:hover{ + transform: scale(1.1); + transition: all 0.2s linear; +} +#music:hover{ + transform: scale(1.1); + transition: all 0.2s linear; + + +} +#food:hover{ + transform: scale(1.1); + transition: all 0.2s linear; +} + +#hi p{ + padding: 30px; + text-align: center; +} + +.bg{ + background-color: rgba(0,0,0,0.5); + 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