Skip to content
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.

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

Tarea resuelta #149

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
58 changes: 41 additions & 17 deletions dist/contact.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>
<body>
<!-- Navigation-->
Expand Down Expand Up @@ -62,27 +65,48 @@ <h1>Contact Me</h1>
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
<label for="name">Name</label>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="name">Nombre</label>
<div class="col-sm-10" >
<input class="form-control" id="name" type="text" data-sb-validations="required" />
</div>
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<div class="form-floating">
<input class="form-control" id="email" type="email" placeholder="Enter your email..." data-sb-validations="required,email" />
<label for="email">Email address</label>
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<div class="form-floating">
<input class="form-control" id="phone" type="tel" placeholder="Enter your phone number..." data-sb-validations="required" />
<label for="phone">Phone Number</label>
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="email">Email</label>
<div class="col-sm-10">
<input class="form-control" id="email" type="email" data-sb-validations="required,email" />
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
</div>
<div class="form-floating">
<textarea class="form-control" id="message" placeholder="Enter your message here..." style="height: 12rem" data-sb-validations="required"></textarea>
<label for="message">Message</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>


<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Sexo</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="man" value="man" checked>
<label class="form-check-label" for="man">Hombre</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="woman" value="woman">
<label class="form-check-label" for="woman">Mujer</label>
</div>

</div>
</div>
</fieldset>

<div class="form-group row">
<label class="col-sm-2 col-form-label" for="email">Texto</label>
<div class="col-sm-10">
<textarea class="form-control" id="text" type="textarea" style="height: 6rem" data-sb-validations="required"></textarea>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
</div>

<br />
<!-- Submit success message-->
<!---->
Expand Down
207 changes: 111 additions & 96 deletions dist/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
Expand Down Expand Up @@ -48,106 +49,120 @@ <h1>Clean Blog</h1>
</div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="container">

<div class="row gx-5 justify-content-center">
<a class="col-md-auto col-lg-4 mb-4 text-center" href="#">
<div class="card mx-auto mx-md-auto" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="34%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
</svg>
<div class="card-body">
<h5 class="card-title">Man must explore, and this is exploration at its greatest</h5>
<h6 class="card-subtitle mb-2 text-muted">Problems look mighty small from 150 miles up</h6>
</div>
</div>
</a>
<a class="col-md-auto col-lg-4 mb-4 text-center" href="#">
<div class="card mx-auto mx-md-auto" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="34%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
</svg>
<div class="card-body">
<h5 class="card-title">I believe every human has a finite number of heartbeats. I don't intend
to waste any of mine.</h5>
</div>
</div>
</a>
</div>

<div class="row gx-5 justify-content-center">
<a class="col-md-auto col-lg-4 mb-4 text-center" href="#">
<div class="card mx-auto mx-md-auto" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="34%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
</svg>
<div class="card-body">
<h5 class="card-title">Science has not yet mastered prophecy</h5>
<h6 class="card-subtitle mb-2 text-muted">We predict too much for the next year and yet far too little for the
next ten.</h6>
</div>
</div>
</a>
<a class="col-md-auto col-lg-4 mb-4 text-center" href="#">
<div class="card mx-auto mx-md-auto" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="34%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
</svg>
<div class="card-body">
<h5 class="card-title">Failure is not an option</h5>
<h6 class="card-subtitle mb-2 text-muted">Many say exploration is part of our destiny, but it’s actually our
duty to future generations.</h6>
</div>
</div>
</a>
</div>

<!-- Pager-->
<div class="d-flex justify-content-center my-5 mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older
Posts →</a></div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
<h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
</a>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on September 24, 2023
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html"><h2 class="post-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h2></a>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on September 18, 2023
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Science has not yet mastered prophecy</h2>
<h3 class="post-subtitle">We predict too much for the next year and yet far too little for the next ten.</h3>
</a>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on August 24, 2023
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Failure is not an option</h2>
<h3 class="post-subtitle">Many say exploration is part of our destiny, but it’s actually our duty to future generations.</h3>
</a>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on July 8, 2023
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>

</html>