From 03276639188d0a37468b072bc6def40173b76ad6 Mon Sep 17 00:00:00 2001
From: Mirabela Tiugan <mirabelatiugan@gmail.com>
Date: Sat, 12 Aug 2023 19:51:16 +0200
Subject: [PATCH 1/2] updated

---
 index.html | 28 ++++++++++--------
 styles.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 12 deletions(-)
 create mode 100644 styles.css
diff --git a/index.html b/index.html
index 72b560d..df6129b 100644
--- a/index.html
+++ b/index.html
@@ -2,20 +2,24 @@
 <html>
   <head>
     <title>My Personal Web Page</title>
+    <link rel="stylesheet" href="styles.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <header>
-      <h1>Welcome to My Personal Web Page</h1>
-      <nav>
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
-      </nav>
+      <div class="header-container"> 
+        <h1>Welcome to My Personal Web Page</h1>
+        <nav class="nav">
+          <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
     </header>
-    <main>
-      <section>
+    <main class="container">
+      <section class="container-element">
         <h2>About Me</h2>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
@@ -23,13 +27,13 @@ <h2>About Me</h2>
           magna leo.
         </p>
       </section>
-      <section>
+      <section class="container-element contact">
         <h2>Contact Information</h2>
         <p>Email: info@example.com</p>
         <p>Phone: 123-456-7890</p>
       </section>
     </main>
-    <footer>
+    <footer class="footer">
       <p>&copy; 2023 My Personal Web Page. All rights reserved.</p>
     </footer>
   </body>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..68d13ee
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,84 @@
+html {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto';
+    font-size: 14px;
+    line-height: 2em;
+    font-weight: 300;
+    margin: 0;
+    background-color: lightgray;
+    
+  }
+
+.header-container{
+    width: 95%;
+    margin: 0 auto;
+    border: 3px solid red;
+}
+
+ul{
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+main {
+    margin: 0 10px;
+    background-color: white;
+}
+
+.container h2{
+    padding-top: 20px;
+}
+.container-element {
+    padding: 0 10px;
+}
+
+.contact {
+    padding-bottom: 10px;
+    padding: ;
+}
+
+footer  {
+    background-color: lightgray;
+    text-decoration: none;
+    margin: 0 10px;
+  }  
+
+@media screen and (max-width: 600px) {
+    .header-container {
+        text-align: center};
+
+    .nav {
+        display: block;
+        text-align: center;
+    }
+}
+
+@media screen and (min-width: 601px) {
+    .nav li {
+        display: inline;
+        padding: 0 10px;
+    }
+    .container {
+        display: flex;
+        flex-direction: col;
+        align-items: center;
+        justify-content: space-between;
+      }
+    .container-element {
+        padding: 10px;
+        flex-basis: 50%;
+        text-align: left;
+    }
+    footer {
+        text-align: center;
+    }
+
+}
\ No newline at end of file

From 67bb55d2eb06078ea31bf4d5b260e2169a6525da Mon Sep 17 00:00:00 2001
From: Mirabela Tiugan <mirabelatiugan@gmail.com>
Date: Sat, 12 Aug 2023 22:34:22 +0200
Subject: [PATCH 2/2] updates on lab css

---
 styles.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/styles.css b/styles.css
index 68d13ee..7cea4a3 100644
--- a/styles.css
+++ b/styles.css
@@ -9,13 +9,11 @@ body {
     font-weight: 300;
     margin: 0;
     background-color: lightgray;
-    
   }
 
 .header-container{
     width: 95%;
     margin: 0 auto;
-    border: 3px solid red;
 }
 
 ul{
@@ -23,6 +21,7 @@ ul{
     padding: 0;
     list-style-type: none;
 }
+
 a {
     color: inherit;
     text-decoration: none;
@@ -42,7 +41,6 @@ main {
 
 .contact {
     padding-bottom: 10px;
-    padding: ;
 }
 
 footer  {
@@ -68,7 +66,6 @@ footer  {
     }
     .container {
         display: flex;
-        flex-direction: col;
         align-items: center;
         justify-content: space-between;
       }
@@ -80,5 +77,4 @@ footer  {
     footer {
         text-align: center;
     }
-
 }
\ No newline at end of file
