Jump to content
Menú alternativo
Alternar el menú de preferencias
Menú alternativo personal
No has accedido
Tu dirección IP será visible si haces alguna edición
Sin resumen de edición
de https://codepen.io/lisa_c/pen/wvLYeY
Línea 1: Línea 1:
.countries {
body {
    border-collapse: collapse;
  margin: 0;
    margin: 25px 0;
  padding: 0;
    font-size: 0.9em;
  background: #ccc;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
}
 
.countries th {
.nav ul {
    background-color: #009879;
  list-style: none;
    color: #ffffff;
  background-color: #444;
    text-align: left;
  text-align: center;
  padding: 0;
  margin: 0;
}
}
 
.nav li {
.countries th,
  font-family: 'Oswald', sans-serif;
.countries td {
  font-size: 1.2em;
    padding: 10px 13px;
  line-height: 40px;
    text-align: center;
  height: 40px;
  border-bottom: 1px solid #888;
}
}
 
.countries tbody tr {
.nav a {
    border-bottom: 1px solid #dddddd;
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
}
 
.countries tbody tr:nth-of-type(even) {
.nav a:hover {
    background-color: #f3f3f3;
  background-color: #005f5f;
}
}
 
.countries tbody tr:last-of-type {
.nav a.active {
    border-bottom: 2px solid #009879;
  background-color: #fff;
  color: #444;
  cursor: default;
}
}
 
.countries tbody tr.active-row {
@media screen and (min-width: 600px) {
     font-weight: bold;
  .nav li {
     color: #009879;
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
  /* Option 1 - Display Inline */
  .nav li {
     display: inline-block;
    margin-right: -4px;
  }
  /* Options 2 - Float
  .nav li {
     float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}
}

Revisión del 23:39 5 may 2022

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
 
.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}