Skip to content
Snippets Groups Projects
Commit b781ec99 authored by Silas Meister's avatar Silas Meister
Browse files

Make page a little responsible

parent 474c40dd
No related branches found
No related tags found
No related merge requests found
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
<li><a href="#">NASA Audiences</a></li> <li><a href="#">NASA Audiences</a></li>
<li> <li>
<form class="search-form" method="post" accept-charset="UTF-8"> <form class="search-form" method="post" accept-charset="UTF-8">
<input type="search" size="10" placeholder="Search" /> <input type="search" placeholder="Search" />
<input type="button" /> <input type="button" />
</form> </form>
</li> </li>
<li><img src="img/share_icon.png" /></li> <li><img src="img/share_icon.png" /></li>
</ul> </ul>
<ul class="center-nav"> <ul class="center-nav">
<li><a href="#">International Space Station</a></li> <li><a href="#">International Space Station</a></li>
<li><a href="#">Journey to Mars</a></li> <li><a href="#">Journey to Mars</a></li>
......
...@@ -11,13 +11,12 @@ body, html { ...@@ -11,13 +11,12 @@ body, html {
} }
body { body {
position: relative;
background-image: url('img/background.png'); background-image: url('img/background.png');
background-repeat: repeat; background-repeat: repeat;
background-position: center; background-position: center;
background-size: auto 100%; background-size: auto 100%;
width: 75%;
height: auto; height: auto;
margin: auto;
background-color: #666666; background-color: #666666;
} }
...@@ -70,12 +69,17 @@ nav ul li a { ...@@ -70,12 +69,17 @@ nav ul li a {
}*/ }*/
.nasa-img { .nasa-img {
width: 7em; position: absolute;
float: left; left: 0;
top: 0;
width: 5em;
z-index: -1;
} }
.top-nav { .top-nav {
display: flex; display: flex;
overflow: hidden;
flex-wrap: nowrap;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
...@@ -111,7 +115,7 @@ nav ul li a { ...@@ -111,7 +115,7 @@ nav ul li a {
border-radius: 0.1em; border-radius: 0.1em;
padding: 0 0.5em; padding: 0 0.5em;
height: 100%; height: 100%;
background-color: #66666688; background-color: #55555580;
} }
.search-form input[type="search"] { .search-form input[type="search"] {
...@@ -119,6 +123,7 @@ nav ul li a { ...@@ -119,6 +123,7 @@ nav ul li a {
outline: none; outline: none;
background-color: transparent; background-color: transparent;
font-size: 1em; font-size: 1em;
size: 10;
} }
.search-form input[type="button"] { .search-form input[type="button"] {
...@@ -130,4 +135,51 @@ nav ul li a { ...@@ -130,4 +135,51 @@ nav ul li a {
background-size: contain; background-size: contain;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
\ No newline at end of file
.center-nav {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
}
.center-nav {
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
body {
background-color: green;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
body {
background-color: yellow;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
body {
width: 100%;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
body {
width: 1200px;
margin: auto;
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment