eVeWmw

evewmw.markdown

eVeWmw

A Pen by Praveen on CodePen.

License.

index.html

<div class="wrapper">
  <header class="header">
    <div class="holder">
      <div class="logo">
        Iadasd
      </div>
      <div class="name">
        DeleteMyData
      </div>
    </div>
  </header>
<!--   <main class="main">
    <aside class="sidebar-left">S</aside>
    <div class="content">Main Content</div>
    <aside class="sidebar-right">S</aside>
  </main> -->
</div>

style.css

header {
  grid-area: header;
}

.name {
  grid-area: name;
}

.logo {
  grid-area: logo;
}

aside {
  grid-area: side;
}

.wrapper > * {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  color: #d9480f;
} 

.wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(50px, auto);
  grid-template-areas: "header";
  width: 75%;
  margin: 0 auto;
} 

header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1em;
}

header .holder {
  display: grid;
  grid-template-columns: [logo] 50px [name] 100px;
}

@media only screen and (max-width: 740px) {  
   header .holder {
    grid-column: 2;
    justify-self: center;
  }
}

main {
  display: grid;
}