practice css_introductione19

<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
  width:100%; 
  height:398px; 
  background-color:rgba(240,240,240,0.8); 
  margin:auto;
}
header{
  width:100%; 
  height:15%; 
  background-color:rgba(89,188,144,1); 
  float:left;
}
aside{ 
  height:100%; 
  width:15%;
  background-color:rgba(220,0,0,0.5);
  float:left;
}
section{
  width:61.5%; 
  height:50%; 
  background-color:lightblue;  
  margin-left:3%;
  float:left; 
}
article{
  width:61.5%; 
  height:50%;  
  background-color:rgba(255,255,255,1);
  margin-left:3%;
  float:left;
}
footer{
  width:100%; 
  height:20%; 
  background-color:rgba(89,188,144,1); 
  float:left; 
}
.text{
  text-align:center;
  font-size:25px; 
  font-weight:900px; 
  font-family:Arial Rounded MT Bold;
}

</style>
</head>
<body>

<header> 
  <p class="text">&lt;header&gt;</p>
</header>

<div style="height:65%; width:100%;">
<aside>
 <p class="text">&lt;aside&gt;</p>
</aside>

<section>
 <p class="text">&lt;section&gt;</p>
</section>
 
<article>
<p class="text">&lt;article&gt;</p>
</article>
</div>

<footer>
 <p class="text">&lt;footer&gt;</p>
</footer>
</div>
  
</body>
</html>

Share