Add finished Projects 1 & 2
This commit is contained in:
parent
6f9c946458
commit
fb2b4539c9
|
|
@ -0,0 +1,40 @@
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="tribute.css" />
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Hello Camper!
|
||||||
|
|
||||||
|
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
|
||||||
|
|
||||||
|
- The freeCodeCamp Team
|
||||||
|
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>John Williams Tribute Page</title>
|
||||||
|
</head> <body>
|
||||||
|
<div id="main">
|
||||||
|
<h1 id="title">John Williams</h1>
|
||||||
|
<div id="img-div">
|
||||||
|
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/b/b8/John_Williams_tux.jpg" alt="picture of John Williams"></img>
|
||||||
|
<h4 id="img-caption">John Williams at Avery Fisher Hall in 2007</h4>
|
||||||
|
</div>
|
||||||
|
<p id="tribute-info">
|
||||||
|
<strong>John Towner Williams</strong> (born February 8, 1932) is an American composer, conductor, and pianist. Widely regarded as one of the greatest film composers of all time, he has composed some of the most popular, recognizable, and critically acclaimed film scores in cinematic history in a career spanning over six decades. Williams has won 25 Grammy Awards, seven British Academy Film Awards, five Academy Awards, and four Golden Globe Awards.
|
||||||
|
<br><br>
|
||||||
|
Williams has composed for many critically acclaimed and popular movies, including the Star Wars saga, Schindler's List, Close Encounters of the Third Kind, Superman, E.T. the Extra-Terrestrial, the Indiana Jones series, the first two Home Alone films, the first two Jaws films, the first two Jurassic Park films, Hook, and the first three Harry Potter films.[4] Williams has also composed numerous classical concertos and other works for orchestral ensembles and solo instruments. He served as the Boston Pops's principal conductor from 1980 to 1993 and is its laureate conductor.[5] He has been associated with director Steven Spielberg since 1974, composing music for all but five of his feature films. Other works by Williams include theme music for the 1984 Summer Olympic Games, NBC Sunday Night Football, "The Mission" theme used by NBC News and Seven News in Australia, the television series Lost in Space and Land of the Giants, and the incidental music for the first season of Gilligan's Island.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<p id="tribute-link-area">
|
||||||
|
You can learn more about John Williams and the many movies he has scored on
|
||||||
|
<a href="https://en.wikipedia.org/wiki/John_Williams" id="tribute-link" target="_blank">Wikipedia</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
body {
|
||||||
|
background-color: #FDF0D5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h4 {
|
||||||
|
color: #331832;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-div {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image {
|
||||||
|
justify-self: center;
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-caption {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tribute-link-area {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Build A Survey - Project 2 - FreeCodeCamp</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1 id="title">Project 2 Survey</h1>
|
||||||
|
<p id="description">Tell us a little about you</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<form id="survey-form">
|
||||||
|
<label for="name" id="name-label">Name</label> <br>
|
||||||
|
<input type="text" name="name" id="name" placeholder="First and Last Names" required=true><br>
|
||||||
|
<br>
|
||||||
|
<label for="email" id="email-label">Email</label><br>
|
||||||
|
<input type="email" name="email" id="email" placeholder="blah@example.com" required=true><br>
|
||||||
|
<br>
|
||||||
|
<label for="number" id="number-label">Enter your age; 8 to 110 (optional)</label><br>
|
||||||
|
<input type="number" min="8" max="110" name="" placeholder="Age"id="number"><br>
|
||||||
|
<br>
|
||||||
|
<label for="favColor">Chose your favourite color:</label><br>
|
||||||
|
<select name="favColor" id="dropdown">
|
||||||
|
<option value="green">Green</option>
|
||||||
|
<option value="blue">Blue</option>
|
||||||
|
<option value="red">Red</option>
|
||||||
|
<option value="purple">Purple</option>
|
||||||
|
<option value="orange">Orange</option>
|
||||||
|
</select>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<fieldset id="chooseGender">
|
||||||
|
<legend>What is your gender? (optional)</legend><br>
|
||||||
|
<input type="radio" id="male" name="gender" value="male">
|
||||||
|
<label for="male">Male</label><br>
|
||||||
|
<input type="radio" id="female" name="gender" value="female">
|
||||||
|
<label for="female">Female</label><br>
|
||||||
|
<input type="radio" id="other" name="gender" value="other">
|
||||||
|
<label for="other">Other</label><br>
|
||||||
|
<input type="radio" id="noAnswer" name="gender" value="noAnswer" value="1">
|
||||||
|
<label for="noAnswer">Prefer not to answer</label><br>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<fieldset id="preferredTimeOfDay">
|
||||||
|
<legend>What is you favourite time of day? (Check all that apply)</legend><br>
|
||||||
|
<input type="checkbox" id="morning" name="morning" value="Morning">
|
||||||
|
<label for="morning">I prefer the morning</label><br>
|
||||||
|
<input type="checkbox" id="afternoon" name="afternoon" value="Afternoon">
|
||||||
|
<label for="afternoon">I prefer the afternoon</label><br>
|
||||||
|
<input type="checkbox" id="evening" name="evening" value="Evening">
|
||||||
|
<label for="evening">I prefer the evening</label><br>
|
||||||
|
<input type="checkbox" id="night" name="night" value="Night">
|
||||||
|
<label for="night">I prefer the night</label><br>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<label for="comments">Additional Comments? (optional)</label><br>
|
||||||
|
<textarea type="text" name="textarea" id="textarea" rows="5" cols="30" >
|
||||||
|
</textarea><br>
|
||||||
|
<br>
|
||||||
|
<div class="submitButtonBox">
|
||||||
|
<input type="submit" value="Submit" id="submit">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>Thank you for taking the time to participate</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
body {
|
||||||
|
background-color: #679b9b;
|
||||||
|
color: whitesmoke;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
color: whitesmoke;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
background-color: #aacfcf;
|
||||||
|
color: #b83b5e;
|
||||||
|
padding: 2%;
|
||||||
|
width: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text], input[type=email], input[type=number], select, #dropdown, #preferredTimeOfDay, #chooseGender, textarea{
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 2px solid rgb(181, 78, 255);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitButtonBox {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=submit] {
|
||||||
|
background-color: green;
|
||||||
|
color: white;
|
||||||
|
width:130px; height:50px; margin-top:8px;
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding-top: 1rem;
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
11
index.html
11
index.html
|
|
@ -38,7 +38,16 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="freecodeCampProjects">
|
<div class="freecodeCampProjects">
|
||||||
<h2>FreecodeCamp</h2>
|
<h2>FreecodeCamp</h2>
|
||||||
<p>coming soon</p>
|
<div class="responsiveWebDesignProjects">
|
||||||
|
<h3>Responsive Web Design Projects</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">Project 1 - Tribute Page</a></li>
|
||||||
|
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">Project 2 - Build a Survey Form</a></li>
|
||||||
|
<li><a href=""></a></li>
|
||||||
|
<li><a href=""></a></li>
|
||||||
|
<li><a href=""></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="completeWebDev2020Projects">
|
<div class="completeWebDev2020Projects">
|
||||||
<h2>Complete Web Development 2020</h2>
|
<h2>Complete Web Development 2020</h2>
|
||||||
|
|
|
||||||
7
notes.md
7
notes.md
|
|
@ -56,4 +56,9 @@ Think of it as a combination of learning, and tips and tricks. They will start u
|
||||||
|
|
||||||
## Useful Links
|
## Useful Links
|
||||||
|
|
||||||
* http://www.heropatterns.com/ << Free repeatable background SVG's
|
* http://www.heropatterns.com/ << Free repeatable background SVG's
|
||||||
|
|
||||||
|
## API's to test with
|
||||||
|
|
||||||
|
* https://api.chucknorris.io/jokes/random
|
||||||
|
* https://jsonplaceholder.typicode.com/
|
||||||
Reference in New Issue