<html>
  <head>
    <title>Kahve Projesi</title>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Raleway:100,200,300,400,500,600,700,800,900"
    rel="stylesheet">
  </head>

    <body>

      <div class="cover">
        <div class="class">

      <h1>Bağımlılık Ağaçları</h1>
        <p>
        Her gün kokusuyla, tadıyla ve her birimizin hayatına dokunduğu farklı farklı etkileriyle kahve çoğumuz için vaz geçilmez bir tutku. Bu tutkuyu üreten ağaçları ve meyvelerini tanıyor musunuz?
        </p>

        <div class="cover-content">
      <h2>Arabica</h2>
        <p>
          Yer seviyesinden 800 - 2000 metre yükseklikte yetişen bu kahve cinsi yılda 5kg meyve, bu meyveden ise 1kg kahve çekirdeği üretir. Diğer kahve ağaçlarına göre %1-2 oranıyla daha az kafein içerir ama aromatik ve lezzetlidir. Diğerlerine göre daha narin olan bu türün yetiştirilmesi de zor ve maliyetlidir.
        </p>
        </div>

        <div class="cover-content">
      <h2>Robusta</h2>
        <p>
          Çoğunlukla Vietnam'da yetiştirilen ve yer seviyesinden 600 metre yükseliğe kadar yetişebilen bu kahve ağacı, Arabica'ya göre daha dayanıklıdır. Yetişmesi de nispeten daha kolay olan meyve çekirdeklerinin kafein oranı %2-5 arasında değişir ancak aroması azdır. Daha asidik olması nedeniyle tadı acımtraktır.
        </p>
        </div>
        <div class="cover-content">
      <h2>Liberica</h2>
        <p>
          Malezya ve Batı Afrika'da yetişen bu kahve türü doğa koşullarına daha dayanıklı olmakla beraber ticari anlamda daha az değerlidir. Geniş yaprakları ve büyüklüğü nedeniyle yıllık verdiği meyve ve çekirdek oranının fazlalığına rağmen çok talep edilmemesinin nedeni kafein ve aromasının tatminkar olmamasıdır.
        </p>
        </div>  
        </div>
        </div>
    </body>
</html>
body {
  font-family: Raleway;
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
  width:100%;
  height:100%;      
  }

h1, h2, p {
  text-align: center;
  }

h1 {
  color: #ffffff;
  font-size: 80px;
  letter-spacing: 0.1em;
  }

h2 {
  color: #ffffff;
  }

 p {
  color: #DEDEC2;
  letter-spacing: 0.08em;
  }

.cover {
  background: url("http://161.35.151.198/media/images/kahve.jpg")
    no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 10%;
  padding-bottom:10%;
  }

.class {
  width: 75%;
  height: auto;
  position: absolute;
  left:0;
  right:0;
  margin-bottom:10%;
  margin:0 auto;
  }

.cover-content {
  box-sizing: border-box;
  background-color: rgba(34, 4, 0, 0.7);
  position: relative;
  text-align: center;
  width: 30%;
  height: auto;
  margin: 3px;
  padding: 0px;
  display: inline-table;
  padding: 30px 10px 30px 10px;
  margin-top: 15%;
  }

.overlay-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(259, 67, 95, 0.7);
  overflow:hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.