update bootstrap

ArianaMagaliAriza · Jul 21, 2024 · 0ffe3c4 · 0ffe3c4
1 parent 6b27f99
commit 0ffe3c4
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 46 deletions.
diff --git a/english.css b/english.css
@@ -122,11 +122,36 @@ img:hover {
 
 h1 {font-size: 3em}
 
+section {
+    flex-direction: column;
+    display: flex;
+    margin: 30px auto;
+    max-height: 10%;
+    max-width: 80%;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.1rem;
+}
+
+#photo {
+    margin-top: 50px;
+}
+
+#text {
+    background-color: rgb(2, 2, 2);
+    color: whitesmoke;
+    padding: 50px 50px;
+    border: 5px solid blueviolet;
+    border-radius: 11px;
+    font-size: 1rem;
+}
+
 button {
-    font-size: 1.25;
+    font-size: 0.8rem;
     font-weight: bold;
     padding: 10px 30px;
-    border-radius: 5px;
+    max-width: 170px;
+    border-radius: 14px;
     border: 2px solid black;
     box-shadow: 2px 2px 10px rgb(97, 19, 171);
     color: rgb(255, 255, 255);
@@ -139,19 +164,6 @@ button:hover {
     animation-duration: 1.2s;
 }
 
-#photo {
-    margin-top: 50px;
-}
-
-#text {
-    background-color: rgb(14, 14, 14);
-    color: whitesmoke;
-    margin: 50px;
-    padding: 50px 50px;
-    border: 5px solid blueviolet;
-    border-radius: 8px;
-}
-
 footer {
     background-color: black;
     color: white;

diff --git a/english.html b/english.html
@@ -9,13 +9,18 @@
     <title>Ariana Magali Ariza</title>
     <link rel="icon" href="briefcase-fill.svg">
     <!--BOOTSTRAP-->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
     <!--CSS-->
     <link rel="stylesheet" href="english.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
 </head>
 
 <body>
-    <header>
+    <header class="container-fluid">
         <nav>
             <div class="titulo">
                 <h1>Ariana Magali Ariza</h1>
@@ -43,23 +48,23 @@ <h1>Ariana Magali Ariza</h1>
     <section align="center">
         <div id="text" align="center">
             <h2 align="center"><br>Hi!<br><br></h2>
-            <h3 align="center">
+            <p align="center">
                 I'm currently studying Computer Enginnering<br>
                 at the Universidad Nacional de La Plata (UNLP) and I expect to work <br>
                 with Artificial Intelligence in the future.
-                <br><br><br>
+                <br><br>
                 In this blog you will find some info about me and you will get to access to my repositories<br>
                 in GitHub.<br>
                 <br><br>
                 <button align="center" id="gmailButton">GMAIL</button>&nbsp&nbsp&nbsp
                 <button align="center" id="githubButton">GITHUB</button>&nbsp&nbsp&nbsp
                 <button align="center" id="linkedinButton">LINKEDIN</button>&nbsp&nbsp&nbsp
                 <button align="center" id="goodreadsButton">GOODREADS</button>
-            </h3>
+            </p>
         </div>
     </section>
 </body>
-<footer>
+<footer class="container-fluid">
     <br>
     <p align="center"> © Copyright 2024 </p>
     <br>

diff --git a/index.css b/index.css
@@ -122,34 +122,46 @@ img:hover{
 
 h1{font-size: 3em}
 
-button{
-    font-size:1.25;
-    font-weight:bold;
-    padding:10px 30px;
-    border-radius:5px;
-    border: 2px solid black;
-    box-shadow:2px 2px 10px rgb(97, 19, 171);
-    color:rgb(255, 255, 255);
-    background-color:blueviolet;
-}
-
-button:hover{
-    background-color: rgb(110, 19, 195);
-    animation: headShake;
-    animation-duration: 1.2s;
+section {
+    flex-direction: column;
+    display: flex;
+    margin: 30px auto;
+    max-height: 10%;
+    max-width: 80%;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.1rem;
 }
 
 #photo {
     margin-top: 50px;
 }
 
-#text{
-    background-color:rgb(2, 2, 2);
-    color:whitesmoke;
-    margin:50px;
-    padding:50px 50px;
+#text {
+    background-color: rgb(2, 2, 2);
+    color: whitesmoke;
+    padding: 50px 50px;
     border: 5px solid blueviolet;
-    border-radius: 8px;
+    border-radius: 11px;
+    font-size: 1rem;
+}
+
+button {
+    font-size: 0.8rem;
+    font-weight: bold;
+    padding: 10px 30px;
+    max-width: 170px;
+    border-radius: 14px;
+    border: 2px solid black;
+    box-shadow: 2px 2px 10px rgb(97, 19, 171);
+    color: rgb(255, 255, 255);
+    background-color: blueviolet;
+}
+
+button:hover {
+    background-color: rgb(110, 19, 195);
+    animation: headShake;
+    animation-duration: 1.2s;
 }
 
 footer{

diff --git a/index.html b/index.html
@@ -9,13 +9,18 @@
     <title>Ariana Magali Ariza</title>
     <link rel="icon" href="briefcase-fill.svg">
     <!--BOOTSTRAP-->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
     <!--CSS-->
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
 </head>
 
 <body>
-    <header>
+    <header class="container-fluid">
         <nav>
         <div class="titulo">
             <h1>Ariana Magali Ariza</h1>
@@ -43,23 +48,23 @@ <h1>Ariana Magali Ariza</h1>
     <section align="center">
         <div id="text" align="center">
             <h2 align="center"><br>¡Hola!<br><br></h2>
-            <h3 align="center">
+            <p align="center">
                 Actualmente estoy estudiando Ingeniería en Computación<br>
                 en la Universidad Nacional de La Plata (UNLP) y planeo dedicarme a trabajar en <br>
                 inteligencia artificial en el futuro.
-                <br><br><br>
+                <br><br>
                 En este blog podrás encontrar información sobre mí y podrás acceder a mis repositorios<br>
                 en GitHub.<br>
                 <br><br>
                 <button align="center" id="gmailButton">GMAIL</button>&nbsp&nbsp&nbsp
                 <button align="center" id="githubButton">GITHUB</button>&nbsp&nbsp&nbsp
                 <button align="center" id="linkedinButton">LINKEDIN</button>&nbsp&nbsp&nbsp
                 <button align="center" id="goodreadsButton">GOODREADS</button>
-            </h3>
+            </p>
         </div>
     </section>
 </body>
-<footer>
+<footer class="container-fluid">
     <br>
     <p align="center"> © Copyright 2024 </p>
     <br>