Item: RICHARD WORLDDD
Rating: 3.4
Author: andreanc223

0 Downloads
2 Views
Tweet
Download Now View Demo

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

More from andreanc223

RICHARD WORLDDD

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

Comments

More from andreanc223

Balloon!

RICHARD WORLDDD

heart!

A Pen by andrea

You Might Also Like

A Pen by Berta

A Pen by Naeem

Tribute Page

Safari table overflow test

Annoying Pop up

#dailycssimages #18 : Vampire (Zubat)

Hypocycloid Juggling Patterns

2.5. Komponent: gwiazdka z wypełnieniem pojawiającym się po najechaniu kursorem