diff --git a/README.md b/README.md index 6453761..e4f4382 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # 11th_HTML-CSS -4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다. + +깃 연습 ^^7 \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..4cfa44a --- /dev/null +++ b/home.html @@ -0,0 +1,95 @@ + + + + + + + 신명준 프로필 :) + + + +
PC 화면에서 접속해주세요!
+
+ +
+
+
+ MY PROFILE +
+
+
+

+ [내 프로필]
+ 이름 :신명준
+ 포지션: 백엔드
+ 학과 : 컴퓨터공학과
+ 생년월일 : 010101 +

+
+
+

+ [MBTI]
+ ISTJ
+ 청렴결백한 논리주의자
+ 너무 정확해서 무서워요;; +

+
+
+

+ + [좋아하는 음식]
+ 샌드위치
+ 커피
+ 스시
+ 햄버거
+ 음식 안 가려요 ^^
+

+
+
+

+ [인생영화]
+ 에브리씽 에브리웨어 올 앳 원스
+ 울다 나왔어요 +

+
+
+

+ + [요즘 자주 듣는 노래]
+ 뮤지컬 대표곡들
+ 데스노트 티켓팅 중... +

+
+
+

+ + [반려식물]
+ 생길 예정 +

+
+
+ +
+ +
+ + \ No newline at end of file diff --git a/mbti.png b/mbti.png new file mode 100644 index 0000000..4924396 Binary files /dev/null and b/mbti.png differ diff --git a/movie.jpeg b/movie.jpeg new file mode 100644 index 0000000..10d268c Binary files /dev/null and b/movie.jpeg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..2384ce2 --- /dev/null +++ b/style.css @@ -0,0 +1,193 @@ +@font-face { + font-family: 'KCCChassam'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} + +*{ + box-sizing: border-box; + margin: 0; + font-family: "KCCChassam"; +} + +#alert { + display: none; + text-align: center; + padding-top: 300px; +} + +body{ + background-color: #f8f8f8; +} + +/* header */ +header{ + width: 100%; + height: 40px; + background-color: #333; +} + + +/* main */ +main{ + width: 750px; + margin: 0 auto; + background-color: #f8f8f8; +} + +/* top implementation 1 */ +#top { + height: 60px; + text-align: center; + background-color: #9bd5ef; + margin-bottom: 25px; + line-height: 60px; + font-size: 2em; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; +} + +/* top implementation 2 */ +/* #top { + height: 60px; + background-color: #9bd5ef; + margin-bottom: 25px; + font-size: 2em; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + display: flex; + justify-content: center; + align-items: center; +} */ + +/* .container */ +.container { + width: 100%; + margin-bottom: 20px; + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + align-content: space-evenly; + border-radius: 12px; +} + +div.container{ + height: 410px; + background-color: lightgrey; +} + +section{ + width: 30%; + height: 45%; + background-color: white; + border-radius: 12px; + display: flex; + justify-content: center; + align-items: center; + +} + +section p { + text-align: center; + position: relative; /* 텍스트를 앞으로 가져오기 위해 */ +} + +.magnify { + position: relative; + transition: all 0.2s ease-in-out 0.1s; +} + +.magnify:hover { + transform: scale(1.3); + z-index: 1; +} + +#mbti { + background-image: url("./mbti.png"); + background-size: cover; +} + +#mbti::before { + content: ""; + display: block; + width: 100%; + height: 100%; + border-radius: 12px; + position: absolute; + background-color: rgba(0, 0, 0, 0.3); +} + + + +#movie { + background-image: url("./movie.jpeg"); + background-size: cover; +} + +#movie:before { + content: ""; + display: block; + width: 100%; + height: 100%; + border-radius: 12px; + background-color: black; + opacity: 0.3; + position: absolute; +} + +/* aside */ +aside.container{ + height: 12em; + background-color: white; +} + +#team { + width: 63%; + height: 80%; + background-color: #9c3131; +} + +#hi{ + width: 30%; + background-color: pink; +} + +aside div { + display: flex; + justify-content: space-evenly; + align-items: center; + border-radius: 12px; +} + +.grey { + color: lightgrey; +} + +.white { + color: white; +} + +/* footer */ +footer { + width: 100%; + height: 100px; + background-color: white; + padding: 2em; +} + +footer div{ + text-align: center; +} + + +/* Media Queries */ +@media(max-width: 800px) { + #alert { + display: block; + } + + #all-contents { + display: none; + } +} \ No newline at end of file