MaxLisyanskiy · MaxLisyanskiy · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023
diff --git a/cssBayan/img/acFifth.jpg b/cssBayan/img/acFifth.jpg
diff --git a/cssBayan/img/acFirst.png b/cssBayan/img/acFirst.png
diff --git a/cssBayan/img/acFourth.png b/cssBayan/img/acFourth.png
diff --git a/cssBayan/img/acSecond.png b/cssBayan/img/acSecond.png
diff --git a/cssBayan/img/acThird.png b/cssBayan/img/acThird.png
diff --git a/cssBayan/index.html b/cssBayan/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>CSS Bayan | MaxLisyanskiy</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="./reset.css">
+        <link rel="stylesheet" href="./style.css">
+    </head>
+    <body>
+        <main>
+            <div class="container">
+                <header class="header">
+                    <h1 class="header__title">CSS Bayan</h1>
+                    <div class="header__subtitle">
+                        <h3>mobile</h3>
+                        <h3>tablet</h3>
+                        <h3>desktop</h3>
+                    </div>
+                </header>
+                <section class="accordion">
+                    <div class="acc">
+                        <input id="acFirst" name="acc" type="radio" class="acc__input" checked hidden/>
+                        <label for="acFirst" class="acc-label">
+                            <div class="acc-label__wrapp">
+                                <span class="acc-label__text">Introducing Coercion</span>
+                                <svg class="acc-label__icon" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
+                            </div>
+                            <img class="acc__img" src="./img/acFirst.png" alt="acFirst-img">
+                        </label>
+                    </div>
+                    <div class="acc">
+                        <input id="acSecond" name="acc" type="radio" class="acc__input" hidden/>
+                        <label for="acSecond" class="acc-label">
+                            <div class="acc-label__wrapp">
+                                <span class="acc-label__text">Arrays Get Coerced Too</span>
+                                <svg class="acc-label__icon" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
+                            </div>
+                            <img class="acc__img" src="./img/acSecond.png" alt="acSecond-img">
+                        </label>
+                    </div>
+                    <div class="acc">
+                        <input id="acThird" name="acc" type="radio" class="acc__input" hidden/>
+                        <label for="acThird" class="acc-label">
+                            <div class="acc-label__wrapp">
+                                <span class="acc-label__text">Quick Recap</span>
+                                <svg class="acc-label__icon" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
+                            </div>
+                            <img class="acc__img" src="./img/acThird.png" alt="acThird-img">
+                        </label>
+                    </div>
+                    <div class="acc">
+                        <input id="acFourth" name="acc" type="radio" class="acc__input" hidden/>
+                        <label for="acFourth" class="acc-label">
+                            <div class="acc-label__wrapp">
+                                <span class="acc-label__text">FALSE!</span>
+                                <svg class="acc-label__icon" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
+                            </div>
+                            <img class="acc__img" src="./img/acFourth.png" alt="acFourth-img">
+                        </label>
+                    </div>
+                    <div class="acc">
+                        <input id="acFifth" name="acc" type="radio" class="acc__input" hidden/>
+                        <label for="acFifth" class="acc-label">
+                            <div class="acc-label__wrapp">
+                                <span class="acc-label__text">Conclusion</span>
+                                <svg class="acc-label__icon" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
+                            </div>
+                            <img class="acc__img" src="./img/acFifth.jpg" alt="acFifth-img">
+                        </label>
+                    </div>
+                </section>
+            </div>
+        </main>
+    </body>
+</html>
diff --git a/cssBayan/reset.css 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
@@ -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;
+    }
+}