diff --git a/README.md b/README.md index 6453761..db6da45 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/eternalsunshine.jpg b/eternalsunshine.jpg new file mode 100644 index 0000000..6c97a80 Binary files /dev/null and b/eternalsunshine.jpg differ diff --git a/home.html b/home.html new file mode 100644 index 0000000..acab174 --- /dev/null +++ b/home.html @@ -0,0 +1,78 @@ + + + + + + + Document + + + +
+ +
+
+ +
+
+

[내 프로필]

+ 이름: 정고은
+ 포지션: 프론트엔드
+ 학과: 아트앤테크놀로지
+ 생년월일: 2002.04.26 +

+
+
+

[mbti]

+ infj
+ 옹호자 +

+
+
+

[좋아하는 음식]

+ 고기
+ 고구마
+ 만두
+ 우유 +

+
+
+

[인생영화]

+ 이터널 선샤인 +

+
+ +
+
+

[자주 듣는 노래]

+ The 1975 - About you
+ +

+
+
+

[반려식물]

+ 이끼
+ 이름은 끼콩..

+
+
+ +
+ + +
+
+ PC화면에서 접속해주세요! +
+ \ No newline at end of file diff --git a/infj.jpeg b/infj.jpeg new file mode 100644 index 0000000..31983b4 Binary files /dev/null and b/infj.jpeg differ diff --git a/sample/home.html b/sample/home.html deleted file mode 100644 index 49db91a..0000000 --- a/sample/home.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - Profile - - -
-
-
-
My profile
-
-
-

- [내 프로필]
- 이름 : 박채린
- 포지션 : 프론트엔드
- 학과 : 화학과
- 생년월일 : 1998.03.10 -

-
-
-
-

- [MBTI]
- ENFJ
- 정의로운 사회운동가
- 사람좋아 인간 -

-
-
-

- [좋아하는 음식]
- 초밥
- 회
- 굴보쌈
- 마라탕
- 닭발
-

-
-
-
-

- [인생영화]
- 클래식 -

-
-
-

- [요즘 자주 듣는 노래]
- 데이먼스이어 - salty
- 한요한 - 가습기 -

-
-
-
-

- [반려동물/반려식물]
- 우리집 멍뭉이
봄가을겨울 -

-
-
- -
- -
-
- PC화면에서 접속해주세요! -
- - - diff --git a/sample/style.css b/sample/style.css deleted file mode 100644 index 5dfb6b5..0000000 --- a/sample/style.css +++ /dev/null @@ -1,174 +0,0 @@ -@font-face { - font-family: 'SeoulNamsanM'; - src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulNamsanM.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -*{ - box-sizing: border-box; - margin: 0; - font-family: 'SeoulNamsanM'; - line-height: 20px; -} - -body{ - background-color: #f8f8f8; -} - -header{ - height: 40px; - background-color: #333; -} - -main{ - height: 600px; - width: 750px; - margin: 0 auto; - background-color: #f8f8f8; - box-shadow: 10px 10px 20px gray; -} - -#top{ - height: 35px; - background-color: #f0cdea; - margin-bottom: 25px; - border-radius: 0 0 10px 10px; - color: white; - font-size: 18px; - text-align: center; - line-height: 35px; -} - -#container{ - height: 410px; - padding: 10px; - /* flex(wrap)으로 section 배치*/ - display: flex; - flex-wrap: wrap; - justify-content: space-around; - align-content: space-around; -} - -aside{ - height: 110px; - background-color: #f8f8f8; - margin-bottom: 60px; - margin: 0 15px 60px 15px; -} - -section { - height: 45%; - width: 30%; - border-radius: 7px; - text-align: center; - display: block; - background-color: white; - justify-content: center; -} - -section p { - padding: 30px; - text-align: center; - position: relative; -} - -#team{ - width: 470px; - height: 100%; - background-color: #31999c; - color: white; - border-radius: 5px; - font-size: 15px; - float: left; - padding: 20px; - text-align: center; -} - -#hi{ - width: 230px; - height: 100%; - background-color: pink; - color: black; - border-radius: 5px; - font-size: 15px; - float: right; - padding: 30px; - text-align: center; -} - -#mbti { - background-image: url("./images/mbti.png"); - background-size: cover; - height: 45%; - width: 30%; - position: relative; - color: white; -} - -#mbti:hover{ - transform: scale(1.4); - transition: all 0.2s linear; -} - -#movie { - background-image: url("./images/movie.png"); - background-size: cover; - height: 45%; - width: 30%; - position: relative; - color: white; -} - -#movie:hover{ - transform: scale(1.4); - transition: all 0.2s linear; -} - -#dog { - background-image: url("./images/dog.jpeg"); - background-size: cover; - height: 45%; - width: 30%; - position: relative; - color: white; -} - -#dog:hover{ - transform: scale(1.4); - transition: all 0.2s linear; -} - -.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; -} - -footer{ - height: 200px; - background-color: white; - text-align: center; - color: rgb(170, 170, 170); - padding: 50px; -} - -@media(max-width: 800px) { - #main-container { - display: none; - } - - #alert { - display: block; - } -} - - diff --git a/style.css b/style.css new file mode 100644 index 0000000..e1494f0 --- /dev/null +++ b/style.css @@ -0,0 +1,136 @@ +@font-face { + font-family: 'BMJUA'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +*{ + box-sizing:border-box; + margin:0; +} +header{ + height: 40px; + background-color: #546a73; +} +body{ + background-color:#ebf4f6; +} +main{ + height: 600px; + width:750px; + margin:0 auto; + background-color:#8ca6ab; +} +footer{ + height:100px; + background-color:#728b93; + text-align:center; + color:rgb(0, 0, 0); + padding: 50px; + font-size:12px; + font-family: 'BMJUA'; + +} +#top{ + height:35px; + background-color: #c5dade; + margin-bottom: 25px; + border-radius:0 0 10px 10px; + color:black; + font-size:18px; + text-align:center; + font-family: 'BMJUA'; + +} +#container{ + height:410px; + padding: 10px; + display: flex; + flex-wrap:wrap; + justify-content:space-around; + align-content:space-around; +} +aside{ + height:200px; + margin-bottom: 60px; + margin:0 15px 60px 15px; +} +section{ + height: 45%; + width:30%; + background-color: white; + border-radius: 7px; + justify-content:center; + +} +#team{ + height: 50%; + width:480px; + background-color:#c1cfd4; + color:black; + border-radius:10px; + font-size:13.7px; + float:left; + font-family: 'BMJUA'; + text-align:center +} +#hi{ + height:50%; + width:220px; + background-color:#ccdfe6; + color:rgb(0, 0, 0); + border-radius:10px; + font-size:17px; + float:right; + font-family: 'BMJUA'; + text-align:center; + +} +section p { + padding:30px; + text-align: center; + font-family: 'BMJUA'; +} +#movie {background-image:url("./eternalsunshine.jpg"); + background-size: cover; + position:relative; + color:white; + + + } +#mbti {background-image:url("./infj.jpeg"); + background-size: cover; + position:relative; + color:white; + + } +.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){ + div{ + display:none; + } + #alert{ + display:block; + } +} +#mbti:hover{ + transform:scale(1.4); + transition:all 0.2s linear; +} +#movie:hover{ + transform:scale(1.4); + transition:all 0.2s linear; +} \ No newline at end of file