realizo personalizacion 🚀🚀

waldohidalgo · Jan 24, 2024 · 4f6e77d · 4f6e77d
1 parent 72e8a44
commit 4f6e77d
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 37 deletions.
diff --git a/NUX_Octodex.ico b/NUX_Octodex.ico
diff --git a/index.html b/index.html
@@ -1,22 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Desafío Branching</title>
-  <link rel="stylesheet" href="style.css">
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Space+Mono" rel="stylesheet">
-</head>
-<body>
-  <div class="container">
-    <h1>Ir a Github</h1>
-    <a href="https://github.com/">
-      <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
-    </a>
-    <button type="button" class="btn">
-      <a href="https://github.com/" target="_blank">Click aquí para ir a GitHub!</a>
-    </button>
-  </div>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Desafío Branching</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans|Space+Mono"
+      rel="stylesheet"
+    />
+    <link rel="shortcut icon" href="./NUX_Octodex.ico" type="image/x-icon" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Ir a Mi perfil de Github</h1>
+      <a
+        href="https://github.com/waldohidalgo"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          src="https://octodex.github.com/images/NUX_Octodex.gif"
+          alt="octocat con estilo"
+        />
+      </a>
+      <button type="button" class="btn">
+        <a href="https://github.com/waldohidalgo" target="_blank"
+          >Click aquí para ir a mi Perfil de GitHub!</a
+        >
+      </button>
+    </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -1,30 +1,34 @@
 body {
-  background: #342E37;
-  }
+  background: #342e37;
+}
 
 .container {
   padding-top: 30px;
-} 
-  
+}
+
 h1 {
   color: #fff;
-  font-family: 'Space Mono', monospace;
+  font-family: "Space Mono", monospace;
   font-size: 3rem;
   text-align: center;
   font-weight: 300;
 }
-  
+
 img {
   max-width: 40%;
-  padding: 20px;
+  margin-bottom: 2rem;
   display: block;
-  margin: 0 auto;
+  margin-inline: auto;
+  border-radius: 50%;
+  -webkit-box-shadow: 2px 0px 14px 7px rgba(255, 255, 255, 0.75);
+  -moz-box-shadow: 2px 0px 14px 7px rgba(255, 255, 255, 0.75);
+  box-shadow: 2px 0px 14px 7px rgba(255, 255, 255, 0.75);
 }
 
 form {
   padding: 30px;
 }
-  
+
 .btn {
   outline: none;
   border: none;
@@ -35,12 +39,12 @@ form {
   padding: 20px 80px;
   margin: 0 auto;
   border-radius: 20px;
-  box-shadow: 0 6px #2E282A;
+  box-shadow: 0 6px #2e282a;
 }
-  
+
 .btn a {
-    color: white;
-  font-family: 'Open Sans', sans-serif;
+  color: white;
+  font-family: "Open Sans", sans-serif;
   font-size: 1rem;
   font-weight: 300;
   text-transform: uppercase;
@@ -49,11 +53,11 @@ form {
 }
 
 .btn:hover {
-  box-shadow: 0 4px #2E282A;
-  top: 2px; 
+  box-shadow: 0 4px #2e282a;
+  top: 2px;
 }
 
 .btn:active {
   box-shadow: none;
-  top: 6px; 
-} 
+  top: 6px;
+}