Fixing some styling details

Ezequiel-Mathias · Aug 5, 2023 · 515cb99 · 515cb99
1 parent 08fe0cc
commit 515cb99
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 31 deletions.
diff --git a/img/perfil.jpeg b/img/perfil.jpeg
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 <body>
 
  <header>
-
+ 
  <nav>
 
  <div class="menu-name">
@@ -64,12 +64,16 @@ <h1>Ezequiel Mathias</h1>
  <p>“O código limpo sempre parece ter sido escrito por alguém que se importa.” <br>
  ― Robert C. Martin, Clean Code
  </p>
- <a href="./Curriculum/Ezequeil-Mathias.docx" download="Ezequiel-Mathias.docx"
- type="application/vnd.openxmlformats-officedocument.wordprocessingml.document">
- <div class="button-download-curriculum">
- BAIXAR CURRÍCULO
- </div>
- </a>
+
+ <div class="container-button-download-curriculum">
+ <a href="./Curriculum/Ezequeil-Mathias.docx" download="Ezequiel-Mathias.docx"
+ type="application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+ <div class="button-download-curriculum">
+ BAIXAR CURRÍCULO
+ </div>
+ </a>
+ </div>
+
 
 
  </div>
@@ -92,9 +96,10 @@ <h1>Ezequiel Mathias</h1>
 
  <div class="profile-picture">
  <div class="picture">
-
+ <img src="./img/perfil.jpeg" alt="">
  </div>
  </div>
+
  <h1>Ezequiel Mathias</h1>
 
  <div class="contacts">

diff --git a/js/ScrollReveal.js b/js/ScrollReveal.js
@@ -2,16 +2,6 @@ window.sr = ScrollReveal({ reset: true });
 
 sr.reveal('.short-presentation', {duration: 2000});
 
-sr.reveal('.about', {
- rotate: {x: 20, y: 80, z: 0}, 
- duration: 2000
-});
-
-sr.reveal('.profile-contacts', {
- rotate: {x: 20, y: 80, z: 20}, 
- duration: 2000
-});
-
 sr.reveal('.all-skills', {
  duration: 2000
 });

diff --git a/style.css b/style.css
@@ -16,6 +16,7 @@
 
 html {
  scroll-behavior: smooth;
+
 }
 
 body {
@@ -44,6 +45,7 @@ header {
  z-index: 10;
 }
 
+
 header nav {
  display: flex;
  justify-content: space-between;
@@ -151,6 +153,11 @@ header nav h1 {
 
 .short-presentation a {
  text-decoration: none;
+
+}
+
+.container-button-download-curriculum {
+ width: clamp(12rem, 16vw, 14.4rem);
 }
 
 .button-download-curriculum {
@@ -209,7 +216,7 @@ header nav h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
- visibility: hidden;
+
 }
 
 .about p {
@@ -258,14 +265,15 @@ header nav h1 {
  display: flex;
  align-items: center;
  flex-direction: column;
- justify-content: center;
  position: absolute;
- visibility: hidden;
+
+ justify-content: center;
+
 }
 
 .profile-picture {
- height: 150px;
- width: 150px;
+ height: 180px;
+ width: 180px;
  border-radius: 100%;
  border: solid 5px var(--green-water);
  display: flex;
@@ -274,31 +282,41 @@ header nav h1 {
 }
 
 .picture {
- height: 130px;
- width: 130px;
+ height: 160px;
+ width: 160px;
  border-radius: 100%;
  background-color: var(--white);
 }
 
+.picture img {
+ width: 100%;
+ height: 100%;
+ border-radius: 100%;
+
+}
+
 .profile-contacts h1 {
  font-weight: bolder;
  margin-top: 8px;
  font-size: clamp(1.4rem, 2vw, 1.5rem);
 }
 
-.profile-contacts .contacts {
+ .contacts {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.3rem, 1.5vw, 2rem);
+ position: relative;
 }
 
+
+
 .profile-contacts .contacts img {
  width: clamp(1.7rem, 3vw, 2rem);
 }
 
-.profile-contacts .contacts img:hover {
+.contacts img:hover {
  cursor: pointer;
  transform: scale(1.1);
 }
@@ -584,7 +602,7 @@ header nav h1 {
  cursor: pointer;
 }
 
-#cell-phone:hover{
+#cell-phone:hover {
  cursor: auto;
 }
 
@@ -608,7 +626,7 @@ header nav h1 {
 
 footer {
  margin-top: 168px;
- height: clamp(4rem, 10vw, 5.625rem);
+ height: clamp(4rem, 10vw, 5rem);
  background-color: var(--dark-blue);
  display: flex;
  justify-content: center;
@@ -622,8 +640,8 @@ footer span {
  font-weight: bolder;
 }
 
-.button-download-curriculum:hover
-,.container-close-information img:hover {
+.button-download-curriculum:hover,
+.container-close-information img:hover {
  cursor: pointer;
 }