changes in order to responsive experience

ValenMorales · Feb 29, 2024 · 9271dd8 · 9271dd8
1 parent a07f878
commit 9271dd8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/css/slider.css b/css/slider.css
@@ -2,8 +2,8 @@
 
 .slider {
   height: 80vh;
-  width: 90%;
-  margin-left: 4rem;
+  width: 100%;
+
   position: relative;
   justify-content: center;
 }

diff --git a/index.css b/index.css
@@ -120,6 +120,16 @@ main::before {
   animation: color 4s ease-in-out infinite;
 }
 
+main{
+  overflow-x: hidden;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 @keyframes color {
   0% {
     background-position: 0% 50%;
@@ -166,7 +176,6 @@ main::before {
 .section {
   width: 100%;
   min-height: 80vh;
-  padding: 2em;
   text-align: center;
   display: flex;
   flex-flow: column wrap;
@@ -186,7 +195,7 @@ main::before {
 }
 
 .info {
-  font-size: 1.6em;
+  font-size: 1.3em;
   animation: aparecer1 2s ease 1 both;
 }
 
@@ -249,19 +258,29 @@ main::before {
   font-weight: 800;
 }
 
+
+
 article ul {
   display: flex;
   flex-direction: column;
 
   margin: 1em 0;
 }
 
+.projects{
+  margin-left: 5rem;
+}
+
 .projects .p {
   font-size: 1.3em;
   text-align: center;
   margin: 1em 0;
 }
 
+.about {
+  margin-left: 5rem;
+}
+
 .about .p {
   max-width: 40em;
   text-align: center;
@@ -339,6 +358,7 @@ svg:hover {
   color: white;
   margin-top :30rem;
   margin-bottom: 5rem;
+
 }
 
 .my-projects h2{
@@ -349,7 +369,7 @@ svg:hover {
   text-align: center;
   color: white;
   padding: 0 1rem;
-
+margin-bottom: 2rem;
 }
 
 .slider-track {
@@ -423,6 +443,7 @@ svg:hover {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-left: 5rem;
 }
 
 .carrousel {
@@ -589,6 +610,7 @@ color:inherit;
 .section-wrapper {
   width: 100%;
   padding: 10px;
+  margin-left: 5rem;
 }
 .box-wrapper {
   position: relative;

diff --git a/index.html b/index.html
@@ -437,9 +437,7 @@ <h2>Chat App</h2>
               <h2>Code-beaters</h2>
               <p>
                 Web application that allows the creation and solution of
-                programming problems that cover both the topic of algorithmics and
-                sql queries, allowing the execution of code and the history of
-                attempts.
+                programming problems of algorithmics and sql queries
               </p>
               <div class="item-buttons">