sosukii · sosukii · Mar 10, 2023 · Mar 11, 2023 · Mar 11, 2023 · Mar 11, 2023
diff --git a/cssBayan/favicon.ico b/cssBayan/favicon.ico
diff --git a/cssBayan/img/Poncho.jpg b/cssBayan/img/Poncho.jpg
diff --git a/cssBayan/img/close.png b/cssBayan/img/close.png
diff --git a/cssBayan/img/closeLashes.png b/cssBayan/img/closeLashes.png
diff --git a/cssBayan/img/open.png b/cssBayan/img/open.png
diff --git a/cssBayan/img/reason.jpg b/cssBayan/img/reason.jpg
diff --git a/cssBayan/img/t3.jpg b/cssBayan/img/t3.jpg
diff --git a/cssBayan/img/tom.jpg b/cssBayan/img/tom.jpg
diff --git a/cssBayan/img/vetDoctor.jpg b/cssBayan/img/vetDoctor.jpg
diff --git a/cssBayan/index.css b/cssBayan/index.css
@@ -0,0 +1,109 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+@font-face {
+  font-family: "spongeBob";
+  src: url("spongeBob.woff2") format("woff2"),
+    url("spongeBob.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+body {
+  background-image: url(./img/t3.jpg);
+  background-size: contain;
+  font-family: "spongeBob";
+}
+.wrapper {
+  padding-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+}
+.main-title {
+  padding: 1.5rem;
+  text-align: center;
+}
+.mem-title {
+  transition: 0.5s;
+}
+.mem-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.eye {
+  background-image: url(./img/closeLashes.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 1.25rem;
+  height: 1.25rem;
+  opacity: 0;
+  rotate: -20deg;
+  transition: 0.4s;
+}
+.parent {
+  padding: 0.9rem;
+  width: 75vw;
+  background-color: #453210e0;
+  color: honeydew;
+  display: flex;
+  flex-direction: column;
+  transition: 0.4s;
+}
+.child {
+  align-self: center;
+  padding: 0.5rem;
+  transition: 0.9s;
+  visibility: hidden;
+  opacity: 0;
+  width: 0%;
+}
+
+.parent:hover {
+  cursor: pointer;
+}
+.parent:hover .child {
+  visibility: visible;
+  opacity: 1;
+  width: 60%;
+}
+.parent:focus .child {
+  visibility: visible;
+  opacity: 1;
+  width: 60%;
+}
+
+.content:hover .eye {
+  opacity: 1;
+  rotate: 20deg;
+}
+.parent:hover .eye {
+  background-image: url(./img/open.png);
+}
+.parent:focus .eye {
+  background-image: url(./img/open.png);
+  rotate: -30deg;
+  transform: scale(-1, 1);
+}
+
+.content:hover .mem-title {
+  color: #f99e9e;
+}
+
+input {
+  height: 0;
+  width: 0;
+  opacity: 0;
+}
+input:focus + .parent .child {
+  visibility: visible;
+  opacity: 1;
+  width: 60%;
+}
+input:focus + .parent .mem-header .eye {
+  background-image: url(./img/open.png);
+  rotate: -30deg;
+  transform: scale(-1, 1);
+}
diff --git a/cssBayan/index.html b/cssBayan/index.html
@@ -0,0 +1,52 @@
+<!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" />
+    <link rel="stylesheet" href="./index.css" />
+    <link rel="stylesheet" href="./mediaQueries.css">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico">
+    <title>Sponge Bob Bayan-Pants</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <h1 class="main-title">Sponge Bob - Bayan-Pants</h1>
+      <div class="content">
+        <input type="text" autofocus>
+          <div class="parent" tabindex="1">
+            <div class="mem-header">
+              <p class="mem-title">Как поспать быстро?</p>
+              <div class="eye"></div>
+            </div>
+
+            <img src="./img/tom.jpg" alt="the tom cat want to go to sleep" class="child">
+          </div>
+        </input>
+
+        <div class="parent" tabindex="2">
+          <div class="mem-header">
+            <p class="mem-title">Самое важное!</p>
+            <div class="eye"></div>
+          </div>
+          <img src="./img/reason.jpg" alt="reason to alive" class="child">
+        </div>
+        <div class="parent" tabindex="3">
+          <div class="mem-header">
+            <p class="mem-title">Котик у ветеринара</p>
+            <div class="eye"></div>
+          </div>
+          <img src="./img/vetDoctor.jpg" alt="cat at the doctor" class="child">
+        </div>
+        <div class="parent" tabindex="4">
+          <div class="mem-header">
+            <p class="mem-title">Пончо и бананчик</p>
+            <div class="eye"></div>
+          </div>
+          <img src="./img/Poncho.jpg" alt="poncho dog scared by banana" class="child">
+        </div>
+      </div>
+
+    </div>
+  </body>
+</html>
diff --git a/cssBayan/mediaQueries.css b/cssBayan/mediaQueries.css
@@ -0,0 +1,36 @@
+@media screen and (min-width: 320px) {
+  .parent,
+  .main-title {
+    font-size: 6vw;
+  }
+  .eye {
+    width: 6vw;
+    height: 6vw;
+  }
+}
+@media screen and (min-width: 820px) {
+  .parent,
+  .main-title {
+    font-size: 4.5vw;
+  }
+  .eye {
+    width: 4.5vw;
+    height: 4.5vw;
+  }
+}
+@media screen and (min-width: 1920px) {
+  .parent,
+  .main-title {
+    font-size: 5vw;
+  }
+  .eye {
+    width: 5vw;
+    height: 5vw;
+  }
+}
+
+@media (hover: none) {
+  .eye {
+    opacity: 1;
+  }
+}
diff --git a/cssBayan/spongeBob.woff b/cssBayan/spongeBob.woff
diff --git a/cssBayan/spongeBob.woff2 b/cssBayan/spongeBob.woff2