From cbad6a674fb67b435656748f27f0c261769008b5 Mon Sep 17 00:00:00 2001 From: park Date: Fri, 2 Jul 2021 00:10:37 +0900 Subject: [PATCH] first commit --- css/style.css | 494 ++++++++++++++++++++++++++++++++++++++++++++++++ html/index.html | 416 ++++++++++++++++++++++++++++++++++++++++ img/1.png | Bin 0 -> 1256 bytes 3 files changed, 910 insertions(+) create mode 100644 css/style.css create mode 100644 html/index.html create mode 100644 img/1.png 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 0000000000000000000000000000000000000000..97acc9669e605b8c162e484bf734c786f1b6edca GIT binary patch literal 1256 zcmeAS@N?(olHy`uVBq!ia0vp^2Z8ti2Q!fDI`EwvNI3=ggt(@qrM>&~t02E%>eQ(l zH*P$C{``#_H~#+5n zS&J0}+%B^SnqP^$_dhhzg8I;uXwfWk6Uo~Pl+wdYC1AM8|)~1s&@D554NeA z^OG(lbLIxz{=~Y?Zd0SyHDBE=uk-ES&egk?#A>4N$a`f{!ttKmV6q~O zakc!Gz|7x#tP2iaVt(w#eDwz#>zso+7k0jFk6{l#Alaf|=6`#c(vo zO`&Q3wEzAokM`T}ca1*gry%$$GfkFr~R@>S^qy%x3Q;?f&p*-bC3Ry4|~+dnm~ zQp(39f#-^mTU=}AZi|Q$9*5qDn^xbhf6u^~(c)--UZpFRHC)%3ZvlhB4AwXA&bIG6 zsCj|+kktMhr8JwY2F(e)&rA;rOpl5Rv6#&3Bqo&AWt?se!;Sf)m3(j zBz`3N++w`?Bw?9E$q~bn!_S$V)CG8CQkGr{Qf^ETsBYMK@CxV4^sJX`AKOp#XLgz@ z-gQXcrBHI{LnZSg_W$2QYwj#y_u)|cQ_!MTyYF1lrsmr> zi8mv*zFl8O-t2|v{H{M{LA+5%K4~Rrq*`8eczj4f$5_bO@~Xni{c77*Xv)sYnox4S zocq$>`ytJ2`4b|dgLo&b?D%&5h(dhxV-m9!{w(cptHiB=Ij36# PsDZ)L)z4*}Q$iB}rQawg literal 0 HcmV?d00001