﻿

body {
     background-color: #0cf;
     }

img {
    display: block;
    margin: auto;
    float: left ;
    height: 300px ;

    }

 h1
    {
    color: black;
    text-align: center;
    }
 h3
    {
    color: red;
    text-align: center;
    }

div
    {
    display: inline ; 
    margin: auto ;
    text-align: center;
    line-height: 1.0 ;
    }
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
            }       
            li {
                float: left;
                border-right:1px solid #bbb;
            }
            li:last-child {
                border-right: none;
                float: right ;
            }
            li a {
                display: block;
                color: red;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            li a:hover:not(.active) {
                background-color: #00af00;
            }
            
            .active {
                background-color: #00AF00;
            }



div.polaroid {
 
  
  float: left ;
  background-color: white; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
<!--   line-height: 1.0; -->
  padding: 10px;
  margin: 20px 20px 20px 20px ;
  display: inline;
  width: 350px;
}
 
div.polaroid2 {
  width: 150px; height: 450px;
  
  float: left ;
 background-color: white; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
<!--   line-height: 1.0; -->
  padding: 10px;
  margin: 20px 20px 20px 20px ;
  display: inline;
}

<!-- div.polaroid img:hover { -->
<!--    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); -->
<!--    color: green; -->
<!--    width: 150px; -->
<!--    height: 150px; -->
<!--    position: absolute; -->
<!--    left: 100px; -->
<!--    top: 100px; -->

}



div.container {
  text-align: center;
  line-height: 1.0;
  
 
}

div.layout{
    float: left ;
    style= width: 300px ;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    font-size: 20px;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}
