Claude Monet Tribute Page - freeCodeCamp

fcc.claude.monet.tribute

A simple page created for the assignment for freeCodeCamp course.
------


A [Pen](https://codepen.io/m3h0w/pen/BRbEPb) by [Michał](http://codepen.io/m3h0w) on [CodePen](http://codepen.io/).

[License](https://codepen.io/m3h0w/pen/BRbEPb/license).

index.html

<div class="container-fluid rounded">
  <div id="heading-container" class="row">
     <h1 id="heading" class="text-center">Claude Monet</h1>
    <div id="camera">
      <a href="http://www.claudemonetgallery.org/" target="_blank">
        <i class="icon-camera-retro icon-2x"></i>
      </a>
    </div>
  </div>
  <div id="row1" class="row">
    </div>
    <div id="row2" class="row">
    </div>
    <div id="row3" class="row">
    </div>
  </div>
</div>

script.js

$(document).ready(function(){
  var links = [
    "https://upload.wikimedia.org/wikipedia/commons/a/ac/Claude_Monet%2C_Fishing_Boats_Leaving_the_Harbor%2C_Le_Havre.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/1900_C.Monet_Japonski_mostek_w_Giverny..jpg/1280px-1900_C.Monet_Japonski_mostek_w_Giverny..jpg",
    "https://upload.wikimedia.org/wikipedia/commons/e/e2/Claude_Monet_-_The_Gare_Saint-Lazare%2C_Arrival_of_a_Train.jpg",
  "http://www.claudemonetgallery.org/80912/Impression--Sunrise-large.jpg",
  "http://www.claudemonetgallery.org/Water-Lilies.jpg",
  "http://www.claudemonetgallery.org/San-Giorgio-Maggiore-At-Dusk.jpg",
"https://upload.wikimedia.org/wikipedia/commons/6/67/Claude_Monet_La_Grenouill%C3%A9re.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Claude_Monet_-_1867_-_Garden_at_Sainte-Adresse.jpg/1280px-Claude_Monet_-_1867_-_Garden_at_Sainte-Adresse.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Claude_Monet_002.jpg/1280px-Claude_Monet_002.jpg"
];
  
  for(i=0; i<links.length; i++){
    var div = $('<div />', {
        "class": 'col-sm-4 thumb',
    });
    var img = $('<img />', { 
      id: "painting",
      src: links[i],
      class: "img-thumbnail"
    });
    img.appendTo(div);
    div.appendTo($("#row2"));
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

body {
  background-color: rgb(230,240,230);
  font-family: Gill Sans,Gill Sans MT,Calibri,sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26.4px;
}

#camera{
  position: relative;
  float: right;
}

.thumb {
  vertical-align: middle;
  text-align: center;
  margin-top: 20px;
  position: relative;
}

#heading {
   color: rgb(230,240,230);
  font-size: 10vw;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  margin-top: -5vw;
  margin-left: -3vw;
}

#heading-container {
  display: block;
}

.text-primary {
  color: rgb(240,245,240);
}

.rounded {
  border-radius: 10px;
  box-shadow: 0px 3px 3px #888888;
}

.container-fluid {
  background-color: rgb(170,188,190);
  margin: 50px;
  padding: 40px 50px 60px 50px;
}

#painting {
  display: inline;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width:100%;
  max-height:100%;
  z-index: 1;
  transition: 0s;
  vertical-align: middle;
}

#painting:hover {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 80vw;
  transition: 0s;
  box-shadow: 0px 5px 5px #888888;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />