Skip to content

finished css styling for about page #26

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

Merged
heicj merged 2 commits into from
Dec 20, 2017
Merged

finished css styling for about page #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a686bf
finished css styling for about page
katlyn75 Dec 20, 2017
44bc02e
Merge branch 'master' into submit
heicj Dec 20, 2017
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
61 changes: 37 additions & 24 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Carter+One|Roboto" rel="stylesheet">
<link rel="stylesheet" href="styles/vendor/normalize.css">
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" href="styles/layout.css">
Expand Down Expand Up @@ -38,18 +38,18 @@

<main>

<section id="home">
<aside style ="background-color:#000">
<iframe src="https://giphy.com/embed/EA4tMPoqsE6pq" width="1000" height="1000" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><a href="https://giphy.com/gifs/mars-EA4tMPoqsE6pq" alt="gif of Mars, via GIPHY"></a>
</aside>
<section id="home">
<aside style ="background-color:#000">
<iframe src="https://giphy.com/embed/EA4tMPoqsE6pq" width="1000" height="1000" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><a href="https://giphy.com/gifs/mars-EA4tMPoqsE6pq" alt="gif of Mars, via GIPHY"></a>
</aside>

</section>
</section>


<section id="photos">

<div id="searchHowTo"></div>
<p>This is a test, this is ONLY a test....</p>
<!--This is a test, this is ONLY a test.... -->
<fieldset>
<form id="dropdowns">
<div id= "rovers">
Expand Down Expand Up @@ -90,6 +90,10 @@

<section id="favePhotos">

<div id="userFaves">
<!--This is a test, this is ONLY a test....-->


<div id="userFaves">
<form id="getFaves">
<label for="userName">Your Name</label>
Expand All @@ -103,7 +107,7 @@
</section>

<section id="learn">
<h1>Interesting Facts about Mars and the Mars Rover</h1>
<h1>Facts about Mars and the Mars Rover</h1>
<div class="faq_container">
<div class="faq">
<p id="question">How long is one Mars year?</p>
Expand All @@ -125,7 +129,7 @@ <h1>Interesting Facts about Mars and the Mars Rover</h1>
<p id="question">Is Curiosity powerful?</p>
<p id="answer">Yes and no. The iPhone in your pocket has at least 4 times the computing power of Curiosity, which packs a mere 200MHz CPU, to iPhones 800MHz CPU. Further, Curiosity packs just 256MB of RAM, and 2GB of on-board storage space. The iPhone has 512MB of RAM and up to 64GB of storage. However, Curiosity has multiple computers in case one breaks, all of which are capable of withstanding massive amounts of radiation an iPhone would not survive.</p>
<p id="question">"How did Curiosity get to Mars in the first place?"></p>
<p id="question">Curiosity has a rough journey to get to Mars and there is no guarantee it will arrive. Below is a video of it's hard journey to Mars.</p>
<p id="answer">Curiosity has a rough journey to get to Mars and there is no guarantee it will arrive. Below is a video of it's hard journey to Mars.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/uxVVgBAosqg" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<p id="question">Does Curiosity have a birthday?</p>
<p id="answer">Yes. Its birthday is on August 5, 2012. For it's 1st Birthday, it sang itself a lonely birthday song. Millions of Earthlings were sad Curiosity was all alone. However, Curiosity runs on a nuclear battery that turns heat into electricity and it will eventually die. In the scientific world, there is no value in songs, so it's vibration unit has been reprogrammed for scientific data collection. If you would like to hear it sing Happy Birthday, watch the video below.</p>
Expand All @@ -134,21 +138,30 @@ <h1>Interesting Facts about Mars and the Mars Rover</h1>
</div>
</section>
<section id="about">
<h1>"About Team Nitrogen"</h1>
<div class="team">
<h2>Charlie Heiner</h2>
<p id="bio">I love getting away from the city and into nature with my camera. It's not as easy these days while learning to code and juggle a family, but my supportive, beautiful wife and two amazing children make it very worthwhile. </p>
<img src="https://media-exp2.licdn.com/mpr/mpr/AAEAAQAAAAAAAArIAAAAJDQ1ZWRkMTU1LTQ5NjEtNGUxMi05ZTA5LTE0MjQ4N2FhYWVjYg.jpg" alt = "black and white alien image"/>
<h2>Liz Petersen</h2>
<p id="bio">When I was 11, I wanted to be an astronaut. That dream quickly changed with the onset of the teen years and a driver’s license. A graphic and web designer by training, I am currently studying software development at Alchemy Code Lab in Portland, OR. Hobbies include riding my motorcycle to beautiful places, nature photography, hiking, and camping. I'm a plant nerd, parent of one, and practitioner of mindful communication. The farthest reaches of space have continued to hold my interest, and I have been totally excited working on this project.</p>
<img src="https://i.pinimg.com/474x/f8/29/03/f82903b0aa0debc29bbbf75dcdec094d--mars-attacks-alien-art.jpg" alt = "cute alien holding cat"/>
<h2>Carmen Perezchica</h2>
<p id="bio">Carmen</p>
<img src="https://vignette.wikia.nocookie.net/phineasandferb/images/7/7a/Martians_and_rover.png/revision/latest?cb=20120102080004" alt = "Martians pointing at Mars rover"/>
<h2>Katlyn Tucker</h2>
<p id="bio">I enjoy warping time and space while learning to speak in code. Although not an astronaut, I watched two space shuttle launches and spent many childhood hours at Nasa. I almost applied to the program to colonize Mars,but leaving behind my two teens, friends and family behind and never returning to Earth was a dealbreaker. In my free time, I take photos, make jewelry and hang out with my kids, where we often sit and watch the Universe.</p>
<img src="http://wwwcdn.skyandtelescope.com/wp-content/uploads/mars_rover_journey_480px.jpg" alt = "Mars rover leaves a message in the Mars sand which spells out Mars"/>
</div>
<h2>Team Nitrogen</h1>
<div class="bio-wrapper">
<h3>Charlie Heiner</h2>
<img src="https://media-exp2.licdn.com/mpr/mpr/AAEAAQAAAAAAAArIAAAAJDQ1ZWRkMTU1LTQ5NjEtNGUxMi05ZTA5LTE0MjQ4N2FhYWVjYg.jpg" alt = "black and white alien image"/>
<p id="bio">I appreciate the Universe most by getting away from the city and into nature with my camera. It's not as easy these days while learning to code with a new one at home, but my supportive, beautiful wife and two amazing children make it very worthwhile. </p>
</div>

<div class="bio-wrapper">
<h3>Liz Petersen</h2>
<img src="https://i.pinimg.com/474x/f8/29/03/f82903b0aa0debc29bbbf75dcdec094d--mars-attacks-alien-art.jpg" alt = "cute alien holding cat"/>
<p id="bio">When I was 11, I wanted to be an astronaut. That dream quickly changed with the onset of the teen years and a driver’s license. A graphic and web designer by training, I am currently studying software development at Alchemy Code Lab in Portland, OR. Hobbies include riding my motorcycle to beautiful places, nature photography, hiking, and camping. I'm a plant nerd, parent of one, and practitioner of mindful communication. The farthest reaches of space have continued to hold my interest, and I have been totally excited working on this project.</p>
</div>

<div class="bio-wrapper">
<h3>Carmen Perezchica</h2>
<img src="https://vignette.wikia.nocookie.net/phineasandferb/images/7/7a/Martians_and_rover.png/revision/latest?cb=20120102080004" alt = "Martians pointing at Mars rover"/>
<p id="bio">Carmen</p>
</div>

<div class="bio-wrapper">
<h3>Katlyn Tucker</h2>
<img src="http://wwwcdn.skyandtelescope.com/wp-content/uploads/mars_rover_journey_480px.jpg" alt = "Mars rover leaves a message in the Mars sand which spells out Mars"/>
<p id="bio">I enjoy warping time and space while learning to speak in code. Although not an astronaut, I watched two space shuttle launches and spent many childhood hours at Nasa. I almost applied to the program to colonize Mars,but leaving behind my two teens, friends and family behind and never returning to Earth was a dealbreaker. In my free time, I take photos, make jewelry and hang out with my kids, where we often sit and watch the Universe.</p>
</div>

</section>

Expand Down
16 changes: 10 additions & 6 deletions styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,34 @@ body {
margin: 0;
padding: 0;
background-color: #000000;
background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/hubble_friday_05292015.jpg');
background-position: center top;
background-repeat: no-repeat;

}

h1 {
font-family: 'Carter One', cursive;

font-family: 'Carter+One',cursive;

font-size: 2.3em;
color: rgb(228, 53, 9);
margin: 0;
padding-top: 50px;
padding-left: 100px;
position: fixed;
position: absolute;
z-index: 1;
}

h2 {

font-family: 'Carter One', cursive;

font-size: 1.7em;
}

h3 {

font-family: 'Carter One', cursive;
font-size: 1.3em;

}

p {
Expand All @@ -39,7 +43,7 @@ a {
display: block;
}

a:hover {
a:hover {
color: rgb(228, 53, 9);
}

Expand Down
5 changes: 5 additions & 0 deletions styles/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@

}

#learn {
background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/hubble_friday_05292015.jpg');
background-position: center top;
background-repeat: repeat;
}

footer{
width: 100%;
Expand Down
34 changes: 18 additions & 16 deletions styles/module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@

.nav li {
display: inline-block;
font-family: 'Luckiest Guy', cursive;
font-size: 1em;
font-family: 'Carter+One', cursive;
font-size: 1.25em;
line-height: 40px;
height: 40px;
padding: 5px 10px;
Expand All @@ -33,7 +33,8 @@
}


/* Container module for Gallery */

/* Container module for Gallery */

#gallery-wrapper {
position: relative;
Expand Down Expand Up @@ -65,20 +66,21 @@
justify-content: space-around;
flex-wrap: wrap;
padding: 40px 40px 100px 40px;

}

.imageBlock {
display: block;
position: relative;
width: 25%;
height: 200px;
margin: 20px 0;
padding: 40px;
background-position: center;
background-size: cover;
text-align: center;
border-radius: 20px;
transition: box-shadow .3s ease-in-out;
.imageBlock {
display: block;
position: relative;
width: 25%;
height: 200px;
margin: 20px 0;
padding: 40px;
background-position: center;
background-size: cover;
text-align: center;
border-radius: 20px;
transition: box-shadow .3s ease-in-out;
}
/* LEARN page module */

Expand All @@ -90,7 +92,7 @@ div.faq_container {
position: relative;
margin-left: auto;
margin-right: auto;
height: 1000px;
height: 2000px;
padding-top: 100px;
padding-left: 150px;
}
65 changes: 61 additions & 4 deletions styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,70 @@
div.faq p#question {
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 14px;
font-size: 20px;
color: #35aa06;
margin: 2%;

}

/* Learn page styling */
/* Learn page styling */
div.faq p#answer {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-size: 18px;
color: rgb(37,57,79);
}
margin: 2%;
}


/* About page styling */

#about h2 {
font-size: 40px;
color: rgb(74,98,163);
width:60%;
justify-content: space-around;
text-align: center;
padding-left: 15%;
padding-right: 15%;

}
#about h3 {
font-weight: bold;
font-size: 30px;
color: #35aa06;
padding-left: 70px;
}

#about p#bio {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: rgb(250, 245, 245);
margin-top: 100px;
justify-content: space-around;
justify-content: space-between;

}

#about img{
display: block;
position: relative;
width: 25%;
height: 25%;
padding: 20px;
background-position: center;
background-size: cover;
text-align: center;
border-radius: 10px;
float:left;
clear: both;
margin-left: 30px;
}

#about .bio-wrapper{
display: block;
block-size: 20%;
width: 100%;
float:right;
clear: both;
padding: 30px 30px 50px 50px;
}