adição de CSS responsivo

Phoenix7290 · Aug 26, 2024 · eb5998d · eb5998d
1 parent bdd51e7
commit eb5998d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,13 +1,20 @@
+body {
+  display: flex ;
+  justify-content: center;
+  align-items: center;
+  min-height: 100svh;
+}
+
 main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
   background-color: #f0f0f0;
   gap: 100px;
   margin: 0;
   padding: 20px;
+  border-radius: 20px;
 }
 
 section {
@@ -22,6 +29,8 @@ section div {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
   width: 100%;
   max-width: 1200px;
   padding: 20px;
@@ -31,10 +40,15 @@ section div {
   box-sizing: border-box;
 }
 
+.container {
+  display: flex;
+  flex-flow: row wrap;
+}
+
 a {
-  margin: 0 10px; 
-  text-decoration: none; 
-  color: #007BFF; 
+  margin: 10px;
+  text-decoration: none;
+  color: #007BFF;
   font-weight: bold;
   padding: 8px 12px;
   border: 2px solid black;

diff --git a/src/App.jsx b/src/App.jsx
@@ -5,7 +5,7 @@ export default function App() {
         <main>
             <section>
                 <h1>TP 1</h1>
-                <div>
+                <div className='container'>
                 <a href="src/TP1/01/index.html">TP 1.1</a>
                     <a href="src/TP1/02/index.html">TP 1.2</a>
                     <a href="src/TP1/03/index.html">TP 1.3</a>
@@ -26,7 +26,7 @@ export default function App() {
             </section>
             <section>
                 <h1>TP 2</h1>
-                <div>
+                <div className='container'>
                     <a href="src/TP2/01/index.html">TP 2.1</a>
                     <a href="src/TP2/02/index.html">TP 2.2</a>
                     <a href="src/TP2/03/index.html">TP 2.3</a>