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;
} */
#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
Post a Comment