Hello, I’ve been working on a StyleStagew project this whole week and I’ve run into a couple of problems that I need help with. I’ll post a link to my CodPen below, which has my code for the project. An important perimeter of this project is that I cannot change the HTML. I have to do all my creation in CSS.
Problem #1:
I am trying to put all elements in the “Currently Styled Stage” part of the web page into a single white box (including the the title “Currently Styled Stage”. Right now, they are all separate elements. Here is the section of the code I´m referring to:
HTML
<aside class="profile" aria-labelledby="profile-title">
<div class="container">
<h4 id="profile-title">Currently Staged Style</h4>
<ul>
<li class="profile-title"><span>Title:</span> <span>Main Stage</span></li>
<li class="profile-author"><span>Author:</span> <span>Stephanie Eckles</span></li>
<li class="profile-twitter">
<span>Twitter:</span> <span><a href="https://twitter.com/5t3ph">5t3ph</a></span>
</li>
<li class="profile-website">
<span>Website:</span> <span><a href="https://moderncss.dev">ModernCSS.dev</a></span>
</li>
</ul>
<a href="/styles/css/main-stage.css">View Stylesheet</a>
</div>
</aside>
CSS
.profile > .container > ul > li{
display: flex;
flex-direction: column;
width: 8rem;
background-color:var(--color-light);
border: var(--color-light);
color: var(--color-text);
font-size: 0.8rem;
font-weight: 600;
padding: 10px;
margin: auto;
margin-top: 7px;
margin-bottom: 7px;
}
Problem #2:
In the section titled “Source Files”, I have the elements in the display of flex with the flex-direction of row, but they are displaying a column. I don´t feel I´ve established this behavior elsewhere so I´m not sure why it´s happening:
HTML
<footer id="files">
<div class="container">
<h3>Source Files</h3>
<a href="/source-files/style.css" class="link-downloadcss" download>Download CSS</a>
<a href="/source-files/stylestage.html" class="link-downloadhtml" download
>Download HTML</a
>
<a
href="https://codepen.io/5t3ph/pen/b493845ae41e836889dd84fdbb0f5291"
class="link-codepen"
download
>Fork the CodePen</a
>
</div>
</footer>
CSS
#files > .container > a {
width: 6rem;
background-color: var(--color-box);
border: solid 4px var(--color-box);
box-shadow: 5px 5px 3px var(--color-text);
color: var(--color-text);
font-weight: 600;
border-radius: 10%;
margin: auto;
margin-top: 7px;
margin-bottom: 7px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
Problem #3:
My nav bar has a slight border on top but no border on the bottom. I´d like the top to have no visible border as well. I´ve tried using a blur, but I think this was not the appropriate approach and it did nothing to ameliorate the problem.
HTML
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#guidelines">Guidelines</a></li>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#files">Files</a></li>
<li><a href="/styles/">All Styles</a></li>
<li><a href="/resources/">Resources</a></li>
</ul>
</nav>
CSS
/*Navigation*/
nav > ul > li > a {
border: solid 1px rgba(148,187,233,1);
width: 9rem;
background-color: var(--color-box);
color: var(--color-text);
position: center;
padding: 1rem;
border-radius: 10%;
}
nav > ul > li > a:hover {
filter: brightness(50%);
}
li {
list-style: none;
font-family: Arial, sans-serif;
}
nav {
font-weight: 600;
}
nav > ul {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 25px;
}
The page is a mess style-wise. I´m just trying to get a handle on the technical stuff. However, if you have comments on my styling then I´m open to hear that as well.