diff --git a/README.md b/README.md index 6453761..b004a43 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # 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..0d9fd15 --- /dev/null +++ b/home.html @@ -0,0 +1,94 @@ + + + + + + + + + + + +
+

+ 정답: X/O/O/O +

+
+
+
+
+
+
+ My Profile +
+
+
+

+ [내 프로필]
+ 이름 : 이우찬
+ 포지션 : 백엔드
+ 학과 : 영미어문학과
+ 생년월일 : 1999. 04. 09 +

+
+
+
+

+ [MBTI]
+ ISFJ
+ 용감한 수호자 +

+
+
+

+ [좋아하는 음식]
+ 햄버거
+ 짜파게티
+ 떡볶이
+ 회
+ 곱창 +

+
+
+
+

+ [인생영화]
+ 탑건: 매버릭 +

+
+
+
+

+ [요즘 자주 듣는 노래]
+ Shawn Mendes - Stitches +

+
+
+

+ [반려동물/반려식물]
+ 안 키웁니다 +

+
+
+ +
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c35c8ed --- /dev/null +++ b/style.css @@ -0,0 +1,141 @@ +*{ + box-sizing: border-box; +} +@font-face { + font-family: 'Dovemayo_gothic'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.1/Dovemayo_gothic.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} + +header{ + height: 40px; + background-color: black +} + +main{ + font-family: 'Dovemayo_gothic'; + height: 600px; + width: 750px; + margin: 0 auto; + background-color: beige; +} + +footer{ + height: 200px; + text-align: center; + padding: 50px; + color: gray; + /*background-color: brown;*/ +} +#top{ + border-radius: 7px; + height: 35px; + background-color: grey; + margin-bottom: 25px; + text-align: center; + line-height: 35px; + color: white; +} +#container{ + height: 410px; + padding: 10px; + /*background-color:blue;*/ + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-content: space-around; + padding: 10px; + +} +aside{ + height: 110px; + /*background-color:yellow;*/ + margin-bottom: 60px; + margin: 0 15px 60px 15px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} +section{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 7px; + height: 45%; + width: 30%; + background-color:white; + text-align: center; + line-height: 20px; +} +#team{ + display: flex; + justify-content: center; + align-items: center; + font-family: 'Dovemayo_gothic'; + border-radius: 7px; + height: 100%; + width: 470px; + background-color:pink; + float: left; + text-align: center; +} +#hi{ + font-family: 'Dovemayo_gothic'; + border-radius: 7px; + height:100%; + width:230px; + background-color:paleturquoise; + float: right; + font-size: 15px; +} +#mbti{ + background-image: url("./images/isfj.jpg"); + background-size: cover; + height: 45%; + width: 30%; + position: relative; + color: white; +} +#movie{ + background-image: url("./images/maverick.jpg"); + background-size: cover; + height: 45%; + width: 30%; + position: relative; + color: white; +} +#song{ + background-image: url("./images/mendes.jpg"); + background-size: cover; + height: 45%; + width: 30%; + color: white; + position: relative; + +} +.bg{ + background-color: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + border-radius: 7px; + position: absolute; +} +section p{ + position: relative; +} +#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