From 7eb046ad083fbc0ec55168a68c2ed9c27d03cf81 Mon Sep 17 00:00:00 2001
From: Javier Godoy <javiergodoymiguez@gmail.com>
Date: Fri, 7 Jun 2024 22:28:32 +0200
Subject: [PATCH 1/2] done

---
 index.html | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..a5a01895f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="font-sans bg-gray-100">
+    <div class="container mx-auto px-4">
+        <nav class="bg-white p-4 shadow-md">
+            <h1 class="text-3xl font-bold text-gray-800">REVERA</h1>
+            <ul class="flex space-x-4 mt-4">
+                <li><a href="#Home" class="text-gray-600 hover:text-gray-900">Home</a></li>
+                <li><a href="#About" class="text-gray-600 hover:text-gray-900">About</a></li>
+                <li><a href="#Sample-page" class="text-gray-600 hover:text-gray-900">Sample page</a></li>
+                <li><a href="#Portfolio" class="text-gray-600 hover:text-gray-900">Portfolio</a></li>
+                <li><a href="#Blog" class="text-gray-600 hover:text-gray-900">Blog</a></li>
+                <li><a href="#Parent-page" class="text-gray-600 hover:text-gray-900">Parent page</a></li>
+                <li><a href="#Contact" class="text-gray-600 hover:text-gray-900">Contact</a></li>
+            </ul>
+        </nav>
+
+        <header class="mt-8">
+            <img src="starter-code/img/slider-1.jpg" alt="slider-1" class="w-full h-64 object-cover rounded-lg shadow-md">
+        </header>
+
+        <section class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h3 class="text-2xl font-semibold text-gray-800">Web design</h3>
+                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea ipsa, laborum a tempore ullam esse saepe incidunt perferendis.</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h3 class="text-2xl font-semibold text-gray-800">Web development</h3>
+                <p class="mt-2 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque, impedit. Alias cupiditate eos libero necessitatibus suscipit, dolore temporibus iusto non!</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h3 class="text-2xl font-semibold text-gray-800">User interface</h3>
+                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut dolores, accusantium asperiores aliquam odio, quidem impedit enim labore suscipit nemo.</p>
+            </div>
+        </section>
+
+        <section class="mt-8">
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h2 class="text-3xl font-bold text-gray-800">LATEST PROJECTS</h2>
+                <h3 class="text-xl text-gray-600 mt-2">FEW OF THE LATEST PORTFOLIO ITEMS</h3>
+                <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-1.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-2.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-3.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-4.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-md mt-8">
+                <h2 class="text-3xl font-bold text-gray-800">LATEST ARTICLES</h2>
+                <h3 class="text-xl text-gray-600 mt-2">LATEST POST FROM THE BLOG</h3>
+                <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-1.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-2.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-3.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-4.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                </ul>
+            </div>
+        </section>
+
+        <footer class="bg-gray-800 text-white mt-8 p-6">
+            <section class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div>
+                    <h4 class="text-xl font-semibold">REVERA</h4>
+                    <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rem facilis inventore reiciendis earum. Asperiores deserunt reprehenderit consectetur labore quos.</p>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold">META</h4>
+                    <ul class="mt-2 space-y-1">
+                        <li><a href="#log-in" class="text-gray-400 hover:text-white">Log in</a></li>
+                        <li><a href="#entries-rss" class="text-gray-400 hover:text-white">Entries RSS</a></li>
+                        <li><a href="#components" class="text-gray-400 hover:text-white">Components RSS</a></li>
+                        <li><a href="#wordpess" class="text-gray-400 hover:text-white">WordPress.org</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold">ARCHIVES</h4>
+                    <a href="#archive1" class="text-gray-400 hover:text-white mt-2 block">August 2013</a>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold">RECENT POSTS</h4>
+                    <p class="mt-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio et ducimus tempore quidem reprehenderit?</p>
+                </div>
+            </section>
+            <div class="bg-black text-white py-4">
+                <div class="container mx-auto text-center">
+                    <p>&copy; 2024 Javier Godoy</p>
+                </div>
+            </div>
+        </footer>
+    </div>
+</body>
+
+</html>
+

From 709f88297d7370dacc0a503321cc85f95a44548a Mon Sep 17 00:00:00 2001
From: Javier Godoy <javiergodoymiguez@gmail.com>
Date: Sun, 9 Jun 2024 20:50:03 +0200
Subject: [PATCH 2/2] solved lab

---
 index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index a5a01895f..082883e1e 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,9 @@
 
 <body class="font-sans bg-gray-100">
     <div class="container mx-auto px-4">
-        <nav class="bg-white p-4 shadow-md">
-            <h1 class="text-3xl font-bold text-gray-800">REVERA</h1>
-            <ul class="flex space-x-4 mt-4">
+        <nav class="bg-white p-4 shadow-md flex">
+            <h1 class="text-3xl font-bold text-gray-800 mr-40">REVERA</h1>
+            <ul class="flex space-x-10 items-center">
                 <li><a href="#Home" class="text-gray-600 hover:text-gray-900">Home</a></li>
                 <li><a href="#About" class="text-gray-600 hover:text-gray-900">About</a></li>
                 <li><a href="#Sample-page" class="text-gray-600 hover:text-gray-900">Sample page</a></li>
@@ -27,18 +27,18 @@ <h1 class="text-3xl font-bold text-gray-800">REVERA</h1>
             <img src="starter-code/img/slider-1.jpg" alt="slider-1" class="w-full h-64 object-cover rounded-lg shadow-md">
         </header>
 
-        <section class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="bg-white p-6 rounded-lg shadow-md">
-                <h3 class="text-2xl font-semibold text-gray-800">Web design</h3>
-                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea ipsa, laborum a tempore ullam esse saepe incidunt perferendis.</p>
+        <section class="flex flex-col md:flex-row bg-red-500 text-white p-4 space-y-4 md:space-y-0 md:space-x-4">
+            <div class="p-6 flex-1">
+                <h3 class="text-2xl font-semibold">Web design</h3>
+                <p class="mt-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea ipsa, laborum a tempore ullam esse saepe incidunt perferendis.</p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-md">
-                <h3 class="text-2xl font-semibold text-gray-800">Web development</h3>
-                <p class="mt-2 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque, impedit. Alias cupiditate eos libero necessitatibus suscipit, dolore temporibus iusto non!</p>
+            <div class="p-6 flex-1">
+                <h3 class="text-2xl font-semibold">Web development</h3>
+                <p class="mt-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque, impedit. Alias cupiditate eos libero necessitatibus suscipit, dolore temporibus iusto non!</p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-md">
-                <h3 class="text-2xl font-semibold text-gray-800">User interface</h3>
-                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut dolores, accusantium asperiores aliquam odio, quidem impedit enim labore suscipit nemo.</p>
+            <div class="p-6 flex-1">
+                <h3 class="text-2xl font-semibold">User interface</h3>
+                <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut dolores, accusantium asperiores aliquam odio, quidem impedit enim labore suscipit nemo.</p>
             </div>
         </section>
 
