JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<div class="contact">
   <span>fon: ++49 176 30 39 13 92 • • • </span>
   <span>[email protected]</span>
</div>
<div class="language">
  <a href="vic_ws_de.php" target="_self"><strong>DE</strong></a> | EN
</div>
<header>
  <h1><img src="http://www.nocturnalhall.com/vic/VaM_logo_klein.png" alt="voice and mind"></h1>
</header>
<aside>
  <img src="http://www.nocturnalhall.com/vic/vic_ws2.jpeg" alt="victorija kukule">
</aside>
<main>
  <h2>Vocal Workshop with Viktorija Kukule (Vic Anselmo)</h2>
	<p>
  Hey, my name is Viktorija. I am singer, songwriter, pianist and vocal coach. 
  Throughout the years of teaching I’ve noticed how often my students came to the lessons 
  stressed out and how much it influences the tension in the body and eventually singing
  and producing the sound itself. Our body is our instrument and when experiencing a major
  tension for a long time it influences not only singing, but absolutely every sphere of our
  life and eventually, when not treated properly causing illness.
  </p>
  <p>
  My own and my students experiences became a motivation for me to come up with the 
  workshop that would help people to relax and ease their body and mind; to express emotions;
  find own voice; let go of the inner tension; to process the information that causes stress,
  through musical expression.
  </p>
  <p>
  <strong>Voice &amp; Mind Workshop</strong> is designed absolutely for everybody who is
  willing to let go off stress through the power of one’s own voice and sharing this experience
  with other people in the group, who came there with the same purpose.
  </p>
  <p>Workshop Includes: </p>
  <ul>
  <li>Relaxation and breathing techniques</li>
  <li>Warm up exercises for the body and your voice</li>
  <li>Vocal Exercises to open up your voice</li>
  <li> Motivational Techniques</li>
  <li>Expressing your emotions through music</li>
  <li>Singing together in a group or solo</li>
  </ul>
  <p class="download">Download the workshop packages...

CSS

body {
	margin: 10px auto;
  padding: 0 1em;
	font-family: Arial, Helvetica, sans-serif;
  color: #000000;
  display: grid;
  grid-gap: 0.5em;
  grid-template-areas: "contact lang" 
                       "header header" 
                       "artist artist"
                       "main main";
}
div.contact {
  grid-area: contact;
}
div.language {
  grid-area: lang;
  text-align: right;
  padding-right: 3em;
}
header {
  grid-area: header;
}
header h1 {
  position: absolute;
  text-align: center;
  width: 100%;
}
aside {
  grid-area: artist;
  text-align: center; }
aside img {
  max-width: 100%;
}
main {
  grid-area: main;
}
main h2 {
  margin-top: 0;
  font-size: 1.2em;
}
img {
  border: 0;
}
ul {
  padding: 0 0 0 1.5em;
}
p {
  text-align: justify;
}
p.download {
  text-align: left;
  max-width: 25em;
}
p.download a {
  display: block;
  margin-top: 1em;
  text-align: right;
}

@media all and (min-width: 30em) {
  body {
    max-width: 80em;
    padding: 0 3em;
	  grid-template-areas: "contact contact lang" 
                   "header header header" 
                   "artist main main";
  }
  aside img {
    max-width: 40vw;
    margin-right: 1em;
  }
  header h1 {
      margin: 0.5em 0;
      position: static;
  }
}