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

Create top nav bar with search bar

parent bb7f8946
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
img/background.png 0 → 100644
+ 0
− 0
View file @ d51bbada
img/background.png

39.6 KiB

img/nasa.svg 0 → 100644
+ 0
− 0
View file @ d51bbada
File added
img/search_icon.png 0 → 100644
+ 0
− 0
View file @ d51bbada
img/search_icon.png

2.79 KiB

index.html
+ 37
− 2
View file @ d51bbada
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" />
<title>NASA</title> <title>NASA</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="functions.js"></script> <script src="functions.js"></script>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="styles.css" />
</head> </head>
<body> <body>
<p>Hello World</p> <header>
<img class="nasa-img" src="img/nasa.svg" />
<nav>
<ul class="top-nav">
<li><a href="#">Missions</a></li>
<li><a href="#">Galleries</a></li>
<li><a href="#">NASA TV</a></li>
<li><a href="#">Follow NASA</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">NASA Audiences</a></li>
<li>
<form class="search-form" method="post" accept-charset="UTF-8">
<input type="search" size="15" placeholder="Search" />
<img class="search-icon" src="img/search_icon.png" />
</form>
</li>
<li><img src="" /></li>
</ul>
<ul class="centered-nav">
<li><a href="#">International Space Station</a></li>
<li><a href="#">Journey to Mars</a></li>
<li><a href="#">Earth</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Aeronautics</a></li>
<li><a href="#">Solar System and Beyond</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Benefits to You</a></li>
</ul>
</nav>
</header>
</body> </body>
</html> </html>
\ No newline at end of file
styles.css
+ 115
− 0
View file @ d51bbada
* { * {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
color: #eeeeee;
}
body, html {
margin: 0;
height: 100%;
width: 100%;
}
body {
background-image: url('img/background.png');
background-repeat: repeat;
background-position: center;
background-size: auto 100%;
width: 75%;
height: auto;
margin: auto;
background-color: #666666;
}
/*nav ul li a {
text-decoration: none;
display: inline-block;
padding: 1em;
background-color: white;
margin: 0;
}*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li a {
text-decoration: none;
}
/*.sub-nav ul {
display: flex;
flex-direction: row;
justify-content: center;
align-content: flex-start;
height: 100%;
width: 100%;
}
.sub-nav ul li {
padding: 0.5em 0;
background-color: #777777;
}
.sub-nav ul li a {
font-size: 0.6em;
font-weight: 500;
display: block;
border-right: 0.1em solid #eeeeee;
padding: 0.5em 1em;
}
.sub-nav ul li:last-child a {
border-right: none;
}
.sub-nav ul li a {
background-color: #777777;
}*/
.nasa-img {
width: 7em;
float: left;
}
.top-nav li {
font-size: 1em;
padding: 0.5em 0;
}
.top-nav li a {
display: block;
border-right: 0.05em solid #eeeeee;
padding: 0.5em;
}
.top-nav li:nth-child(n+7) a {
border: none;
}
.top-nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.search-form {
display: flex;
align-items: center;
column-gap: 0.5em;
border-radius: 0.1em;
padding: 0 0.5em;
height: 100%;
background-color: #66666688;
}
.search-form input[type="search"] {
border: none;
outline: none;
display: inline-block;
background-color: transparent;
font-size: 1em;
}
.search-form .search-icon {
height: 1.5em;
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment