Responsive Vintage olivetti Ad in CSS Grid

FEATURED

In this example below you will see how to do a Responsive Vintage olivetti Ad in CSS Grid with some HTML / CSS and Javascript

Responsive CSS Grid experiment of a vintage olivetti typewriter ad.Original Ad found here: https://www.flickr.com/photos/sandiv999/4135247612/in/pool-goldenageofadvertising

Thumbnail
This awesome code was written by Kristopher Van Sant, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kristopher Van Sant ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Vintage olivetti Ad in CSS Grid </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="blocks">
  <div class="red"></div>
  <div class="green"></div>
  <div class="red"></div>
  <div class="black">
    <div class="white wl">
      <div class="circle"></div>
    </div>
  </div>
  <div class="black">
    <div class="white wb">
      <div class="circle"></div>
    </div>
  </div>
  <div class="black">
    <div class="white wt">
      <div class="circle"></div>
    </div>
  </div>
  <div class="green"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
  <div class="blue"></div>
</div>
<div id="info">
  <div id="logo">
    <h1>o<span id="l">l</span><span id="i">i</span><span id="v">v</span><span id="e">e</span><span id="t">t</span><span id="t-2">t</span><span id="i-2">i</span></h1>
  </div>
  <div id="about">
    <div>
      <h2>Divisumma 24 Tetractys</h2>
      <p>De las sumas a las ecuaciones</p>
      <p>Cada una de estas dos calculadoras electricas impresoras, suma, resta, multiplica, divide, da el saldo negativeo, imprime las disintas fases de las operaciones y los resultados con el mismo orden de la escritura a mano; posee un mecanismo de memoria
        que permite conservar uno de los factores o el resultado de una operacion eliminando reimpresiones y aumentando la seguridad y velocidad. La Tetractys, que cuenta con dos totalizadores, puede cumplir operaciones mas complejas hasta calculos algebraicos
        y eliminar un numero tambien mayor de impostaciones trasladando da un totalizador a otro y de este al dispositivo de memoria o viceversa. La nueva divisumma 24 y la Tetractys, se Ilaman Olivetti. Quien conozca mecanica de precision sabe lo que
        esto significa.</p>
    </div>
  </div>
  <div id="distributors">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/olivetti.png" alt="Olivetti Typewriter">
    <ul>
      <li>Olivetti Argentina S.A - Buenes Aires</li>
      <li>Olivettti Industrial S.A - SSo Paulo</li>
      <li>Olivetti Colombiana S.A - Bogata</li>
      <li>Olivetti Mexicano S.A. - Mexico 1. O.f.</li>
      <li>Olivetti Petuana S.A - Lima</li>
      <li>Olivetti De Venezuala CA. - Caracas</li>
      Ademia Distribuidores en los alros paises de la America Latina
    </ul>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KristopherVanSant/responsive-vintage-olivetti-ad-in-css-grid-LzvZVY */
:root {
  --red: #f32a2a;
  --green: #218d30;
  --black: black;
  --blue: #1985d0;
  --yellow: #ffff01;
  --grey: #5f585b;
  --white: #fcfaf2;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: var(--white);
  font-family: sans-serif;
  margin: 2vw;
}

#blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 3.7fr 1fr 1fr;
  grid-gap: 0.8vw;
  height: 40vh;
  margin-bottom: 5vh;
}

.red {
  background-color: var(--red);
}

.green {
  background-color: var(--green);
}

.black {
  background-color: var(--black);
  display: grid;
}

.blue {
  background-color: var(--blue);
}

.yellow {
  background-color: var(--yellow);
}

.white {
  background-color: var(--white);
  display: flex;
  box-size: border-box;
}

.circle {
  height: 105px;
  width: 105px;
  border-radius: 50%;
  background-color: var(--black);
  margin: auto;
}

.wl {
  align-self: center;
  justify-self: start;
  height: 13vw;
  width: 15vh;
}

.wb,
.wt {
  width: 13vw;
  height: 15vh;
}

.wb {
  align-self: end;
  justify-self: center;
}

.wt {
  align-self: start;
  justify-self: center;
}

#info {
  display: grid;
  grid-template-columns: 2fr 2fr 1.4fr;
  grid-column-gap: 3vw;
}

#logo {
  display: grid;
}

h1 {
  font-size: 5em;
  transform: rotate(-90deg);
  align-self: center;
  justify-self: end;
}

#about {
  background-image: linear-gradient(
    var(--grey) 35%,
    var(--white) 35%,
    var(--white) 65%,
    var(--green) 65%
  );
}

#about div {
  background-color: var(--white);
  padding: 5%;
  width: 50%;
  margin: 15% auto;
  font-size: 14px;
  text-align: justify;
  word-wrap: break-word;
  hyphens: auto;
}

#about h2 {
  margin: 0;
}

#distributors {
  display: grid;
  font-size: 14px;
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
}

ul li:last-child {
  padding-bottom: 1vh;
}

img {
  align-self: end;
}

/* Media Queries */

@media (min-width: 1600px) {
  
  
  
  #info {
    grid-template-columns: 1fr 1fr 1fr;
  }

  h1 {
    transform: rotate(0deg);
  }

  .white {
    background-color: transparent;
    width: 100%;
    height: 100%;
  }

  .white .circle {
    background-color: var(--white);
  }
}

@media (max-width: 840px) {
  .white {
    background-color: transparent;
    width: 100%;
    height: 100%;
  }

  .white .circle {
    background-color: var(--white);
  }
}

@media (max-width: 930px) {
  #about div {
    width: 70%;
  }
}

@media (max-width: 700px) {
  #info {
    grid-template-columns: 1fr 2fr;
    grid-gap: 0;
  }

  #about div {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }

  #distributors {
    grid-row: 2;
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    margin-top: 5vh;
  }

  img {
    grid-column: 2;
  }

  #distributors ul {
    grid-row: 1;
  }
}

@media (max-width: 600px) {
  #blocks {
    grid-template-rows: 1fr 1fr 1fr;
  }

  .circle {
    height: 50px;
    width: 50px;
  }

  #blocks div:nth-child(7),
  #blocks div:nth-child(8),
  #blocks div:nth-child(9) {
    display: none;
  }
}

@media (max-width: 500px) {
  #blocks {
    margin-bottom: 0;
  }

  #info {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #logo {
    grid-row: 1;
  }

  h1 {
    transform: rotate(0deg);
  }

  #about {
    grid-row: 2;
    width: 100%;
  }

  #distributors {
    grid-row: 3;
    grid-column: 1 / 2;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    margin-top: 5vh;
  }

  img {
    grid-column: 1;
  }

  #distributors ul {
    grid-row: 2;
  }
}

@media (max-width: 500px) and (max-height: 400px) {
  #blocks,
  #about,
  #distributors {
    display: none;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  h1 {
    font-size: 4em;
    margin: auto;
  }

  #l,
  #v {
    color: var(--red);
  }

  #i {
    color: var(--green);
  }

  #t,
  #i-2 {
    color: var(--blue);
  }

  #t-2 {
    color: var(--green);
  }
}

@media (max-height: 700px) and (min-width: 501px) {
  body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    overflow: hidden;
    margin: 0;
  }

  #blocks,
  #info {
    height: 100vh;
  }

  #info {
    grid-template-columns: 1fr 1fr 1fr;
  }

  #logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #about {
    display: flex;
  }

  #about div {
    width: 100%;
    align-self: center;
  }

  #distributors ul {
    display: none;
  }

  img {
    align-self: center;
  }
}

@media (max-height: 700px) {
  .white {
    background-color: transparent;
    width: 100%;
    height: 100%;
  }

  .white .circle {
    background-color: var(--white);
  }
}


@media (max-height: 700px) and (max-width: 1600px) and (min-width: 500px) {
  #about,
  #distributors {
    display: none;
  }

  #info {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  h1 {
    font-size: 5em;
    margin: auto;
    transform: rotate(0);
  }

  #l,
  #v {
    color: var(--red);
  }

  #i {
    color: var(--green);
  }

  #t,
  #i-2 {
    color: var(--blue);
  }

  #t-2 {
    color: var(--green);
  }
}



@media (max-width: 1440px) and (max-height: 805px) {
  body {
    margin: 0;
  }
}

Comments