Untitled

<!doctype html>
<html lang="is">
  <head>
    <meta charset="utf-8">
    <title>Verkefni 5</title>
    <link href="https://fonts.googleapis.com/css?family=Lato|Merriweather" rel="stylesheet">
    <link rel="stylesheet" href="styleguide.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <section>
        <h2>Fyrirsagnir &amp; texti</h2>

        <h1 class="heading heading--one">Stór fyrirsögn</h1>
        <h2 class="heading heading--two">Milli fyrirsögn</h2>
        <h3 class="heading heading--three">Minni fyrirsögn</h3>

        <div class="sg-example">
          <p class="text">
            Texti í meginmáli sem inniheldur eitthvað, t.d. lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales sed mi sed porttitor. Curabitur dolor ante, aliquet id interdum auctor, luctus ac urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin a dictum metus, non aliquam justo. Vivamus nulla nisl, ultrices eu odio non, consequat faucibus justo. Phasellus magna dui, faucibus sit amet massa ullamcorper, pellentesque bibendum lorem. Ut tincidunt lobortis sollicitudin. Suspendisse potenti. Pellentesque augue sem, accumsan eu pulvinar sed, fringilla nec nunc. Pellentesque tempor vel libero faucibus egestas. Nunc cursus nunc enim, eget tristique libero tincidunt eu. Sed eget est a ex maximus posuere. Morbi gravida cursus ipsum, mattis gravida diam iaculis id.
          </p>
        </div>
      </section>

      <section>
        <h2>Takkar</h2>
        <div class="sg-example">
          <button class="button">Venjulegur takki</button>
          <button class="button">Venjulegur takki með rosalega löngum texta</button>
          <button class="button button--inverted">Snúinn takki</button>
          <button class="button button--disabled" disabled>Óvirkur takki</button>
          <a href="#" class="button">anchor element sem takki</a>

          <!-- í raunveruleikanum ættum við samt ekki að gera svona -->
          <span role="button" class="button">span sem takki</span>
        </div>
      </section>

      <section>
        <h2>Kort</h2>

        <div class="card">
          <div class="card__image">
            <img src="https://via.placeholder.com/550x250" alt="" class="card__img">
          </div>
          <div class="card__content">
            <h3 class="card__heading">Kort með mynd</h3>
            <p class="card__text">Texti sem þýðir ekki neitt og er bara hérna til þess að hafa eitthvað. Hvað eigum við að fjalla um? Ég veit það ekki.  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales sed mi sed porttitor. Curabitur dolor ante, aliquet id interdum auctor, luctus ac urna.</p>
            <button class="button">Lesa meira</button>
            </div>
          </div>
        </div>

        <hr>

        <div class="card">
          <div class="card__content">
            <h3 class="card__heading">Kort án myndar</h3>
            <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales sed mi sed porttitor. Curabitur dolor ante, aliquet id interdum auctor, luctus ac urna.</p>
            <button class="button">Lesa meira</button>
            </div>
          </div>
        </div>

        <hr>

        <div class="card">
          <div class="card__image">
            <img src="https://via.placeholder.com/550x250" alt="" class="card__img">
          </div>
          <div class="card__content">
            <h3 class="card__heading">Kort með rosalega rosalega rosalega rosalega rosalega rosalega löngum titli ogorðisemhefurenginbilíþvíhvaðefþaðgerist</h3>
            <p class="card__text">Texti sem þýðir ekki neitt og er bara hérna til þess að hafa eitthvað. Hvað eigum við að fjalla um? Ég veit það ekki.  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales sed mi sed porttitor. Curabitur dolor ante, aliquet id interdum auctor, luctus ac urna.</p>
            <button class="button">Lesa meira</button>
            </div>
          </div>
        </div>

        <hr>

      </section>
    </main>
  </body>
</html>
///////////////////////////


/* setjum box-sizing: border-box; á allt */
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;

 /* fjarlægjum margin og padding */
 margin: 0;
 padding: 0;
}

/* TODO útfæra verkefni 5 */

.heading {
}

 .heading--one {
   font-size: 3em;
 }

 .heading--two {
   font-size: 2em;
 }

 .heading--three {
   font-size: 1em;
 }
 .text {
   font-family: "Lato";
   line-height: 1.5;
   font-size: 1em;
 }
.button{
 width: 100%;
 max-width: 16em;

 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 5px;
 padding-right: 5px;

 border: 1px;
 border-color: #666;
 border-radius: 4px;

 font-family: "Lato";
 color: #eee;
 background-color: #666;
 font-size: 1em;

 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
 cursor: pointer;
}
section div button.button:hover {
 background-color: #333;
}
section div button.button--inverted {
 color: #666;
 background-color: #eee;
}
section div button.button--inverted:hover {
 color:#333;
 background-color: #eee;
}
section div button.button--disabled {
   color: #999;
   background-color: #eee;
   border-color: #eee;
}
section div button.button--disabled:hover {
   color: #999;
   background-color: #eee;
   border-color: #eee;
}
.card {
 max-width: 800px;
 min-width: 200px;
 object-fit: cover;
 height: inherit;


 display: list-item;

 background-color: #eee;
 box-shadow: 20px,200px,#000;

}
img{
 min-width: 12.5em;
 width: 100%;


}
@media (min-width: 50em) {
  img{
    min-width: 25em;
    object-fit: fill;
    height: 100%;
  }
  .card {
  max-width: 800px;
  min-width: 200px;
  overflow: hidden;
  border-radius: 3px;
  background-color: #eee;
  display: inline-flex;
}

}
.card__content {
 padding: 1.250em;
 margin: auto;
 overflow: hidden;
 word-wrap: break-word;
}
.card__heading {
 font-family: "Merriweather";
 font-size: 1.5em;
 margin-bottom: 0.938em;
}
p.card__text{
 margin-bottom: 1.875em;

}