diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..6ec6794 Binary files /dev/null and b/.DS_Store differ diff --git a/home.html b/home.html new file mode 100644 index 0000000..ff5d48b --- /dev/null +++ b/home.html @@ -0,0 +1,79 @@ + + + + + + + Document + + + +
+ PC 화면에서 접속해주세요! +
+
+
+
+
+
+
+

+ 😇"저는요..."
+ 이름 : 권보미
+ 포지션 : 프론트엔드
+ 전공 : 아텍 & 컴공
+ 생년월일 : 2000.05.13
+

+
+
+

+ 👋"MBTI..."
+ INFP
+ 사려깊은 이상주의자
+

+
+
+
+

+ 👅"좋아하는 음식..."
+ 순대국
+ 평양냉면
+ 해산물, 회
+

+
+
+

+ 🦾"좌우명..."
+ 지금을 살자 +

+
+
+
+

+ 🎧"요즘 자주 듣는 노래..."
+ 아이브 - kitsch +

+
+
+

+ 📱"인스타그램"
+ @dlxl_worldz +

+
+
+ +
+ +
+ + \ No newline at end of file diff --git a/images/me.JPG b/images/me.JPG new file mode 100644 index 0000000..92cef01 Binary files /dev/null and b/images/me.JPG differ diff --git a/images/music.jpeg b/images/music.jpeg new file mode 100644 index 0000000..c26bd58 Binary files /dev/null and b/images/music.jpeg differ diff --git a/images/noodle.jpeg b/images/noodle.jpeg new file mode 100644 index 0000000..755759c Binary files /dev/null and b/images/noodle.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/images/dog.jpeg b/sample/images/dog.jpeg deleted file mode 100644 index eb8918a..0000000 Binary files a/sample/images/dog.jpeg and /dev/null differ diff --git a/sample/images/mbti.png b/sample/images/mbti.png deleted file mode 100644 index e0acf39..0000000 Binary files a/sample/images/mbti.png and /dev/null differ diff --git a/sample/images/movie.png b/sample/images/movie.png deleted file mode 100644 index d135d6d..0000000 Binary files a/sample/images/movie.png and /dev/null differ 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..c0ef2f3 --- /dev/null +++ b/style.css @@ -0,0 +1,134 @@ +@font-face { + font-family: 'KIMM_Bold'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; +} +*{ + box-sizing: border-box; + margin:0; + font-family: 'KIMM_Bold'; + line-height:20px; +} +header{ + height:40px; + background-color: rgb(255, 255, 255); + border: 1px solid #333; +} +main{ + height:600px; + width:750px; + margin:0 auto; + background-color: white; +} +footer{ + height:200px; + background-color: white; +} +#top{ + height: 35px; + background-color: #000000; + margin-bottom: 25px; + border-radius: 0 0 10px 10px; + border: 1px solid #333; +} +#container{ + height:410px; + background-color: white; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: space-around; +} +aside { + height: 110px; + /* background-color: rgb(175, 221, 226); */ + /* margin-bottom: 60px; */ + margin:0 15px 60px 15px; + display: flex; + justify-content: space-between; +} +section { + width: 30%; + height: 45%; + background-color: rgb(255, 255, 255); + border:1px solid #333; + border-radius: 7px; + /* margin:12px; */ + display: flex; + justify-content: center; + align-items: center; +} +#team{ + width:470px; + height:100%; + background-color: #78f987; + border: 1px solid #333; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + font-size: 11px; +} +#hi{ + width:230px; + height:100%; + background-color: #ffffff;; + border: 1px solid #333; + border-radius: 5px; +} +section p { + padding:10px; + text-align: center; + position: relative; +} +.bg { + background-color: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + position: absolute; +} +#food { + background-image: url("./images/noodle.jpeg"); + background-size: cover; + height: 45%; + width: 30%; + position: relative; + color: #78f987; +} +#food:hover { + transform: scale(1.4); + transition: all 0.2s linear; +} +#music{ + background-image: url("./images/music.jpeg"); + background-size:cover; + height:45%; + width:30%; + position: relative; + color: #78f987; +} +#music:hover{ + transform:scale(1.4); + transition:all 0.2s linear; +} +footer{ + height:200px; + text-align:center; + color:rgb(223, 223, 223); + padding:50px; + font-size: 10px; +} +#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