Skip to content

Submitting Project for Grade #19

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

Submitting Project for Grade #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0eaf5b1
basic skeleton created
StevenS125 Jul 9, 2020
c8af708
added structure to cards
StevenS125 Jul 9, 2020
8d2fd1e
added button feature for cat and dog facts to be randomly generated a…
StevenS125 Jul 9, 2020
002a91a
Merge pull request #1 from StevenS125/dev
StevenS125 Jul 9, 2020
ef7768c
added dog and cat seperate functions
StevenS125 Jul 9, 2020
46f91cd
fixed footer and navbar
StevenS125 Jul 9, 2020
19490b3
Merge pull request #2 from StevenS125/dev
StevenS125 Jul 9, 2020
0c74435
added animations on home
StevenS125 Jul 9, 2020
f35d152
added three forms for requirements
StevenS125 Jul 10, 2020
7425371
added video for requirements
StevenS125 Jul 10, 2020
32cbe73
added readme
StevenS125 Jul 10, 2020
b168fad
Merge pull request #3 from StevenS125/dev
StevenS125 Jul 10, 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
18 changes: 6 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
# AD - SBA - HTML/CSS/JavaScript

* Access my site by navigating to the following link: https://stevens125.github.io/index.html

### Objective
* This site showcases my use of html,css and javascript elements.
* The technologies used in this assignment include html, css, bootstrap, Javascript and JQuery
* I had the Dog and Cat Lover in Mind where the User can interact and find interesting dog and cat facts with the click of a button which were provided by calling the excellent cat facts api that can be found @ https://alexwohlbruck.github.io/


### Description
* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.

* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor.
Expand All @@ -12,17 +17,6 @@
* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system.


* Some resources for free content:
* Photos: `https://www.pexels.com/search/template/`
* Text: `https://www.lipsum.com/`
* GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k`

* Useful API sites:
* https://rapidapi.com/ (Links to an external site.)
* https://any-api.com/ (Links to an external site.)
* https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.)
* https://apilist.fun/

### Deliverable:
* A theme for your site that you feel comfortable with
* Complete all technical requirements for HTML, CSS, and Javascript
Expand Down
100 changes: 100 additions & 0 deletions cat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!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="Pricing for the Tuna AKA Chicken of the Sea">
<meta name="author" content="">
<title>Cat Facts!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="./css/style.css" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>

<!-- Import Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">

</head> <!-- header ends here -->

<body onload=addMoreCatFacts()> <!-- body begins here -->
<!-- Nav Starts Here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Animal Facts</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/cat.html">Cat Facts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/dog.html">Dog Facts</a>
</li>
</ul>
</div>
</nav>
<!-- Nav Ends Here -->

<div class="container-fluid">
<div class="heading">
<h1 style="color:#037bfe; font-family: 'Work Sans', sans-serif;">RANDOM CAT FACTS </h1>
<div><button class="btn btn-primary" onclick=addMoreCatFacts()>New Random Cat Facts</button></div>
<img class="heroImg" src="https://images.pexels.com/photos/774731/pexels-photo-774731.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="cat and dog background" />
</div>
<!-- Content here -->
<div class="grid-container">
</div>
<div class="col-lg-12">
<h2>Submit a New Cat Fact</h2>
<form >
<div class="form-row">
<div class="col-md-6 mb-3">
<textarea class="form-control" id="validationTextarea" placeholder="Write Your Cat Fact to be considered" required></textarea>
</div>
</div>
<div class="form-row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<br>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
<br>
</div>




<!-- footer of page begins here -->
<footer id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">

<p class="h6">© All right Reserved.<a class="text-green ml-2" href="https://github.com/StevenS125" target="_blank">Steven Snyder</a></p>
</div>
<hr>
</div>
</div>
</footer>
<!-- footer of page ends here -->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="./js/script.js"></script>

</body>
</html>
144 changes: 140 additions & 4 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,145 @@
body {
background-color: navy;
overflow-x: hidden;
}

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
margin: 20px;
}

object {
height: 100vh;
width: 100vh;
.heading {
height: 700px;
width: 100%;
text-align: center;
}

.heroImg {
margin: 50px 0;
height: 500px;
width: auto;
}

.container-fluid {
color:#037bfe;
}

/* Footer */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
footer {
padding: 60px 0;
}

footer .section-title {
text-align: center;
color: #037bfe;
margin-bottom: 50px;
text-transform: uppercase;
}
#footer {
background: #037bfe !important;
}
#footer h5{
padding-left: 10px;
border-left: 3px solid #eeeeee;
padding-bottom: 6px;
margin-bottom: 20px;
color:#ffffff;
}
#footer a {
color: #ffffff;
text-decoration: none !important;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
#footer ul.social li{
padding: 3px 0;
}
#footer ul.social li a i {
margin-right: 5px;
font-size:25px;
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
transition: .5s all ease;
}
#footer ul.social li:hover a i {
font-size:30px;
margin-top:-10px;
}
#footer ul.social li a,
#footer ul.quick-links li a{
color:#ffffff;
}
#footer ul.social li a:hover{
color:#eeeeee;
}
#footer ul.quick-links li{
padding: 3px 0;
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
transition: .5s all ease;
}
#footer ul.quick-links li:hover{
padding: 3px 0;
margin-left:5px;
font-weight:700;
}
#footer ul.quick-links li a i{
margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
font-weight: 700;
}

.formContainer {
width: 60%;
margin: 20px 20%;
}
.tableContainer {
width: 40%;
margin: 0 30% 0 30%;
font-size: 32px;
}


@media (max-width:767px){
#footer h5 {
padding-left: 0;
border-left: transparent;
padding-bottom: 0px;
margin-bottom: 10px;
}
}

/* Tablet */
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.grid-container {
display: grid;
grid-template-columns: auto auto;
margin: 20px;
}
}

/* Mobile */

@media only screen and (max-width: 768px) {
/* For mobile phones: */
.grid-container {
display: grid;
grid-template-columns: auto;
margin: 20px;
}

.heading {
height: auto;
width: 100%;
text-align: center;
}

.heroImg {
margin: 50px 0;
height: auto;
width: 100%;
}
}
104 changes: 104 additions & 0 deletions dog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!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="Features of the Tuna AKA Chicken of the sea">
<meta name="author" content="">
<title>Dog Facts!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="./css/style.css" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>

<!-- Import Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">

</head> <!-- header ends here -->

<body onload=addMoreDogFacts()> <!-- body begins here -->
<!-- Nav Starts Here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Animal Facts</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cat.html">Cat Facts</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/dog.html">Dog Facts</a>
</li>
</ul>
</div>
</nav>
<!-- Nav Ends Here -->

<div class="container-fluid">
<div class="heading">
<h1 style="color:#037bfe; font-family: 'Work Sans', sans-serif;">RANDOM DOG FACTS </h1>
<div><button class="btn btn-primary" onclick=addMoreDogFacts()>New Random Dog and Cat Facts</button></div>
<img class="heroImg" src="https://images.pexels.com/photos/1485802/pexels-photo-1485802.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="cat and dog background" />
</div>
<!-- Content here -->
<main>
<div class="grid-container">
</div>


</main>
<div class="col-lg-12">
<h2>Submit a New Dog Fact</h2>
<form >
<div class="form-row">
<div class="col-md-6 mb-3">
<textarea class="form-control" id="validationTextarea" placeholder="Write Your Dog Fact to be considered" required></textarea>
</div>
</div>
<div class="form-row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<br>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
<br>
</div>




<!-- footer of page begins here -->
<footer id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">

<p class="h6">© All right Reserved.<a class="text-green ml-2" href="https://github.com/StevenS125" target="_blank">Steven Snyder</a></p>
</div>
<hr>
</div>
</div>
</footer>
<!-- footer of page ends here -->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="./js/script.js"></script>

</body>
</html>
Loading