<nav class="menu-container">
<div class="nav-header">
<button>
<a class="logo-text" href="http://localhost:8080/">
<span>MTG Card Fetcher</span>
</a>
</button>
</div>
<div class="nav-list">
<ul>
<li>
<a href="{{baseUrl}}search">
<span>Fetch</span>
</a>
</li>
<li>
<a href="{{baseUrl}}deck">
<span>Build</span>
</a>
</li>
<li>
<a href="{{baseUrl}}draft">
<span>Draft</span>
</a>
</li>
</ul>
</div>
</nav>
<br><br><br>
<div>
<div>
<label>Testing input classes</label>
<input class="pretty-input" />
</div>
<br>
<div>
<label>Testing input classes</label>
<input class="pretty-input" />
</div>
<br>
<div>
<label>Testing input classes</label>
<input class="pretty-input" />
</div>
<br>
<div>
<label>Testing input classes</label>
<input class="pretty-input" />
</div>
</div>
<hr>
<button class="pretty-button">click me!</button>
<button class="pretty-button">NO! MEEEE!</button>
<hr>
<select class="pretty-dropdown" id="format-select">
<option value="">All Formats</option>
<option value="standard">Standard</option>
<option value="modern">Modern</option>
<option value="legacy">Legacy</option>
<option value="vintage">Vintage</option>
<option value="commander">Commander</option>
</select>
/*Downloaded from https://www.codeseek.co/andreanc223/richard-worlddd-yOGZvX */
body {
background-color: rgb(40, 40, 40);
color: rgb(220, 220, 220);
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0px;
}
a {
color: gray;
}
nav {
background-color: rgb(20, 20, 20);
width: 100%;
color: lightgray;
}
nav.menu-container .nav-header {
float: left;
}
nav.menu-container button {
background-color: transparent;
border: none;
float: left;
padding: 20px 20px;
}
nav.menu-container button a {
text-decoration: none;
font-size: 18px;
}
nav.menu-container button a:hover {
color: white;
}
nav.menu-container .nav-list ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav.menu-container .nav-list li {
float: left;
}
nav.menu-container .nav-list li a {
display: block;
padding: 20px;
text-align: center;
text-decoration: none;
}
nav.menu-container .nav-list li a:hover {
color: white;
}
.pretty-input {
border-radius: 5px;
border: 1px solid #ccc;
height: 1.5em;
padding: 4px;
background-color: #ffffff;
color: #555555;
box-shadow: none;
}
.pretty-input:focus {
border-radius: 5px;
border: 1px solid lightblue;
box-shadow: 0px 0px 8px teal;
outline: none;
outline-offset: 0px;
}
.pretty-button {
border-radius: 4px;
border: none;
padding: 6px 11px;
border: none;
color: #242424;
}
.pretty-button:hover {
background-color: #bdbdbd;
}
.pretty-dropdown {
text-align: center;
padding: 6px 8px;
border-radius: 4px;
}
/*Downloaded from https://www.codeseek.co/andreanc223/richard-worlddd-yOGZvX */
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
