HTML
<< body>>.
<< nav id=" navbar">
<> < div id=" img">
<> < img src=" images/pfp. jpg" alt=" pfp">
<> .
<< div id=" name">
<> < a>> Noah Rock<.
<.
<< div id=" web links">
<> < a id=" exp">> Experience< < a id=" call">> Call< .
<.
<< h1 id=" introductory">> Hi, Globe!<.
<< p id=" desc">> I'm an ambitious Front-end programmer lover based in Northwest Arkansas,<< br>>.
with an eager rate of interest in sharpening my abilities and also obtaining real-world experience.<.
<.
CSS
body {
background-color: #B 9B4C7;
margin: 0;
}
#img {
border-radius: 50%;
elevation: 6em;
margin: 0.5 em;
order: 1;
overflow: concealed;
cushioning: 0;
size: automobile;
}
#img img {
elevation: automobile;
size: 100%;
}
#navbar {
align-items: facility;
background-color: clear;.
/ * boundary: populated; */.
screen: flex;.
elevation: 6em;.
justify-content: space-between;.
margin: 0;.
cushioning: 0;.
}
#name {
font-size: 2.5 em;.
margin-right: 1em;.
order: 2;.
}
#links {
font-size: huge;.
margin: 1.5 em;.
margin-left: automobile;.
order: 3;.
}
nav {a / * boundary: populated; */.
shade: #FAF 0E6;.
font-size: bigger;.
text-decoration: none;.
}
#exp {
margin: 1em;.
}
#contact {
background-color: # 352F44;.
cushioning:.5 em;.
}
#intro {
/ * boundary: populated; */.
shade: # 352F44;.
font-size: 8em;.
margin-bottom: 0;.
cushioning: 0;.
text-align: facility;.
}
#desc {
/ * boundary: populated; */.
shade: # 5C5470;.
font-size: 2em;.
margin: 0;.
cushioning: 0;.
text-align: facility;.
}
@media (max-width: 638px) {
#navbar {
flex-direction: column;.
align-items: flex-start;.
}
#name {
order: 1;.
margin-left:.5 em;.
margin-right: 0;.
margin-bottom: 0.5 em;.
}
#links {
order: 2;.
margin: 0;.
}
#img {
order: 3;.
elevation: 10em;.
size: automobile;.
}
}
I'm utilizing a media question to alter the navbar format. My wanted appearance if for the #name to be leading left, #contact straight below and also the #exp to the right of #contact. After that I desire the placeholder img a little larger and also on the appropriate side, yet each time I attempt to alter it it vanishes. The name and also web links are great simply desiring the #contact closest to the left.
