Skip to content

[MAD-WD-PT-092023] Sergio Esteban #2123

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

[MAD-WD-PT-092023] Sergio Esteban #2123

Show file tree
Hide file tree
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
311 changes: 311 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,311 @@
<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Revera Theme</title>
<link rel="icon" type="image/png" href="./starter-code/img/title.png">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>

<body>
<header class="logo">
<nav>
<ul>
<li>
<img src="https://doczilla.pro/wp-content/uploads/2023/02/logo-revera1.png" alt="">
</li>
<li class="texto-rojo">Home</li>
<li>About</li>
<li>Sample Page</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Parent Page</li>
<li>Contact</li>
</ul>
</nav>
</header>




<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">



<div class="carousel-inner">
<div class="carousel-item active">
<img src="./starter-code/img/slider-1-modified.jpg" class="d-block w-100" alt="Web Design">
<div
class="carousel-caption d-flex flex-column justify-content-center align-items-center text-center vh-100">
<h2>Web Design</h2>
<p>Web design is the process of creating and designing websites that encompass various elements such
as layout, content, graphics, and user experience. It involves both the aesthetic aspect and the
functionality of a website. Designers aim to create visually appealing sites that are
user-friendly and accessible across different devices and browsers. With the rapid evolution of
technology, web design has become a crucial aspect for businesses and individuals to establish
their online presence effectively.</p>
<div class="text-center">
<a href="#" class="btn btn-outline-light btn-sm mt-3">Read More</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="./starter-code/img/slider-2-modified.jpg" class="d-block w-100" alt="Web Development">
<div
class="carousel-caption d-flex flex-column justify-content-center align-items-center text-center vh-100">
<h2>Web Development</h2>
<p>Effective web design involves several key components that contribute to a successful website.
These elements include responsive design, ensuring that the site functions well and adapts to
different screen sizes and devices; intuitive navigation that guides users seamlessly throughout
the site; compelling visual elements such as high-quality images, videos, and graphics that
enhance user engagement; and well-structured content that is informative, relevant, and easy to
digest.</p>
<div class="text-center">
<a href="#" class="btn btn-outline-light btn-sm mt-3">Read More</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="./starter-code/img/slider-3-modified.jpg" class="d-block w-100" alt="User Interface">
<div
class="carousel-caption d-flex flex-column justify-content-center align-items-center text-center vh-100">
<h2>User Interface</h2>
<p> User Experience (UX) and User Interface (UI) are integral parts of web design. UX focuses on the
overall experience a user has while interacting with a website, ensuring it's intuitive,
enjoyable, and meets their needs. UI, on the other hand, deals with the visual elements and
interactive aspects of the site, encompassing design elements like buttons, menus, and forms.
Both UX and UI work together to create a positive and meaningful</p>
<div class="text-center">
<a href="#" class="btn btn-outline-light btn-sm mt-3">Read More</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="./starter-code/img/slider-4-modified.jpg" class="d-block w-100" alt="User Interface">
<div
class="carousel-caption d-flex flex-column justify-content-center align-items-center text-center vh-100">
<h2>User Interface</h2>
<p>Web design is the process of creating and designing websites that encompass various elements such
as layout, content, graphics, and user experience. It involves both the aesthetic aspect and the
functionality of a website. Designers aim to create visually appealing sites that are
user-friendly and accessible across different devices and browsers. With the rapid evolution of
technology, web design has become a crucial aspect for businesses and individuals to establish
their online presence effectively.</p>
<div class="text-center">
<a href="#" class="btn btn-outline-light btn-sm mt-3">Read More</a>
</div>
</div>
</div>
</div>


<a class="carousel-control-prev btn-rojo" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next btn-rojo" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>

</div>


<div class="container-fluid btn-rojoguay">
<div class="custom-container-lg">
<div class="row">
<div class="col-md-4 d-flex flex-column align-items-center">
<div class="my-4">
<i class="bi bi-heart-fill" style="font-size: 3rem; position: relative; left: 300px; "></i>
<p class="text-center">En la consulta del médico
- Usted tiene una perfecta salud. Vivirá hasta los 80.
- Pero doctor, yo tengo 80 ahora.
- ¿Lo ve? ¿tenía o no tenía yo razón?</p>
</div>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<div class="my-4">
<i class="bi bi-star-fill" style="font-size: 3rem; position: relative; left: 200px;"></i>
<p class="text-center">¿Qué le dijo el 1 al 10?
- Para ser como yo, tienes que ser sincero.</p>
</div>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<div class="my-4">
<i class="bi bi-eye-fill mr-4" style="font-size: 3rem; position: relative; left: 200px;"></i>
<p class="text-center">Un pescadito le pregunta a otro:
- Oye, ¿qué hace tu papá?
- Nada.</p>
</div>
</div>
</div>
</div>
</div>


<hr>


<section class="btn-blanco">
<div class="container-md">
<h2>LATEST PROYECTS</h2>
<p>FEW OF THE LATEST PORTFOLIO ITEMS</p>
<div class="row">
<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>
<img src="./starter-code/img/project-1.jpg" class="img-fluid grayscale-overlay" alt="Project 1">
<h6>Hago flexiones antes de ir a ironhack</h6>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>
<img src="./starter-code/img/project-2.jpg" class="img-fluid grayscale-overlay" alt="Project 2">
<h6>Mi gato toca el piano mejro que yo 😿</h6>
</div>
</div>

<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>

<img src="./starter-code/img/project-3.jpg" class="img-fluid grayscale-overlay" alt="Project 3">
<h6> Cuál es el colmo de una florista?
Llamarse Margarita y que el capullo de su novio la deje plantada.
</h6>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>
<img src="./starter-code/img/project-4.jpg" class="img-fluid grayscale-overlay" alt="Project 4">
<h6>¿Qúe diferencia hay entre una suegra y un terrorista?
Que con el terrorista se puede negociar.</h6>
</div>
</div>
</div>
</div>
</section>

<hr>

<section class="btn-blanco2">
<div class="container-md">
<h2>LATEST ARTICLES</h2>
<p>LATEST POSTS FROM THE BLOG</p>
<div class="row">
<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>
<img src="./starter-code/img/slider-1.jpg" class="img-fluid grayscale-overlay" alt="Project 1">
<h6>Me sacaron del grupo de WhatsApp de paracaidismo. Se ve que no caía bien.</h6>
<h5 class="posted-info2">POSTED ON DECEMBER 12, 2023 BY Sergio</h5>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>
<img src="./starter-code/img/slider-2.jpg" class="img-fluid grayscale-overlay" alt="Project 2">
<h6>¿Cuál es el colmo de un peluquero? Descubrir que en la vida nada es permanente.</h6>
<h5 class="posted-info2">POSTED ON DECEMBER 12, 2023 BY Sergio</h5>
</div>
</div>

<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>

<img src="./starter-code/img/slider-3.jpg" class="img-fluid grayscale-overlay" alt="Project 3">
<h6> Eliminar correos no deseados es muy fácil: spam comido.</h6>
<h5 class="posted-info2">POSTED ON DECEMBER 12, 2023 BY Sergio</h5>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="project-item text-center">
<br>
<img src="./starter-code/img/slider-4.jpg" class="img-fluid grayscale-overlay" alt="Project 4">
<h6>¿Cómo se llama el hermano vegano de Bruce Lee? Broco Lee.</h6>
<h5 class="posted-info2">POSTED ON DECEMBER 12, 2023 BY Sergio</h5>
</div>
</div>
</div>
</div>
</section>
<hr class="border-red ;">
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h6>REVERA</h6>
<p>¿Sabes por qué el mar es azul? Porque los peces dicen "Blue, blue, blue blue".
¿Por qué un mago no sería bueno en el boxeo? Porque sería el magolpeado.</p>
<h5 class="posted-info">POSTED ON DECEMBER 12, 2023 BY Sergio</h5>
</div>
<div class="col-md-3">
<h6>Meta</h6>
<ul>
<li>Login</li>
<li>Entries RSS</li>
<li>Comments RSS</li>
<li>Wordpress.org</li>
</ul>
</div>
<div class="col-md-3">
<h6>Archieves</h6>
<ul>
<li>[MAD-PT-WD-092023] Sergio Esteban</li>
</ul>
</div>
<div class="col-md-3">
<h6>Recent Post</h6>
<ul>
<li>¿Quién es el papá del príncipe azul? El Blu-ray.</li>
<li>¿Qué hace un mudo bailando? Una mudanza.</li>
<li>¿Cómo va Batman a su funeral? Batieso.</li>
<li>¿De dónde sale la porcelana? De las porceovejas.</li>
</ul>
</div>
</div>
</div>
</footer>



<section class="dark-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
Copyright © 2018 revera - Just another demo Sites site.
</div>
<div class="col-md-12">
|| Revera Theme by Sergio 🥂
</div>
</div>

</div>

</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function () {

$('#myCarousel').carousel();


$('#myCarousel').carousel({
interval: 1000
});
});
</script>
</body>

</html>
Binary file removed starter-code/img/overlay.png
View file
Open in desktop
Binary file not shown.
Binary file added starter-code/img/slider-1-modified.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added starter-code/img/slider-2-modified.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added starter-code/img/slider-3-modified.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added starter-code/img/slider-4-modified.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added starter-code/img/title.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading