diff --git "a/\353\260\230\354\235\221\355\230\225 \352\267\270\353\246\254\353\223\234/css/styles.css" "b/\353\260\230\354\235\221\355\230\225 \352\267\270\353\246\254\353\223\234/css/styles.css" new file mode 100644 index 0000000..5ad0b68 --- /dev/null +++ "b/\353\260\230\354\235\221\355\230\225 \352\267\270\353\246\254\353\223\234/css/styles.css" @@ -0,0 +1,97 @@ +body { + margin: 0; +} + +#div1 { + width: 100%; + background-color: #FF0000; + height: 60px; +} + +#div2 { + width: 100%; + background-color: #FFA500; + height: 350px; +} + +#div3 { + width: 100%; + background-color: #FFFF00; + height: 320px; +} + +#div4 { + width: 100%; + background-color: #008000; + height: 385px; +} + +#div5 { + width: 100%; + background-color: #0000FF; + height: 200px; +} + +#div6 { + width: 100%; + background-color: #4B0082; + height: 200px; +} + +@media (min-width: 768px) { + div { + float: left; + } + + #div2 { + height: 562px; + } + + #div3 { + height: 282px; + } + + #div4 { + width: 50%; + height: 360px; + } + + #div5 { + width: 50%; + height: 180px; + } + + #div6 { + width: 50%; + height: 180px; + } + +} + +@media (min-width: 992px) { + #div2 { + width: 50%; + height: 700px; + } + + #div3 { + width: 50%; + height: 350px; + } + + #div4 { + width: 25%; + height: 350px; + } + + #div5 { + width: 25%; + height: 175px; + } + + #div6 { + width: 25%; + height: 175px; + } + +} \ No newline at end of file diff --git "a/\353\260\230\354\235\221\355\230\225 \352\267\270\353\246\254\353\223\234/index.html" "b/\353\260\230\354\235\221\355\230\225 \352\267\270\353\246\254\353\223\234/index.html" new file mode 100644 index 0000000..2e2b77a --- /dev/null +++ "b/\353\260\230\354\235\221\355\230\225 \352\267\270\353\246\254\353\223\234/index.html" @@ -0,0 +1,19 @@ + + + + + 반응형 그리드 + + + + + +
+
+
+
+
+
+ + + diff --git "a/\354\235\264\353\205\270/css/styles.css" "b/\354\235\264\353\205\270/css/styles.css" new file mode 100644 index 0000000..f6b4901 --- /dev/null +++ "b/\354\235\264\353\205\270/css/styles.css" @@ -0,0 +1,157 @@ +body { + margin: 0; + font-family: 'Roboto', sans-serif; +} + +.title { + font-size: 20px; + background-color: #353535; + color: white; + width: 100%; + height: 60px; + padding-left: 30px; + padding-top: 30px; + padding-right: 30px; +} + +.banner { + width: 100%; + height: 350px; + background-image: url('../images/banner_img.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +.explain { + width: 100%; + height: 320px; + background-color: white; + display: flex; + justify-content: start; + align-items: center; +} + +.explain .explain-container { + padding-left: 30px; + padding-right: 30px; +} + +.explain h3 { + font-size: 16px; + color: #4a4a4a; +} + + +.explain h2 { + font-size: 20px; + color: #1b1b1b; + margin-top: 10px; + margin-bottom: 30px; +} + +.explain p { + font-size: 16px; + color: #7a7a7a; + margin: 0; +} + +.img1 { + width: 100%; + height: 385px; + background-image: url('../images/img1.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center top; +} + +.img2 { + width: 100%; + height: 200px; + background-image: url('../images/img2.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center top; + display: flex; + justify-content: center; + align-items: center; +} + +.img2 .view { + color: white; + font-weight: bold; + border: 4px solid white; + padding: 9px 40px; +} + +.img3 { + width: 100%; + height: 200px; + background-image: url('../images/img3.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center top; +} + + + +@media (min-width: 768px) { + .item { + float: left; + } + + .banner { + height: 562px; + } + + .explain { + height: 282px; + } + + .explain .explain-container { + padding-left: 65px; + padding-right: 65px; + } + + .img1 { + width: 50%; + height: 360px; + } + + .img2 { + width: 50%; + height: 180px; + } + + .img3 { + width: 50%; + height: 180px; + } +} + +@media (min-width: 992px) { + .banner { + width: 50%; + height: 700px; + } + + .explain { + width: 50%; + height: 350px; + } + + .img1 { + width: 25%; + height: 350px; + } + + .img2 { + width: 25%; + height: 175px; + } + + .img3 { + width: 25%; + height: 175px; + } +} diff --git "a/\354\235\264\353\205\270/images/banner_img.jpg" "b/\354\235\264\353\205\270/images/banner_img.jpg" new file mode 100644 index 0000000..00a4a2f Binary files /dev/null and "b/\354\235\264\353\205\270/images/banner_img.jpg" differ diff --git "a/\354\235\264\353\205\270/images/img1.jpg" "b/\354\235\264\353\205\270/images/img1.jpg" new file mode 100644 index 0000000..279ed68 Binary files /dev/null and "b/\354\235\264\353\205\270/images/img1.jpg" differ diff --git "a/\354\235\264\353\205\270/images/img2.jpg" "b/\354\235\264\353\205\270/images/img2.jpg" new file mode 100644 index 0000000..57ca043 Binary files /dev/null and "b/\354\235\264\353\205\270/images/img2.jpg" differ diff --git "a/\354\235\264\353\205\270/images/img3.jpg" "b/\354\235\264\353\205\270/images/img3.jpg" new file mode 100644 index 0000000..b106cf8 Binary files /dev/null and "b/\354\235\264\353\205\270/images/img3.jpg" differ diff --git "a/\354\235\264\353\205\270/index.html" "b/\354\235\264\353\205\270/index.html" new file mode 100644 index 0000000..d77f006 --- /dev/null +++ "b/\354\235\264\353\205\270/index.html" @@ -0,0 +1,25 @@ + + + + IN'O + + + + + +
IN'O
+ +
+
+

Portfolio

+

Make Hardware Soft

+

IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features. It naturally blends into your life through lean UX and minimal design.

+
+
+
+
+
VIEW MORE
+
+
+ + diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/css/styles.css" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/css/styles.css" new file mode 100644 index 0000000..e16545a --- /dev/null +++ "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/css/styles.css" @@ -0,0 +1,99 @@ +body { + font-family: 'Noto Sans KR', sans-serif; +} + +.carousel-item { + height: 400px; + background-size: cover; + text-align: center; +} + +.carousel-item.item1 { + background-image: url("../images/guitar.jpg"); + background-position: left center; +} + +.carousel-item.item2 { + background-image: url("../images/makeup.jpg"); + background-position: center top; +} + +.carousel-item.item3 { + background-image: url("../images/cooking.jpg"); + background-position: center center; +} + +.helper { + display: inline-block; + height: 100%; + vertical-align: middle; +} + +.intro { + display: inline-block; + vertical-align: middle; +} + +.intro h2 { + font-size: 32px; + color: white; + font-weight:300; + margin-top: 0; + margin-bottom: 18px; +} + +.intro h3 { + font-size: 22px; + color: white; + font-weight: 300; + margin-top: 0; + margin-bottom: 48px; +} + +.intro a { + background-color: #5900e7; + border-radius: 2px; + padding: 10px 30px; + color: white; + font-weight: 300; +} + +.container { + margin-top: 50px; + margin-bottom: 50px; +} + +.course { + display: block; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); + margin-bottom: 20px; +} + +.course:hover { + text-decoration: none; +} + +.course .course-img { + display: block; +} + +.course .info { + padding: 10px; +} + +.course .info h4 { + font-size: 18px; + color: #4a4a4a; + margin-top: 0; + margin-bottom: 10px; +} + +.course .info .lecturer { + font-size: 13px; + color: #4a4a4a; +} + +.course .info .lecture img, +.course .info .lecture .name { + vertical-align: middle; +} diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/cooking.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/cooking.jpg" new file mode 100644 index 0000000..87eba8f Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/cooking.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course1.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course1.jpg" new file mode 100644 index 0000000..3c2d7d1 Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course1.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course2.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course2.jpg" new file mode 100644 index 0000000..cc39a61 Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course2.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course3.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course3.jpg" new file mode 100644 index 0000000..abb5457 Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course3.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course4.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course4.jpg" new file mode 100644 index 0000000..f23e88e Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course4.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course5.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course5.jpg" new file mode 100644 index 0000000..a0aa7ab Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course5.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course6.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course6.jpg" new file mode 100644 index 0000000..d7fc068 Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course6.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course7.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course7.jpg" new file mode 100644 index 0000000..c91b252 Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course7.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course8.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course8.jpg" new file mode 100644 index 0000000..0a56b72 Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/course8.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/guitar.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/guitar.jpg" new file mode 100644 index 0000000..700fa88 Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/guitar.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/makeup.jpg" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/makeup.jpg" new file mode 100644 index 0000000..012f7ff Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/makeup.jpg" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/user.png" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/user.png" new file mode 100644 index 0000000..e37ac6e Binary files /dev/null and "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/images/user.png" differ diff --git "a/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/index.html" "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/index.html" new file mode 100644 index 0000000..dbcd670 --- /dev/null +++ "b/\354\236\254\353\212\245 \352\263\265\354\234\240 \354\202\254\354\235\264\355\212\270/index.html" @@ -0,0 +1,192 @@ + + + + + ShareSkill + + + + + + + + + + + + +
+
+
+ +
+
+
+
+ + + +
+

개성있는 일러스트 작품 만들기

+
+ 문종모 +
+
+ +
+
+ + + +
+

내가 만드는 나만의 악세서리

+
+ 문종모 +
+
+ +
+
+ + + +
+

내 이야기를 노래로!

+
+ 문종모 +
+
+ +
+
+ + + +
+

비전공자를 위한 웹 프로그래밍

+
+ 문종모 +
+
+ +
+
+ + + +
+

자신감 업! 메이크업 클래스

+
+ 문종모 +
+
+ +
+
+ + + +
+

아이돌 댄스 정복하기

+
+ 문종모 +
+
+ +
+
+ + + +
+

사진 작가에게 배우는 야외 사진

+
+ 문종모 +
+
+ +
+
+ + + +
+

기본부터 익히는 플라워 클래스

+
+ 문종모 +
+
+ +
+
+
+ + + \ No newline at end of file