update project card

LeoNardoRR · Oct 12, 2023 · 5f05f77 · 5f05f77
1 parent 27bc443
commit 5f05f77
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 12 deletions.
diff --git a/contact.html b/contact.html
@@ -4,7 +4,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="/css/card.css">
+  <link rel="stylesheet" type="text/css" href="css/card.css">
 </head>
 <body>
   <div class="my-div">
@@ -13,7 +13,7 @@
         <ul>
           <li><a href="index.html">Sobre mim</a></li>
           <li><a href="project.html">Projetos</a></li>
-          <li><a href="contact.html">Contatos</a></li>
+          <li><a href="contact.html">Formação</a></li>
         </ul>
       </nav>
     </footer>

diff --git a/css/card.css b/css/card.css
@@ -75,6 +75,7 @@ body {
 h1 {
   color: var(--dark-orange);
   text-transform: uppercase;
+  font-size: 3vh;
 }
 
 p {
@@ -83,6 +84,7 @@ p {
 
 footer {
   padding: 10px 0;
+  display: flex;
 }
 
 nav ul {
@@ -137,7 +139,7 @@ nav ul li a:hover {
   margin: 10px 3px;
   line-height: 60px;
   border-radius: 50%;
-  cursor: pointer; 
+  cursor: pointer;
   transition: all .2s ease-in-out;
 }
 
@@ -156,11 +158,65 @@ nav ul li a:hover {
 }
 
 .social-media-list li:hover:after {
-  opacity: 1;  
+  opacity: 1;
   transform: scale(1.12);
   transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65);
 }
 
 .social-media-list li:hover a {
   color: #000;
+}
+
+.cards {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-direction: column;
+  gap: 15px;
+}
+
+.cards .red {
+  background-color: #ff6000;
+}
+
+.cards .blue {
+  background-color: #ffa559;
+}
+
+.cards .green {
+  background-color: #ff620096;
+}
+
+.cards .card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  height: 100px;
+  width: 250px;
+  border-radius: 10px;
+  color: white;
+  cursor: pointer;
+  transition: 400ms;
+}
+
+.cards .card p.tip {
+  font-size: 1em;
+  font-weight: 700;
+}
+
+.cards .card p.second-text {
+  font-size: .7em;
+}
+
+.cards .card:hover {
+  transform: scale(1.1, 1.1);
+}
+
+.cards:hover > .card:not(:hover) {
+  filter: blur(10px);
+  transform: scale(0.9, 0.9);
 }
diff --git a/img/me.png b/img/me.png
diff --git a/index.html b/index.html
@@ -4,21 +4,21 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="/css/card.css">
+  <link rel="stylesheet" type="text/css" href="css/card.css">
 </head>
 <body>
   <div class="my-div">
     <div class="photo">
-      <img class="gif" src="/video.gif" alt="GIF animado">
+      <img>
     </div>
     <h1>Sobre mim:</h1>
-    <p>这是要插入到我正在创建的网站上的测试文本</p>
+    <p>Leonardo Ribeiro<br>Desenvolvedor de Sistemas<br>Javascript - Vue.JS - SQL</p>
     <ul class="social-media-list">
       <li>
-        <img src="/img/github.png" class="github">
+        <img src="img/github.png" class="github">
       </li>
       <li>
-          <img src="/img/linkedin.png" class="linkedin">
+          <img src="img/linkedin.png" class="linkedin">
       </i>
       </li>
     </ul>
@@ -27,7 +27,7 @@ <h1>Sobre mim:</h1>
         <ul>
           <li><a href="index.html">Sobre mim</a></li>
           <li><a href="project.html">Projetos</a></li>
-          <li><a href="contact.html">Contatos</a></li>
+          <li><a href="contact.html">Formação</a></li>
         </ul>
       </nav>
     </footer>

diff --git a/project.html b/project.html
@@ -4,16 +4,30 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="/css/card.css">
+  <link rel="stylesheet" type="text/css" href="css/card.css">
 </head>
 <body>
   <div class="my-div">
+    <div class="cards">
+      <div class="card red">
+          <p class="tip">Quantum Computing</p>
+          <p class="second-text">Lorem Ipsum</p>
+      </div>
+      <div class="card blue">
+          <p class="tip">Cybersecurity</p>
+          <p class="second-text">Lorem Ipsum</p>
+      </div>
+      <div class="card green">
+          <p class="tip">Hover Me</p>
+          <p class="second-text">Lorem Ipsum</p>
+      </div>
+  </div>
     <footer>
       <nav>
         <ul>
           <li><a href="index.html">Sobre mim</a></li>
           <li><a href="project.html">Projetos</a></li>
-          <li><a href="contact.html">Contatos</a></li>
+          <li><a href="contact.html">Formação</a></li>
         </ul>
       </nav>
     </footer>