diff --git a/cssBayan/css/media.css b/cssBayan/css/media.css new file mode 100644 index 0000000..1908eb0 --- /dev/null +++ b/cssBayan/css/media.css @@ -0,0 +1,86 @@ +@media (hover: hover) { + .bayan-wrapper { + cursor: pointer; + } + + .bayan-wrapper:hover>.bayan-img { + margin: 3rem auto; + height: 30rem; + width: 25rem; + opacity: 1; + filter: blur(0); + } + + .bayan-wrapper:hover>.bayan-head>.bayan-down-icon { + transform: rotate(180deg); + fill: white; + } + + .bayan:hover svg { + fill: white; + } + + .bayan:hover h2 { + color: white + } +} + +@media (hover: none) { + .bayan-toggle:checked~.bayan-img { + animation: none; + } +} + +@media only screen and (min-width: 64.5em) { + html { + font-size: 55%; + } +} + +@media only screen and (max-width: 64.3em) { + html { + font-size: 40%; + } + + .container { + min-height: 111rem; + } +} + +@media only screen and (max-width: 43em) { + .title { + font-size: 5rem; + } + + .container { + max-width: 75vw; + } + + .bayan-content { + font-size: 2rem; + } +} + +@media only screen and (max-width: 33em) { + html { + font-size: 40%; + } + + .bayan-img { + width: 21rem; + height: 0; + } + + .bayan-toggle:checked~.bayan-img { + height: 25rem; + width: 20rem; + } + + .container { + min-height: 106rem; + } + + .bayan-content { + font-size: 1.6rem; + } +} \ No newline at end of file diff --git a/cssBayan/css/style.css b/cssBayan/css/style.css new file mode 100644 index 0000000..d6defca --- /dev/null +++ b/cssBayan/css/style.css @@ -0,0 +1,159 @@ +@keyframes bayanClick { + 0% { + height: 30rem; + filter: blur(0); + } + + 25% { + height: 37rem; + filter: blur(.13rem); + transform: translateY(-1rem); + padding-bottom: 3rem; + } + + 40% { + height: 28rem; + filter: blur(.03rem); + transform: translateY(0); + padding-bottom: 0rem; + } + + 60% { + height: 30.5rem; + filter: blur(.05); + transform: translateY(-.2rem); + } + + 80% { + height: 29.87rem; + filter: blur(.03); + transform: translateY(0rem); + } + + 100% { + height: 30rem; + filter: blur(0); + } +} + +* { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: Open Sans, sans-serif; + background-image: linear-gradient(to bottom right, #BB000E, #E31C25); +} + +::selection { + background-color: #111111; + color: #BB000E; +} + +.container { + max-width: 50vw; + height: 100vh; + margin: 10rem auto; +} + +.title { + font-size: 7rem; + color: #1C1C1C; + margin-right: 1.5rem; + font-weight: 800; + margin-bottom: 1.5rem; +} + +.bayan { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: center; + justify-content: center; + min-width: 70%; + min-height: 5rem; + margin: 0 auto; +} + +.bayan-head { + display: flex; + align-items: center; + justify-content: space-between; + height: 6rem; + background-image: linear-gradient(to right, #E31C25, #BB000E); +} + +.bayan-down-icon { + height: 3rem; + width: 3rem; + fill: #1C1C1C; + margin-right: 2rem; + transition: .2s all .1s; +} + +.bayan-wrapper { + min-width: 100%; + min-height: 5rem; + background-image: linear-gradient(to bottom right, #111111, #1C1C1C); + color: white; + border-radius: .6rem; + overflow: hidden; + box-shadow: 0 0 6rem rgba(0, 0, 0, .5); +} + +.bayan-toggle { + display: none; +} + +.bayan-content { + font-weight: 300; + font-size: 2.3rem; + margin-left: 2rem; + color: #1C1C1C; + transition: .2s all .1s; +} + +.bayan-img { + display: block; + margin: 1.5rem auto; + width: 21rem; + height: 0; + opacity: 0; + border-radius: .3rem; + filter: blur(.3rem); + will-change: height, width, transform; + transition: + opacity .2s, + height .5s cubic-bezier(.4, .9, 0, 1.08), + width .3s cubic-bezier(.4, .9, 0, 1.08) .4s, + transform .3s, + filter .2s; +} + +.bayan-toggle:checked~.bayan-img { + margin: 3rem auto; + height: 30rem; + width: 25rem; + opacity: 1; + filter: blur(0); + animation: bayanClick .5s; +} + +.bayan-toggle:checked+.bayan-head>.bayan-content { + color: white; +} + +.bayan-toggle:checked+.bayan-head>.bayan-down-icon { + fill: white; +} + +.bayan-toggle:checked+.bayan-head>.bayan-down-icon { + transform: rotate(180deg); +} \ No newline at end of file diff --git a/cssBayan/img/cssBayan.jpg b/cssBayan/img/cssBayan.jpg new file mode 100644 index 0000000..b4aa59e Binary files /dev/null and b/cssBayan/img/cssBayan.jpg differ diff --git a/cssBayan/img/func.jpg b/cssBayan/img/func.jpg new file mode 100644 index 0000000..0cc46a6 Binary files /dev/null and b/cssBayan/img/func.jpg differ diff --git a/cssBayan/img/idea.jpg b/cssBayan/img/idea.jpg new file mode 100644 index 0000000..b9274f0 Binary files /dev/null and b/cssBayan/img/idea.jpg differ diff --git a/cssBayan/img/json.png b/cssBayan/img/json.png new file mode 100644 index 0000000..b7fb7c0 Binary files /dev/null and b/cssBayan/img/json.png differ diff --git a/cssBayan/img/sprite.svg b/cssBayan/img/sprite.svg new file mode 100644 index 0000000..2606c0d --- /dev/null +++ b/cssBayan/img/sprite.svg @@ -0,0 +1,16 @@ + diff --git a/cssBayan/index.html b/cssBayan/index.html new file mode 100644 index 0000000..e1db458 --- /dev/null +++ b/cssBayan/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + + cssBayan + + + +
+

CSS Bayan

+
+ + + + + + + +
+
+ + + \ No newline at end of file