Flexbox Exercise 1

by Gustavo

HTML

<html>
    <head>
        <link rel="stylesheet" href="basic.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <nav>
            <ul class="container">
                <li>Home</li>
                <li>Profile</li>
                <li class="search">
                    <input type="text" class="search-input" placeholder="Search">
                </li>
                <li>Logout</li>
            </ul>
        </nav>
    </body>
</html>

CSS

.container > li {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
  box-sizing: border-box;
  background-color: #96ceb4;
  list-style-type: none;
}

html, body {
  background-color: #ffeead;
  margin: 10px;
}

.container {
  padding: 0;
}
.search-input {
  background: #ff6e68;
  border: 0;
  width: 100%;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid #ffeead;
  color: #ffeead;
  font-size: 1em;
  font-family: "Times New Roman";
}
::placeholder{
  color: #ffeead;
}

.search-input:focus {
  outline: none;
}

.container > li {
  background-color: #96ceb4;
}

.container {
  border: 5px solid #ffcc5c;
  display: flex;
}
.search {
  flex: 1;
}

@media all and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }
  .container > li {
    flex: 1 1 50%;
  }
  .search > input {
    text-align: center;
  }
}

@media all and (max-width: 400px) {
  .container > li {
    flex: 1 1 100%;
  }
  .search {
    order: 1;
  }
}