diff --git a/cssBayan/img/acFifth.jpg b/cssBayan/img/acFifth.jpg new file mode 100644 index 0000000..100d076 Binary files /dev/null and b/cssBayan/img/acFifth.jpg differ diff --git a/cssBayan/img/acFirst.png b/cssBayan/img/acFirst.png new file mode 100644 index 0000000..79bf685 Binary files /dev/null and b/cssBayan/img/acFirst.png differ diff --git a/cssBayan/img/acFourth.png b/cssBayan/img/acFourth.png new file mode 100644 index 0000000..3bdd1d6 Binary files /dev/null and b/cssBayan/img/acFourth.png differ diff --git a/cssBayan/img/acSecond.png b/cssBayan/img/acSecond.png new file mode 100644 index 0000000..4b4d1c8 Binary files /dev/null and b/cssBayan/img/acSecond.png differ diff --git a/cssBayan/img/acThird.png b/cssBayan/img/acThird.png new file mode 100644 index 0000000..7eb4f9e Binary files /dev/null and b/cssBayan/img/acThird.png differ diff --git a/cssBayan/index.html b/cssBayan/index.html new file mode 100644 index 0000000..3c06df4 --- /dev/null +++ b/cssBayan/index.html @@ -0,0 +1,80 @@ + + + + + + + CSS Bayan | MaxLisyanskiy + + + + + + + +
+
+
+

CSS Bayan

+
+

mobile

+

tablet

+

desktop

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + \ No newline at end of file diff --git a/cssBayan/reset.css b/cssBayan/reset.css new file mode 100644 index 0000000..f2bb094 --- /dev/null +++ b/cssBayan/reset.css @@ -0,0 +1,102 @@ +/* Reset and base styles */ +* { + padding: 0px; + margin: 0px; + border: none; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +:focus, +:active { + /*outline: none;*/ +} + +a:focus, +a:active { + /* outline: none;*/ +} + +/* Links */ + +a, a:link, a:visited { + /* color: inherit; */ + text-decoration: none; + /* display: inline-block; */ +} + +a:hover { + /* color: inherit; */ + text-decoration: none; +} + +/* Common */ + +aside, nav, footer, header, section, main { + display: block; +} + +h1, h2, h3, h4, h5, h6, p { + font-size: inherit; + font-weight: inherit; +} + +ul, ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +img, svg { + max-width: 100%; + height: auto; +} + +address { + font-style: normal; +} + +/* Form */ + +input, textarea, button, select { + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: transparent; +} + +input::-ms-clear { + display: none; +} + +button, input[type="submit"] { + display: inline-block; + box-shadow: none; + background-color: transparent; + background: none; + cursor: pointer; +} + +input:focus, input:active, +button:focus, button:active { + outline: none; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +label { + cursor: pointer; +} + +legend { + display: block; +} diff --git a/cssBayan/style.css b/cssBayan/style.css new file mode 100644 index 0000000..332387b --- /dev/null +++ b/cssBayan/style.css @@ -0,0 +1,179 @@ +:root { + --text-size: calc(100vw/30); + --text-color: #FF5833; + --text-color-checked: #000000; + --text-color-active: #1734db; +} + +body { + font-family: 'Golos Text', sans-serif; + background-color: #f1f4fa; +} + +.container { + max-width: 80em; + width: 100%; + margin: 0 auto; + padding: 2em; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1.5em; +} + +.header__title { + font-weight: 900; + font-size: calc(var(--text-size) * 2); +} + +.header__subtitle h3{ + display: none; + font-size: calc(var(--text-size) * 1.2); +} + + +/* accordion */ +.acc { + margin: 0.5em 0; +} + +.acc-label { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 0.8em 1.2em; + background-color: #fff; + border-radius: 0.8em; +} + +.acc-label__wrapp { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + +.acc-label__text { + font-size: var(--text-size); + color: var(--text-color); + transition: all .2s ease; +} + +.acc-label__icon { + width: 2em; + transition: all .3s ease; +} + +.acc__img { + width: 0; + height: 0; + border-radius: 0.8em; + transition: all .5s ease-in-out; + -moz-transition: all .5s ease-in-out; + -webkit-transition: all .5s ease-in-out; +} + + +/* actions */ +input:checked ~ label { + box-shadow: 0 0 0.4em rgb(204 204 204 / 60%); +} + +input:checked ~ label .acc-label__text { + color: var(--text-color-checked) +} + +input:checked ~ label .acc-label__icon { + transform: rotate(45deg); +} + +input:checked ~ label .acc__img { + width: 80%; + height: auto; + margin: 1em 0; +} + + +/* media */ +@media (min-width: 320px) { + + :root { + --text-size: .8em + } + + body { + font-size: .8em; + } + + .header__subtitle h3:first-child { + display: block; + } +} + +@media (min-width: 600px) { + :root { + --text-size: 1.2em + } + + .header__subtitle h3:first-child { + display: none; + } + + .header__subtitle h3:nth-child(2) { + display: block; + } +} + +@media (min-width: 1200px) { + :root { + --text-size: 1.6em + } + + .header__subtitle h3:nth-child(2) { + display: none; + } + + .header__subtitle h3:last-child { + display: block; + } + + .acc-label__icon { + opacity: 0; + } + + .acc:hover .acc__img { + width: 80%; + height: auto; + margin: 1em 0; + } + + .accordion:hover .acc-label__text{ + color: var(--text-color-checked) + } + + .accordion:hover .acc-label__icon{ + opacity: 1; + } + + .acc:hover .acc-label__icon { + transform: rotate(45deg); + } + + .acc-label:active .acc-label__text{ + color: var(--text-color-active); + opacity: 0.8; + } + + .acc-label:active .acc-label__icon{ + fill: var(--text-color-active); + opacity: 0.8; + } + + .acc-label:active .acc__img{ + opacity: 0.8; + } +} \ No newline at end of file