<header id="wrapper">
<h1 id="logo">Resources</h1>
<nav>
<ul id="flex-container">
<li class="flex-item"><a href="https://coolors.co/" target="_blank">Coolers</a></li>
<li class="flex-item"><a href="https://colours.neilorangepeel.com/" target="#">CSS Colours</a></li>
<li class="flex-item"><a href="https://css-tricks.com/" target="_blank">CSS Tricks</a></li>
<li class="flex-item"><a href="https://caniuse.com/" target="_blank">CSS Browser Compatibility</a></li>
</ul>
</nav>
</header>
<main id="main-flex">
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/f02mOEt11OQ"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315" src="https://www.youtube.com/embed/zFhfksjf_mY"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/dLmyp3xMsAo"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/HoCAUlmc6lk"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/zPyg4N7bcHM"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/hBkcwy-iWt8"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/NhK8Ehv6aPI"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/bJu3BtVl3Hc"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/dAz8Wu9sgDk"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/TrlqZfnHMho"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/hBi9wavp2w4"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div>
<iframe
width="460"
height="315"
src="https://www.youtube.com/embed/rwCJvSKzQkc"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
</main>
/*
Color Palette used:
#003049 ~> Prussian Blue
#D62828 ~> Maximum Red
#F77F00 ~> Orange
#EAE2B7 ~> Lemon Meringue
*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
line-height: 1.5;
}
#wrapper{
background-color: #003049;
overflow: hidden;
text-align: center;
border: solid black 4px;
border-radius: 0 0 10px 10px;
}
#logo{
background-color: black;
border-radius: 0 0 10px 10px;
color: #D62828;
padding: 10px;
}
#flex-container{
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 10px;
align-items: center;
justify-content: center;
/* comment padding out to see what happens to the elements */
}
.flex-item{
flex: 1 1 25%;
list-style-type: none;
padding: 10px;
}
a {
color: #D62828;
text-shadow: 1px 1px 1px black;
font-weight: bold;
}
a:hover{
color: #FCBF49;
transition-duration: 0.4s
}
body{
background-color: #EAE2B7;
}
#main-flex{
display: flex;
flex-wrap: wrap;
}
#main-flex section{
flex: 1 1 33%;
margin: 2px;
}
section div{
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
border: solid black 2px;
border-radius: 10px;
}
section div iframe{
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.