From cae847fc92e04c756331cebbadf5019e6d9e63d9 Mon Sep 17 00:00:00 2001
From: Gabriel marques do Nascimento <gabrielmarquesnascimentob@gmail.com>
Date: Tue, 29 Oct 2024 17:44:02 -0300
Subject: [PATCH] style mobal updt

---
 focus/Book2.html | 119 +++++++++++++++++++++++++++++++++++++++++++++++
 index.html       |   4 +-
 style.css        |  10 ++--
 3 files changed, 127 insertions(+), 6 deletions(-)
 create mode 100644 focus/Book2.html

diff --git a/focus/Book2.html b/focus/Book2.html
new file mode 100644
index 0000000..744061f
--- /dev/null
+++ b/focus/Book2.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Efeito de Virar Páginas</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body, html {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f0f0f0;
+    overflow: hidden;
+    font-family: Arial, sans-serif;
+}
+
+.book {
+    perspective: 1500px;
+    width: 600px;
+    height: 400px;
+    position: relative;
+}
+
+.page {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    backface-visibility: hidden;
+    transform-origin: left;
+    transition: transform 1s ease;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+
+/* Configuração inicial para cada página */
+#page1 {
+    z-index: 4;
+}
+
+#page2 {
+    transform: rotateY(-180deg);
+    z-index: 3;
+}
+
+#page3 {
+    transform: rotateY(-180deg);
+    z-index: 2;
+}
+
+#page4 {
+    transform: rotateY(-180deg);
+    z-index: 1;
+}
+
+/* Efeito de virar páginas em sequência */
+.book:hover #page1 {
+    transform: rotateY(-180deg);
+}
+
+.book:hover #page2 {
+    transform: rotateY(-360deg);
+    transition-delay: 0.2s;
+}
+
+.book:hover #page3 {
+    transform: rotateY(-540deg);
+    transition-delay: 0.4s;
+}
+
+.book:hover #page4 {
+    transform: rotateY(-720deg);
+    transition-delay: 0.6s;
+}
+
+.page .content {
+    padding: 20px;
+}
+</style>
+<body>
+    <div class="book">
+        <div class="page" id="page1">
+            <div class="content">
+                <h1>Página 1</h1>
+                <p>Conteúdo da primeira página.</p>
+            </div>
+        </div>
+        <div class="page" id="page2">
+            <div class="content">
+                <h1>Página 2</h1>
+                <p>Conteúdo da segunda página.</p>
+            </div>
+        </div>
+        <div class="page" id="page3">
+            <div class="content">
+                <h1>Página 3</h1>
+                <p>Conteúdo da terceira página.</p>
+            </div>
+        </div>
+        <div class="page" id="page4">
+            <div class="content">
+                <h1>Página 4</h1>
+                <p>Conteúdo da quarta página.</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index fc2ed4b..8ffa012 100644
--- a/index.html
+++ b/index.html
@@ -191,9 +191,9 @@ <h1>setings</h1>
     <button class="scrollbt buttons" id="setting" title="setting">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        height="24px"
+        height="30px"
         viewBox="0 -960 960 960"
-        width="24px"
+        width="30px"
         fill="#5f6368"
       >
         <path
diff --git a/style.css b/style.css
index 5cdc090..1960ed6 100644
--- a/style.css
+++ b/style.css
@@ -87,7 +87,8 @@ margin-top: 40%;
   
   left: 90.3%;
   top: 52%;
-  
+  background: rgba(0, 0, 0, 0);
+  border: none;
 }
 #setting:hover{
   background: black;
@@ -376,7 +377,8 @@ body {
       #pai {
    margin-top: 20px;     
   width: 95%;
-  height: 88vh;
+  height: 86vh;
+  
 
   
 }
@@ -397,9 +399,9 @@ body {
     #setting{
   position: fixed;
   left: 90%;
-  top: 0;
+  top: -4px;
   z-index: 4;
-  border-radius: 50%;
+  
   
 }
 #setings {