Skip to content

3-Page Website Complete #12

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
livinginbeta wants to merge 10 commits into
base: master
Choose a base branch
from
Open

3-Page Website Complete #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
06433e6
Pretty much done. Need to wrap up deliverables and do final final checks
livinginbeta Jul 10, 2020
6fd5269
Update README.md
livinginbeta Jul 10, 2020
5ea9603
Update README.md
livinginbeta Jul 10, 2020
816ebb8
final push
livinginbeta Jul 10, 2020
c58c2a8
Merge branch 'master' of https://github.com/livinginbeta/sba.javascri…
livinginbeta Jul 10, 2020
a23dc5b
final push
livinginbeta Jul 10, 2020
bbb23f5
Update README.md
livinginbeta Jul 10, 2020
6e693bd
updates
livinginbeta Jul 15, 2020
1026fb7
Merge branch 'master' of https://github.com/livinginbeta/sba.javascri…
livinginbeta Jul 15, 2020
d89b8f5
tweaks
livinginbeta Jul 15, 2020
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
21 changes: 20 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,23 @@
# AD - SBA - HTML/CSS/JavaScript
# AD - SBA - HTML/CSS/JavaScript - UPDATE

Access my site by navigating to the following link: https://livinginbeta.github.io/sba.javascript_3-page-website/

LastFavors.com is the website for an application that helps people navigate the tumultous timeframe after a loved one dies, whether unexpectedly or not. it provides for the collection of wants and requests by a person for after they pass (who should be invited -- or not -- to their funeral, what kind of music and service it should be, information about life insurance, whether they want to be buried or cremated, etc.) it also serves as a guide for someone one who might not know whom to contact after experiencing the loss of a loved one, what steps need to happen, LastFavors.com will also suggest local officiants for any resulting religious services, grief counselors for peace of mind, estate lawyers, funeral homes, etc.

Bootrap was employed to take advantage of its grid system as a skeleton for the site's page structure. HTML, CSS, and Javascript were used to meet assignment requirements, such as multiple forms (done in HTML), media (video, an animated GIF, and images). Two of the images were created in Photoshop.

Regex validation was used on the first and last name fields of the Contact Us form. Additionally, when the submit button is sent a listener activates the pulling of both first and last name into a personalized message to the user.





===============================








Expand Down
162 changes: 162 additions & 0 deletions contactus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head> <!-- header begins here -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>LastFavors Contact Us</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>


<link href="./css/style.css" rel="stylesheet">
<script type="text/javascript" src="./js/header-functions.js"></script>
<link href='https://fonts.googleapis.com/css?family=Jura' rel='stylesheet'>
<style>
body {font-family: 'Jura';font-size: 22px;}
h2 {border-bottom: 1px solid darkgoldenrod;}
</style>
</head> <!-- header ends here -->
<body> <!-- body begins here -->
<div class="container-fluid" >
<div class="container row" >
<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto" id="column1">

<div>
<a href="index.html"><img style="display: block; margin-top: 5px; margin-left: auto; margin-right: auto;" src="img/lastFavorsBanner.png" width=728px height=90px alt="LastFavors Banner" Title="LastFavors Banner"/></a>
<table style="display: block; margin-top: 0px; margin-left: auto; margin-right: auto;text-align:center;" width=728px height=30px>
<tr>
<td class="navTable"><a href="index.html" alt="Homepage" Title="Homepage">Home</a></td>
<td class="navTable"><a href="survey.html" alt="App Info and Survey" Title="App Info and Survey">App Survey</a></td>
<td class="navTable"><a href="contactus.html" alt="Contact Us" title="Contact Us">Contact Us</a></td>
</tr>
</table>
</div>
<p>
<div>
<h2>Contact Us</h2>
<p>
Do you have a question or comment or testimonial? Please use the form below to send us your feedback. We read submissions frequently, but please allow us 48 hours to reply. This form is the best way to reach us.
</p>
</div>
</p>
<p>
<div>
<h2>Feedback Form</h2>
<p>
<div align="center">
<section>
<form id="contactForm" method="POST" action="http://www.TEST.php">
<fieldset>
<table><!-- 2 rows; 1 colums -->
<tr><!--1st row-->
<td colspan="2">
<p>
<label>Why are you contacting us?</label>
<select name="reason">
<option> Choose a Reason... </option>
<option>I Have a Question</option>
<option>I Just Wanted To Say You Are Awesome</option>
<option>There Is a Problem With Your Website</option>
</select>
</p>
<p>
<label>Tell Us More</label>
<br>
<textarea rows="4" cols="50" name="description" placeholder="Use this space to explain why you are contacting us"></textarea>
</p>
<p>
<label>Please provide your name and email address:</label>
<br>
<label for="fname">First name:</label>
<input
type="text"
id="fname"
name="fname"
pattern="[a-zA-Z]+"
title="First name should only contain letters">
<br>
<br>
<label for="lname">Last name:</label>
<input
type="text"
id="lname"
name="lname"
pattern="[a-zA-Z]+"
title="Last name should only include letters">
<br>
<br>
<label for="email">Email address:</label>
<input type="email" id="email" name="email">
</p>
<p>
<label>Would you like a response from us?</label>
<br>
<input type="radio" id="Yes" name="response" value="Yes">
<label for="Yes">Yes</label><br>
<input type="radio" id="No" name="response" value="No">
<label for="No">No</label><br>
</p>
<p>
<div id="buttons">
<input type="submit" class="rounded" value="Submit" />
<input type="reset" class="rounded" value="Clear Form" /><br>
<p>

</p>
</div>
</p>
</td>
</tr>
</table>
</fieldset>
</form>
</section>
</div>
<div id="magicText"></div> <!--Make text appear here on onsubmit....-->
<p>
<h2>Rage Against The Dying Of The Light</h2>
<p>
When a person's time is near its end it can be difficult to muster the strength and resolve to, as <a href="https://poets.org/poet/dylan-thomas" target="_blank" alt="More about poet Dylan Thomas" title="More about poet Dylan Thomas">Dylan Thomas</a> put it, "... <a href="https://poets.org/poem/do-not-go-gentle-good-night" target=_blank" alt="Do not go gentle into that good night" title="Do not go gentle into that good night">not go gentle into that good night</a>."
</p>
<p>
We at LastFavors believe in the beauty of life, which is why we urge all people not to wait for the end to seize the day, make the most of what you have, and passionately live life to its fullest. We developed LastFavors to help make sense of and organize often sudden and tragic loss. It is good to prepare. But, please do not forget to "Rage, rage against the dying of the light."<br>
</p>
<section class="media">
<div style="text-align: center;">
<figure>
<iframe width="750" height="422" src="https://www.youtube.com/embed/w1JJ5actiUM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption>Source:
<a href="https://www.youtube.com/watch?v=w1JJ5actiUM" target="_blank">https://www.youtube.com/watch?v=w1JJ5actiUM</a>
</figcaption>
</figure>
</div>
</section>
</p>
</div>
</p>
<p>
<div>
<aside class="testimonial">
"It was a snowy night in December and my daughter was driving home from college to spend Christmas break with us when her car slid off the road and she hit a tree. I didn't know what to do. I was blindsided and unprepared. A parent should never outlive a child. A friend recommended LastFavors. We didn't get a chance to ask Anne any of the questions about her funeral, but I was still able to access the checklist to figure out what I should do and when. I also found a really good grief counselor through the site who has been helping my husband and me through this very difficult time. Thank you, LastFavors!" <span class="source"> -- Rebecca C., Battle Creek, MI</span>
</aside>
<br>
</div>
</p>
</div>
</div>
</div>
</body>
<br>
<footer>
<!-- footer of page begins here -->
<div class="footer">
Copyright &copy 2020 David Yirchott | <a href="index.html" alt="Homepage" Title="Homepage">Home</a> | <a href="survey.html" alt="App Info and Survey" Title="App Info and Survey">App Survey</a> | <a href="contactus.html" alt="Contact Us" title="Contact Us">Contact Us</a></div>
<script type="text/javascript" src="./js/LastFavors.js"></script>
<script type="text/javascript" src="./js/footer-functions.js"></script>
</footer> <!-- footer of page ends here -->
</html>
82 changes: 80 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,86 @@
body {
background-color: navy;
html body {
background-color: whitesmoke;
}

#column1 {
float: left;
margin-left: 13.2px;
margin-top: 10px;
}

a:hover{
color: darkslateblue;
font-weight: bold;
text-decoration: none;

}

a {
color:darkgoldenrod;
font-weight: bold;
text-decoration: none;
}

.navTable {
padding: 0 50px 50px;
width: 33%;
text-align: center;
font-size: 16;
}

.footer {
color: darkgoldenrod;
font-size: 15px;
}

.testimonial {
border-top: 1px solid darkgoldenrod;
font-size: 20px;
font-style: italic;
border-bottom: 1px solid darkgoldenrod;
}

.source::before {
content: "\a";
white-space: pre;
}

.color {
color: black;
font-weight: bold;
text-align: center;
}

.rounded{
border: none;
border-radius: 7px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
padding: .5em 0 .5em 0;
margin: .2em;
width: 7em;
height: 3em;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.4);
}

.rounded:hover{
color: black;
background-color: white;
}

.robot{
color: red;
display: inline;
}

.media {
display: block;
margin-left: auto;
margin-right: auto;
}

object {
height: 100vh;
width: 100vh;
Expand Down
Binary file added img/lastFavorsBanner.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.
Binary file added img/newHands3.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