design renovaso

Author: GabrielTSR

block.css

@@ -6,6 +6,8 @@
     font-size: 20px;
     width: 100vw;
     gap: 20px;
+    min-height: 100vh;
+    scroll-behavior: smooth;
 }
 
 .Block h1 {
@@ -16,11 +18,33 @@
 }
 
 .Dark-Theme {
+    background-color: rgb(45, 45, 48);
+    color: rgb(196, 192, 192);
+}
+
+.Dark-Theme:hover {
+    transition: all 1s;
     background-color: #2a2a37;
     color: rgb(233, 230, 229);
 }
 
 .Light-Theme {
-    background-color: rgb(233, 230, 229);
+    background-color: rgb(209, 199, 199);
+    color: rgb(54, 53, 52);
+}
+
+.Light-Theme:hover {
+    transition: all 1s;
+    background-color: rgb(233, 229, 229);
     color: rgb(68, 67, 66);
+}
+
+.Block a img:hover {
+    transition: all 1s;
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+    border-radius: 20px;
 }

classEntrada.css

@@ -13,13 +13,13 @@
 
 .slider {
     display: flex;
-    height: 100%;
-    width: 100%;
+    height: 80vh;
+    width: 80vw;
     align-items: center;
     justify-content: center;
     margin: auto;
     margin-top: 0%;
-    position: relative;
+    position: absolute;
 }
 
 .slider li {
@@ -29,8 +29,8 @@
 
 .slider img {
     margin: auto;
-    height: 100%;
-    width: 100%;
+    height: 80vh;
+    width: 80vw;
     vertical-align: top;
 }
 
@@ -65,10 +65,15 @@
 .slider img {
     opacity: 0;
     visibility: hidden;
+    transition: opacity 800ms;
 }
 
 .slider li input:checked~img {
     opacity: 1;
     visibility: visible;
     z-index: 10;
+}
+
+#FPOO p:hover~h1 {
+    color: red;
 }

footer.css

@@ -1,42 +1,47 @@
-footer {
-    height: 80px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    max-width: 500px;
-    padding-top: 10px;
-}
-
-#contact-Us {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    height: 100%;
-}
-
-footer a {
-    color: rgb(233, 230, 229);
-    font-size: 30px;
-}
-
-#redes-Sociais-Block {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-#links-a {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 150px;
-    height: 40px;
-}
-
-#links-a a:hover {
-    transition: all 1s;
-    color: #c40000;
-    font-size: 35px;
-}
+    footer {
+        height: 80px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        max-width: 500px;
+        padding-top: 10px;
+    }
+    
+    #contact-Us {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        height: 100%;
+    }
+    
+    footer a {
+        color: rgb(233, 230, 229);
+        font-size: 30px;
+    }
+    
+    #redes-Sociais-Block {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    
+    #links-a {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 150px;
+        height: 40px;
+    }
+    
+    #links-a a:hover {
+        transition: all 1s;
+        color: #c40000;
+        transition: all 1s;
+        -webkit-transform: scale(1.1);
+        -moz-transform: scale(1.1);
+        -o-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        transform: scale(1.1);
+    }

fpoo.css

@@ -1,7 +1,6 @@
 .FPOO {
     display: flex;
     flex-direction: column;
-    height: 100vh;
 }
 
 .FPOO h1 {

img/binarios.jpg

@@ -83,7 +83,7 @@
                     <img src="img/senai-slider3.jpg" />
                 </li>
             </ul>
-
+            <script src="slider.js"></script>
         </div>
         <div id="FPOO" class="FPOO Block Dark-Theme">
             <h1>

index.html

@@ -1,7 +1,6 @@
 .LIMA {
     text-align: justify;
     width: 100vw;
-    height: 120vh;
 }
 
 #imageLima-Line {

lima.css

@@ -17,15 +17,16 @@
     #conteudo-Container {
         flex-direction: column;
     }
+    .slider,
+    .slider img {
+        height: 50vh;
+    }
     #conteudo-Container {
         width: 100vw;
     }
-    .each-VideoAndText {
-        background-color: black
-    }
     .LIMA p,
     .SOP p {
-        width: 90vw;
+        width: 100%;
     }
     article {
         width: 90%;
@@ -77,13 +78,6 @@
     }
 }
 
-@media(max-width: 1087px) {
-    .FPOO,
-    .LIMA {
-        height: 110%;
-    }
-}
-
 @media (min-width: 1238px) {
     #aside-FPOO {
         justify-content: space-between;

responsividade.css

@@ -0,0 +1,31 @@
+let time = 5000,
+    currentImageIndex = 0,
+    images = document
+    .querySelectorAll(".slider li img")
+max = images.length;
+
+function click(id) {
+
+    var element = document.getElementById(id);
+    if (element.click)
+        element.click();
+    else if (document.createEvent) {
+        var eventObj = document.createEvent('MouseEvents');
+        eventObj.initEvent('click', true, true);
+        element.dispatchEvent(eventObj);
+    }
+
+}
+
+function start() {
+    setInterval(() => {
+
+
+        click('slide1')
+        click('slide2')
+        click('slide3')
+
+    }, time)
+}
+
+window.addEventListener("load", start)