XXX

XXX

by dimatim1516

HTML

<header class="main_header">

  <div class="button_1">
    <h3><a class="name">XXX1</a></h3>
  </div>

</header>

<aside class="main_aside">



</aside>


<div>

  <div class="caption">
    <h4 id='caption'>XXX2</h4>
  </div>

</div>

CSS

.main_header {
  margin-top: 10vw;
  width: 100%;
  display: inline-block;
}

.button_1 {
  font-size: 4em;
  padding: auto;
  text-align: center;
  display: flex;
  justify-content: center;
}

.name {
  text-decoration: none;
  background-color: black;
  color: white;
  margin: auto;
  display: flex;
  font-weight: 600;
  font-size: 4vw;
  box-shadow: 0.1em 0.3em 5px rgba(0, 0, 0, 0.4);
}

.name:hover {
  font-size: 4.2vw;
}

.main_aside {
  width: 30%;
  height: 25vh;
  padding-left: 70%;
  margin: auto;
  display: inline-block;
}

#caption {
  color: black;
  font-size: 3em;
  display: flex;
  height: 15%;
  justify-content: center;
  padding-bottom: 3%;
  font-size: 3vw;
}

.name:hover {
  font-size: 4.3vw;
}

.name:hover+.main_aside {
  height: 24.7vw;
}