Day3-30day30sites

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      box-sizing: border-box;
      height: 100%;
      margin: 0;
    }

img {
      width: 100%;
      object-fit: cover;
      height: 540px;
    }

.slide-container {
      position: relative;
    }

.mySlides {
      display: none;
    }

.h1-title {
      padding: 30px 5px 20px 5px;
      text-align: center;
      font-size: 2.5em;
    }

.h1-sub {
      text-align: center;
      font-size: 1.5em;
      padding: 0 5px 20px 5px;
    }

.sub-title {
      text-align: center;
      font-size: 1.5em;
      bottom: 8px;
      width: 100%;
      position: absolute;
      padding: 10px 12px;
      color: white;
    }
    .main-container{
      margin: 40px 10px;
      display: flex;
      justify-content:center;
    }

.main-one,
    .main-two {
      width: 600px;
      padding: 16px;
      background-color: rgba(211, 211, 211, 0.7);

}
    .main-1{
      display: flex;
      justify-content:flex-end;
      margin-right: 10px;
    }
    .main-2{
      display: flex;
      justify-content:flex-start;
    }
    .main-img {
      object-fit: cover;
      height: 260px;
    }
    #map{
      width:1200px;
      height:600px;
      margin:40px auto;
    }
    footer{
      padding:40px;
      text-align: center;
      background-color: #484A47;
      color:white;
    }
  </style>

</head>

<body>
  <div class="h1-title">DALIAN</div>
  <div class="h1-sub">A charming city by the sea</div>
  <div class="slide-container">
    <div class="mySlides">
      <img src="https://www.azamaraclubcruises.co.uk/sites/default/files/heros/dalian-china-1800x1000.jpg">
      <div class="sub-title">Cross-sea Bridge</div>
    </div>
    <div class="mySlides">
      <img src="https://robbreportedit.files.wordpress.com/2014/07/exterior1.jpg">
      <div class="sub-title">Castle</div>
    </div>
    <div class="mySlides">
      <img src="https://i.pinimg.com/originals/c0/fa/90/c0fa90a6a7133fc8a17637b63c4d1876.jpg">
      <div class="sub-title">Zhongshan Square</div>
    </div>
  </div>
  <div class="main-container">
    <div class="main-1">
      <div class="main-one">
        <img class="main-img" src="https://qph.ec.quoracdn.net/main-qimg-c6b938853f2b2cef0a61be88ca36a9da.webp">
        <div class="main-capture">
          <p>Sea food. Dalian is famous by it's rich seafood. All year round, you could find almost everything you want and the seafood
            you may never know. They are so fresh that there are so many ways to cook them: smoke, boil, fry, grill, marinate, pickle,
            steam,  stir fry, deep fry, saute or stew.
          </p>
        </div>
      </div>
    </div>
    <div class="main-2">
      <div class="main-two">
        <img class="main-img" src="https://i.pinimg.com/600x315/94/79/ab/9479ab4369822a36449092db4386e8dd.jpg">
        <div class="main-capture">
          <p>Tiger Beach Ocean Park stretches over 4,000 meters on the China coastline!
          </p>
        </div>
      </div>
    </div>
  </div>

<div id="map">
  </div>
</body>
<footer>
  City of Dalian @ 2017
</footer>
<script>
  var slideIndex = 0;

</html>