diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..9f3c7c0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,494 @@ + +@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap'); + +body { + + font-family: NanumSquareR; + background-color: #ffffff; + + } + + + + .file-upload { + + padding: 13% 0; + + border-radius: 10px; + + border: solid 1.5px #f6f7fa; + + background-color: #f6f7fa; + + } + + + + .file-upload-btn { + + width: 100%; + + margin: 0; + + color: #fff; + + background: #1FB264; + + border: none; + + padding: 10px; + + border-radius: 4px; + + border-bottom: 4px solid #15824B; + + transition: all .2s ease; + + outline: none; + + text-transform: uppercase; + + font-weight: 700; + + } + + + + .file-upload-btn:hover { + + background: #1AA059; + + color: #ffffff; + + transition: all .2s ease; + + cursor: pointer; + + } + + + + .file-upload-btn:active { + + border: 0; + + transition: all .2s ease; + + } + + + + .file-upload-content { + + display: none; + + text-align: center; + + } + + + + .file-upload-input { + position: absolute; + + margin: 0; + + padding: 0; + + width: 100%; + + height: 100%; + + outline: none; + + opacity: 0; + + cursor: pointer; + + } + + + + .image-upload-wrap { + + position: relative; + + object-fit: contain; + + border-radius: 10px; + + border: dashed 1.5px #35465d; + + background-color: #ffffff; + + width: 65%; + + margin: 0 auto; + + } + + /* 업로드 버튼 (수정) */ + .image-dropping, + + .image-upload-wrap:hover { + + font-size: 30px; + + transition: transform 0.5s, background-color 0.3s; + transform: scale(1.01); + background-color: beige; + + + border: 2px solid black; + + } + + + + .image-title-wrap { + + padding: 0 15px 15px 15px; + + color: #222; + + } + + + + .drag-text { + + text-align: center; + + } + + + + .drag-text h3 { + + font-weight: 100; + + text-transform: uppercase; + + color: #15824B; + + padding: 60px 0; + + } + + + + .file-upload-image { + + margin: auto; + + padding: 20px; + + } + + + + .remove-image { + + width: 200px; + + margin: 0; + + color: #fff; + + background: #cd4535; + + border: none; + + padding: 10px; + + border-radius: 4px; + + border-bottom: 4px solid #b02818; + + transition: all .2s ease; + + outline: none; + + text-transform: uppercase; + + font-weight: 700; + + } + + + + .remove-image:hover { + + background: #c13b2a; + + color: #ffffff; + + transition: all .2s ease; + + cursor: pointer; + + } + + + + .remove-image:active { + + border: 0; + + transition: all .2s ease; + + } + + + + .nav-distance{ + + + + font-family: 'Courgette', cursive; + + padding: 2.1% 7.7%; + + } + + + + .navbar-light .navbar-brand{ + + + + font-family: 'Courgette', cursive; + + line-height: 1.70; + + text-align: left; + + color: #35465d; + + font-size: 24px; + + + } + + .navbar-light .navbar-toggler{ + + + font-family: 'Courgette', cursive; + + border-color: #ffffff; + + + } + + .section { + + margin-top: 100px; + + } + + .result-Message { + + font-size:20px; + + } + + .title { + + + font-family: 'Courgette', cursive; + + line-height: 1.50; + + font-size:90px; + + text-align: center; + + color: #35465d; + + + + } + + .subtitle { + + + font-family: 'Courgette', cursive; + + line-height: 1.4; + + font-size:34px; + + text-align: center; + + color: #35465d; + + } + + + .bar-label { + width: 20%; + text-align: left; + height: 2rem; + } + /* On screens that are 600px or less, set the background color to olive */ + + @media screen and (max-width: 600px) { + + html { + + font-size: 8px; + + } + + } + + + + .youtube-link { + + font-size: 1.5rem; + + line-height: 1.71; + + text-align: 1.71; + + color: #f73737; + + text-decoration: underline; + + } + + + + .youtube-link:hover { + + font-size: 1.5rem; + + line-height: 1.71; + + text-align: 1.71; + + color: #f73737; + + text-decoration: underline; + + } + + + + .youtube-icon{ + + width: 8%; + + } + + .upload{ + + width: 20%; + + } + + .drag-text h3 { + + width: 50%; + + font-weight: 100; + + text-transform: uppercase; + + font-size: 1.6rem; + + line-height: 1.53; + + text-align: center; + + color: #35465d; + + margin: 0 auto; + + } + + .bar-container { + height: 2.7rem; + } + .Spring-box { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + width: 100%; + background-color: rgba(27, 175, 234, 0.2); + } + .Spring-bar { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + background-color: rgba(27, 175, 234, 1); + } + .Summer-box { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + width: 100%; + background-color: rgba(251, 176, 59, 0.2); + } + .Summer-bar { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + background-color: rgba(251, 176, 59, 1); + } + .Autumn-box { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + width: 100%; + background-color: rgba(195, 140, 102, 0.2); + } + .Autumn-bar { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + background-color: rgba(195, 140, 102, 1); + } + .Winter-box { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + width: 100%; + background-color: rgba(49, 132, 155, 0.2); + } + .Winter-bar { + position: absolute; + top: 0; + left: 0; + height: 2rem; + border-radius: 10px; + background-color: rgba(49, 132, 155, 1); + } + + /* 추가부분 */ + .colorWeight { + display: inline-block; + clip-path: circle(40%); + width: 90px; + height: 90px; + + } + .colorWeight:hover { + + transform: scale(1.15); + } \ No newline at end of file diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..658ae4c --- /dev/null +++ b/html/index.html @@ -0,0 +1,416 @@ + + + + + + + + + + + Personal-Color-Test + + + + + +
+

Personal Color Test

+

What is my Color?

+
+
+
+ +
+
+ + +
+
+ +
+ + +

+
+
+
+ your image +

+

+

+

+

+
+
+ +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/1.png b/img/1.png new file mode 100644 index 0000000..97acc96 Binary files /dev/null and b/img/1.png differ