Day 63

I finished the header... My code looks diferent when I compare it to the code in the class.  Mine looks better.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

* {
  box-sizing: border-box;
}

html {
  max-width: 960px;
  margin: 0 auto;
  font-family: sans-serif;
}

header {
  background: #3B5998;
  padding: 15px;
}

header a {
  color: white;
  text-decoration: none;
}

header .logo-area {
  padding-left: 20px;
  display: inline-block;
  width: 14%;
}

header .logo-area a {
  font-size: 1rem;
  font-weight: 400;
  color: white;
  text-decoration: none;
}

header .menu {
  display: inline-block;
  margin-left: -4px;
  width: 12%;
}

header .menu ul li {
  display: inline-block;
  text-decoration: none;
  color: white;
  font-size: 0.7rem;
  padding: 0 0.75rem;
}

header .icon-links {
  margin-left: -4px;
  width: 16%;
  display: inline-block;
  padding: 0 4%;
  border-left: solid grey 1px;
  border-right: solid grey 1px;
}

header .icon-links ul li {
  display: inline-block;
  padding: 0 3%;
}

header .privacy {
  display: inline-block;
  margin-left: -4px;
  width: 5%;
}

header .privacy i { 
  padding: 0 50%;
}

header .search-area {
  margin-left: -4px;
  display: inline-block;
  width: 52%;
  text-align: right;
}

header .search-area ul li {
  display: inline-block;
}

/* .header-inline {
  display: inline-block;
}

.header-inline ul li {
  display: inline-block;
} */

Comments

Popular posts from this blog

Day 1

Day 365 + 1

Day 365 + 2