portifolio0.0.0.1

yMatheusFernandes · Sep 8, 2024 · 2ce7c22 · 2ce7c22
1 parent 262fd9f
commit 2ce7c22
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -66,12 +66,27 @@ <h2>Matheus</h2>
         <h2>Nossos Projetos</h2>
         <p>Veja abaixo alguns dos nossos trabalhos mais recentes, incluindo colaborações.</p>
         <div>
-            <img src="janela.png" alt="janela" class="janela">
+
+           <div class="mac-window">
+            <div class="mac-window-header">
+              <div class="mac-window-buttons">
+                <span class="close"></span>
+                <span class="minimize"></span>
+                <span class="maximize"></span>
+              </div>
+              <span class="mac-window-title">My server</span>
+            </div>
+            <div class="mac-window-content">
+                <a href="https://example.com" target="_blank">
+                    <img src="myserver.png" alt="Imagem Exemplo" class="mac-window-image">
+                  </a>
+            </div>
+          </div>
         </div>
     </section>
 
     <!-- Habilidades -->
-    <section id="skills" class="skills">
+    <!--<section id="skills" class="skills">
         <div class="skills-column">
             <h3>Habilidades de Brenno</h3>
             <div class="skill-bar"><div class="skill-level skill-html">HTML - 90%</div></div>
@@ -84,7 +99,7 @@ <h3>Habilidades de Matheus</h3>
             <div class="skill-bar"><div class="skill-level skill-css">CSS - 85%</div></div>
             <div class="skill-bar"><div class="skill-level skill-js">JavaScript - 80%</div></div>
         </div>
-    </section>
+    </section>-->
 
     <!-- Depoimentos -->
     <section id="testimonials" class="testimonials">

diff --git a/myserver.png b/myserver.png
diff --git a/style.css b/style.css
@@ -155,11 +155,11 @@ nav ul li a:hover {
 .foto {
   width: 300px;
   border-radius: 300px;
-  z-index: 2; /* z-index inicial da imagem */
-  transition: z-index 0.3s ease; /* Transição suave para z-index */
+  z-index: 2; 
+  transition: z-index 0.3s ease; 
 }
 .hero-item:hover .foto {
-  z-index: 11; /* Aumenta o z-index da imagem no hover */
+  z-index: 11; 
 }
 .icons{
   font-size: 50px
@@ -206,11 +206,89 @@ nav ul li a:hover {
   margin: 20px 0;
 }
 .janela{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 8%;
+
   border-radius: 20px;
   width: 1100px;
   height: 600px;;
 }
 
+
+.mac-window {
+  width: 900px;
+  height: 500px;
+  border-radius: 12px;
+  border: 1px solid #d0d0d0;
+  background-color: #fff;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+
+.mac-window-header {
+  background-color: #e0e0e0;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #d0d0d0;
+}
+
+
+.mac-window-buttons span {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.mac-window-buttons .close {
+  background-color: #ff5f57;
+}
+
+.mac-window-buttons .minimize {
+  background-color: #ffbd2e;
+}
+
+.mac-window-buttons .maximize {
+  background-color: #28c840;
+}
+
+
+.mac-window-title {
+  flex-grow: 1;
+  margin-right: 50px;
+  text-align: center;
+  font-size: 14px;
+  color: #555;
+}
+
+
+.mac-window-content {
+  padding: 16px;
+  background-color: #ffffff;
+  color: #333;
+}
+.mac-window-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 0px 0;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+
+.mac-window-image:hover {
+  transform: scale(1.05);
+}
+
 /* Habilidades */
 .skills {
   padding: 50px;