Skip to content

solved pedro #2138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

solved pedro #2138

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 126 additions & 0 deletions starter-code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!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 All rights reserved.</p>
</div>
</div>
</footer>
</div>
</body>

</html>