diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..c6dd7c5 Binary files /dev/null and b/.DS_Store differ diff --git a/home.html b/home.html new file mode 100644 index 0000000..2d52e78 --- /dev/null +++ b/home.html @@ -0,0 +1,82 @@ + + + + + + + + My diary + + + + + + + + + + +
+
+
+
+ SUNG HO CHOI +
+
+
+ [Me Myself & I]

+ Name: Sung Ho Choi
+ Postion: Back-end
+ Major: Business
+ Birthday: 1997.03.27
+
+
+
+ [MBTI]

+ ENTJ
+ 통솔자
+

Your time is limited,
+ so don’t waste it living someone else’s life.

+ +
+
+ [Favorite Food]

+ 고기면 다 좋아 +
+
+
+ [MOVIE]

+ Joker +
+
+ [MUSIC]

+ Joe Hisaishi Summer +
+
+
+ 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 호두 + 호두 호두 +
+ +
+ +
+ +
+ +
+ PC로 접속하여라~ +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..00b542f --- /dev/null +++ b/style.css @@ -0,0 +1,193 @@ +* { + box-sizing: border-box; + font-family: 'NanumBrushScript', sans-serif; + color: lightslategrey +} + +header { + height: 40px; + background-color: #999999; +} + +body { + background-color: #999999; +} + +main { + height: 600px; + width: 750px; + margin: 0 auto; + /*가운데 정렬*/ + background-color: #999999; +} + +footer { + height: 200px; + background-color: #999999; + margin-bottom: 25px; + + box-shadow: 5px 5px 5px 5px; +} + +#top { + height: 30px; + background-color: #333333; + margin-bottom; + 25px; + font-size: 18px; + text-align: center; + line-height: 35px; + font-family: 'Black Han Sans + box-shadow: 5px 5px 5px 5px; +} + +#container { + height: 410px; + padding: 10px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-content: space-around; + background-color: #999999; +} + +aside { + height: 80px; + background-color: #999999; + margin-bottom: 60px; + margin: 0 15px 60px 15px; +} + +section { + padding: 30px; + border-radius: 3px; + width: 30%; + height: 45%; + background-color: #333333; + text-align: center; + position: relative; + box-shadow: 5px 5px 5px 5px; +} + +#MBTI { + background-image: url("./image/stevegrey.webp"); + background-size: cover; + color: white; + height: 45%; + width: 30%; + padding: 10px; + position: relative; +} + +#MBTI:hover { + transform: scale(1.1); + transition: all 0.2s linear; +} + +#quote { + color: white; +} + +#quote { + font-family: 'Times New Roman', Times, serif; +} + +#movie { + background-image: url("./image/joker2.jpg"); + background-size: cover; + color: white; + height: 45%; + width: 30%; + position: relative; +} + +#movie:hover { + transform: scale(1.1); + transition: all 0.2s linear; +} + +#pet { + background-image: url("./image/hodoo.jpeg"); + background-size: cover; + color: white; + height: 45%; + width: 30%; + position: relative; + background-position: -20px; +} + +#pet:hover { + transform: scale(1.1); + transition: all 0.2s linear; +} + +#food:hover { + transform: scale(1.1); + transition: all 0.2s linear; +} + +#music:hover { + transform: scale(1.1); + transition: all 0.2s linear; +} + +#Profile:hover { + transform: scale(1.1); + transition: all 0.2s linear; +} + +.bg { + background-color: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + border-radius: 5px; + position: absolute; + top: 0px; + left: 0px; +} + + +#team { + padding: 10px; + width: 470px; + height: 100%; + background-color: #333333; + border-radius: 5px; + font-size: 15px; + float: left; +} + +#hi { + width: 230px; + height: 100%; + background-color: #333333; + border-radius: 5px; + text-align: center; + padding: 30px; + float: right; +} + +footer { + + height: 30px; + background-color: #333333; + text-align: center; + padding: 10px; + font-family: 'NanumBrushScript'; +} + +#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