JSFiddle - React, Tailwind, and code Playground

by suefeng

HTML

<body>
  <div class="about">
    <div class="blurb">Stunning Imagery and resourceful imaging
    </div>

    <div class="article">
      <div id="container">
        <img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
      </div>
      <div class="heading">Architectural Photography
      </div>
      <p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
        sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number
        and the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
      </p>
    </div>
    <div class="article">
      <div id="container">
        <img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
      </div>
      <div class="heading"> Aerial Services
      </div>
      <p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
      <p>Registered CAA pilot with commercial flight permissons</p>
      <p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
      <p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
      <p>Agronomy - Crop analysis, multispectral imaging</p>
      <p>&nbsp;</p>

    </div>
    <div class="article-centre">
      <div id="container">
        <img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg"...

CSS

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.footer a[href*="mailto"] {
  word-break: break-all;
}

p {
  font-family: HindRegular;
  font-size: 13px;
  font-weight: normal;
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

.article {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-right: 4%;
  color: #999;
}

.article-right {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-left: 4%;
  color: #999;
}

.article-centre {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-left: 2%;
  padding-right: 2%;
  color: #999;
}

.blurb {
  font-family: HindMedium;
  font-size: 24px;
  padding-bottom: 100px;
  color: #999;
}

.about {
  font-family: HindMedium;
  font-size: 13px;
  min-width: 800px;
  text-align: left;
  width: 100%;
  overflow: hidden;
  margin-bottom: 180px;
}

.heading {
  font-family: HindMedium;
  font-size: 24px;
  color: #666;
  margin-top: 1em;
}

.copyright {
  float: left;
}

.contact {
  float: right;
  font-family: HindRegular;
  color: #999;
}

#container {
  width: 100%;
}

#container img {
  width: 100%;
}

h8 {
  font-family: HindRegular;
  color: #999;
  padding-right: 5px;
  font-style: normal;
}

.footer {
  background-color: #FFF;
  width: 100%;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  height: 140px;
  display: block;
  overflow: hidden;
  position: fixed;
  bottom: 0;
}

a {
  border-bottom: 1px solid #219edf;
  padding: 0;
  margin: 0 0 2px 0;
  clear: both;
  color: #666;
  text-decoration: none;
  font-weight: normal;
  outline: none;
  transition: all .15s ease;
}

.services {
  width: 100%;
}

a:hover {
  text-decoration: none;
  color: #999;
  border-bottom: 1px solid #999;
}

#details {
  color: #666
}

#header {
  color: #999;
}

JavaScript

(function() {

  var img = document.getElementById('container').firstChild;
  img.onload = function() {
    if (img.height > img.width) {
      img.height = '100%';
      img.width = 'auto';
    }
  };

}());