I am currently experimenting with different website animations and implementing responsive design.
However, I encountered an issue when trying to apply these changes to my header, which also affects the .heading element. It seems that there is a problem with the height of the #main container, where its height appears to be 0.
This issue could possibly be due to a structural problem in the code.
Can someone assist me with this? I hope my explanation is clear enough.
Here is the code snippet I'd like to share:
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
/* Animations */
header {
float: left;
top: 0;
left: 0;
width: 100%;
animation-name: moveInLeft;
animation-duration: 2s;
animation-timing-function: 1s;
overflow: hidden;
}
#container {
overflow: hidden;
}
html {
font-size: 62.5%;
font-family: 'Ubuntu', sans-serif;
}
body {
font-size: 2rem;
box-sizing: border-box;
}
.options {
background-color: #777;
width: 100%;
display: block;
z-index: 1;
height: 3.5rem;
margin-bottom: 3rem;
}
.select-active {
background: green;
}
.options ul {
list-style-type: none;
}
.options ul li {
float: left;
transition: all 1000ms;
}
.options ul li a {
display: block;
padding: 0.55rem;
color: white;
text-decoration: none;
}
.submenu {
width: 15%;
float: left;
background-color: white;
margin-top: 1.3rem;
}
.body {
width: 80%;
float: left;
padding: 1.5rem;
}
.heading {
color: black;
text-align: center;
font-size: 5rem;
padding: 0.6rem;
background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)), url(/images/logo.png);
margin-left: 5rem;
width: 95%;
}
h2 {
text-align: left;
padding-right: 1rem;
margin-top: 4rem;
}
.footer {
background-color: grey;
float: left;
width: 100%;
color: white;
padding: 4.2rem;
margin-top: 7rem;
}
.submenu ul li {
list-style-type: none;
border: solid 2px white;
padding: 1rem;
background-color: rgb(220, 220, 220);
margin-left: 2rem;
font-size: 1.5rem;
transition: all 1000ms;
}
ul li {
cursor: pointer;
}
.submenu ul li:hover {
background-color: rgb(0, 150, 255);
border-radius: 30px;
}
.options ul li:hover {
background: black;
transform: translate(5px, 5px);
}
.picture {
float: right;
position: relative;
top: -6.5rem;
left: -11rem;
}
.logo {
width: 2.5rem;
}
.footer .bg-video__content {
object-fit: fill;
height: 15rem;
opacity: .5;
}
@media screen and (max-width: 992px) {
header,
.submenu {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id=container>
<header id="header">
<nav class="options">
<ul>
<li class="select-active"><a href="">CSS</a></li>
<li>
<a href="">
SASS
</a>
</li>
<li><a href="">Javascript</a></li>
<li span style="word-spacing: 0px"><a href="">Front End vs Back End</a></li>
</ul>
</nav>
<div class="picture">
<img class="logo" src="https://seeklogo.com/images/C/css3-logo-8724075274-seeklogo.com.png" alt="">
</div>
</header>
<main id="main">
<aside class="submenu">
<ul>
<li>Introducción</li>
<li>Styling block</li>
<li>Selectores</li>
<li>Propiedades</li>
<li>Cascada y herencia</li>
<li>The Box Model</li>
<li>Responsive</li>
</ul>
</aside>
<section class="body">
<header class="heading">CSS
</header>
<article class="text">
<h2>Styling Blocks</h2><br><br>
<p>...[large text content]...</p><br>
...[additional large text content]...
<p>...[more large text content]...</p> <br>
</article>
</section>
</<main>
<footer class="footer">
<div class="bg-video">
<video class="bg-video__content" autoplay muted loop>
<source src="vid.mp4" type="video/mp4">
<source src="vid.webm" type="video/webm">
Your browser is not supported!
</video>
</div>
</footer>
</div>