Responsividade

felipe-seabra · felipe-seabra · commit 654c22e5313f · 2022-07-16T12:10:09.000-03:00
diff --git a/index.html b/index.html
@@ -29,8 +29,8 @@
   <body>
     <!---Cabeçalho-Main-->
     <header>
-      <div class="background container-fluid">
-        <nav class="navbar navbar-expand-md">
+      <div class="background">
+        <nav class="navbar navbar-expand-md container-fluid">
           <h2 class="logo navbar-brand">Portfó<span>lio</span></h2>
           <button
             class="navbar-toggler"
@@ -89,7 +89,7 @@ <h3>Sou estudante de desenvolvimento web na <strong> <a class="trybe" href="http
         <div class="container">
           <div class="main-sobre row">
             <img class="picture img-fluid" src="images/felipe-seabra.jpg" alt="Foto Felipe Seabra" />
-            <div class="Text-sobre col-md-6 mt-3">
+            <div class="Text-sobre mt-3">
               <h2>Sobre Mim</h2>
               <!-- <h5>Desenvolvedor <span>web</span></h5> -->
               <p>
diff --git a/script.js b/script.js
@@ -1,6 +1,6 @@
 
-function addLinkBotton(classe, link) {
-  let Bottons = document.getElementsByClassName(classe);
+const addLinkBotton = (classe, link) => {
+  const Bottons = document.getElementsByClassName(classe);
   for (let botton of Bottons) {
     botton.href = link;
   }
diff --git a/style.css b/style.css
@@ -408,49 +408,94 @@ footer p {
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
+
 @-o-keyframes flickerAnimation {
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
+
 @-moz-keyframes flickerAnimation {
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
+
 @-webkit-keyframes flickerAnimation {
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
+
 #animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
   animation: flickerAnimation 1s infinite;
 }
+
+@media screen and (max-width: 990px) {
+  .picture {
+    max-width: 280px;
+  }
+
+  .Text-sobre {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+  }
+
+  .Text-sobre h2 {
+    font-size: 2.5em;
+    text-align: center;
+  }
+
+  .title h2 {
+    font-size: 2.5em;
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .navbar {
+    background-color: #191919;
+    z-index: 1;
+    border-radius: 0 0 5px 5px;
+    transition: .5s;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`
`2`		`-function addLinkBotton(classe, link) {`
`3`		`- let Bottons = document.getElementsByClassName(classe);`
	`2`	`+const addLinkBotton = (classe, link) => {`
	`3`	`+ const Bottons = document.getElementsByClassName(classe);`
`4`	`4`	`for (let botton of Bottons) {`
`5`	`5`	`botton.href = link;`
`6`	`6`	`}`