diff --git a/final/css/style.css b/final/css/style.css new file mode 100644 index 0000000..df1f7c3 --- /dev/null +++ b/final/css/style.css @@ -0,0 +1 @@ +body{margin:0;font-family:"Manrope",sans-serif;font-size:100%;background-size:cover;background-position:center;color:#fff;background-color:#2c2c2c;background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.4)) 0%;transition:background 1s;background-repeat:no-repeat;text-align:center;box-sizing:border-box;font-variant-numeric:tabular-nums}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh}article{height:300px}section{display:flex;flex-direction:column;align-items:center;justify-content:center}h1{text-align:center;font-size:2em;margin:0px}h3{margin-top:4px}footer{position:absolute;bottom:12px;display:flex;left:12px;right:12px;justify-content:space-between}#unsplash-author,#color-picker{transition:background .5s ease-in-out;color:#fff !important;display:flex;justify-content:center;align-items:center;width:56px;height:56px;background:rgba(255,255,255,.4);border-radius:50%;backdrop-filter:blur(10px)}#unsplash-author:hover,#color-picker:hover{background:rgba(255,255,255,.6);border-radius:50%}button{border:none;padding:12px;font-family:"Manrope",sans-serif;font-weight:bold;text-transform:uppercase;background:#000;color:#fff;border-radius:8px}.tab{animation:.3s ease both hide reverse .3s;display:inline-block;cursor:pointer;transition:all .3s .1s;outline:0px;padding:12px;font-family:"Manrope",sans-serif;font-weight:bold;text-transform:uppercase;background:none;margin-right:8px;margin-left:8px;border-radius:12px;width:120px}.active{transition:all .3s;background-color:#fff;color:#000}.tab-row{margin-bottom:24px}.hidden{display:none}textarea{min-width:250px;min-height:100px;max-width:75vw;max-height:40vh;transition:border .2s;background-color:rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:8px;border:2px solid rgba(255,255,255,.6);font-family:"Manrope";backdrop-filter:blur(25px)}textarea::placeholder{color:#fff;transition:all .2s}textarea:focus{outline:none !important;border:2px solid #fff}/*# sourceMappingURL=style.css.map */ diff --git a/final/css/style.css.map b/final/css/style.css.map new file mode 100644 index 0000000..e7978fd --- /dev/null +++ b/final/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA,KACI,SACA,iCACA,eACA,sBACA,2BACA,WACA,yBACA,+DACA,yBACA,4BACA,kBACA,sBACA,kCACJ,WACI,aACA,sBACA,mBACA,uBACA,YACA,aACJ,QACI,aACJ,QACI,aACA,sBACA,mBACA,uBACJ,GACI,kBACA,cACA,WACJ,GACI,eACJ,OACI,kBACA,YACA,aACA,UACA,WACA,8BACJ,+BACI,sCACA,sBACA,aACA,uBACA,mBACA,WACA,YACA,gCACA,kBACA,2BACA,2CACI,gCACA,kBACR,OACI,YACA,aACA,iCACA,iBACA,yBACA,gBACA,WACA,kBACJ,KACI,yCACA,qBACA,eACA,uBACA,YACA,aACA,iCACA,iBACA,yBACA,gBACA,iBACA,gBACA,mBACA,YACJ,QACI,mBACA,sBACA,WACJ,SACI,mBACJ,QACI,aACJ,SACI,gBACA,iBACA,eACA,gBACA,sBACA,sCACA,WACA,kBACA,YACA,sCACA,sBACA,2BACA,sBACI,WACA,mBACJ,eACI,wBACA","file":"style.css"} \ No newline at end of file diff --git a/final/css/style.sass b/final/css/style.sass new file mode 100644 index 0000000..07607ff --- /dev/null +++ b/final/css/style.sass @@ -0,0 +1,106 @@ +body + margin: 0 + font-family: 'Manrope', sans-serif + font-size: 100% + background-size: cover + background-position: center + color: white + background-color: #2c2c2c + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4)) 0% + transition: background 1s + background-repeat: no-repeat + text-align: center + box-sizing: border-box + font-variant-numeric: tabular-nums +.container + display: flex + flex-direction: column + align-items: center + justify-content: center + width: 100vw + height: 100vh +article + height: 300px +section + display: flex + flex-direction: column + align-items: center + justify-content: center +h1 + text-align: center + font-size: 2em + margin: 0px +h3 + margin-top: 4px +footer + position: absolute + bottom: 12px + display: flex + left: 12px + right: 12px + justify-content: space-between +#unsplash-author, #color-picker + transition: background .5s ease-in-out + color: white !important + display: flex + justify-content: center + align-items: center + width: 56px + height: 56px + background: rgba(255,255,255, .4) + border-radius: 50% + backdrop-filter: blur(10px) + &:hover + background: rgba(255,255,255, .6) + border-radius: 50% +button + border: none + padding: 12px + font-family: 'Manrope', sans-serif + font-weight: bold + text-transform: uppercase + background: #000000 + color: #fff + border-radius: 8px +.tab + animation: .3s ease both hide reverse .3s + display: inline-block + cursor: pointer + transition: all .3s .1s + outline: 0px + padding: 12px + font-family: 'Manrope', sans-serif + font-weight: bold + text-transform: uppercase + background: none + margin-right: 8px + margin-left: 8px + border-radius: 12px + width: 120px +.active + transition: all .3s + background-color: white + color: #000 +.tab-row + margin-bottom: 24px +.hidden + display: none +textarea + min-width: 250px + min-height: 100px + max-width: 75vw + max-height: 40vh + transition: border .2s + background-color: rgba(255,255,255,.2) + color: white + border-radius: 8px + padding: 8px + border: 2px solid rgba(255, 255, 255, .6) + font-family: 'Manrope' + backdrop-filter: blur(25px) + &::placeholder + color: white + transition: all .2s + &:focus + outline: none !important + border: 2px solid rgba(255, 255, 255, 1) \ No newline at end of file diff --git a/final/css/style.sass.map b/final/css/style.sass.map new file mode 100644 index 0000000..0502113 --- /dev/null +++ b/final/css/style.sass.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.css"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF","file":"style.sass"} \ No newline at end of file diff --git a/final/img/favicon.svg b/final/img/favicon.svg new file mode 100644 index 0000000..6ebbcf1 --- /dev/null +++ b/final/img/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/final/img/image.svg b/final/img/image.svg new file mode 100644 index 0000000..f411927 --- /dev/null +++ b/final/img/image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/final/index.html b/final/index.html new file mode 100644 index 0000000..d3f9b1a --- /dev/null +++ b/final/index.html @@ -0,0 +1,46 @@ + + +
+ + + + +