RICHARD WORLDDD

In this example below you will see how to do a RICHARD WORLDDD with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by andreanc223, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andreanc223 ©
  • HTML
  • CSS
  • JavaScript
    <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 */
    

Comments