Action disabled: source

Gästbok

I kursen programmering 1 ska ni göra en gästbok, i denna kurs ska ni styla ett ex på markup för en gästbok.

Syfte

Uppgiften går ut på att lära sig styla en ”markup” som man inte får ändra. I första uppgiften för ni göra den layout ni själva vill och i den andra ska ni försöka göra så pixel och färg perfekt som möjligt. Ni ska validera er CSS innan ni skickar in att ni är klara. Ett annat syfte är att ni ska ha en färdig markup och CSS när ni kommer till denna uppgift i programmering 1 och att ni i den uppgiften bara behöver fokusera på funktion.

1. Gör en egen CSS till den markup du har fått. Kalla filerna för gbook1.html och CSS:n för gbook1.css
2. Gör en CSS som gör layouten så lik denna bild ni kan. Kalla filerna för gbook2.html och CSS:n för gbook2.css Tips! öppna bilden i ett bildbehandlingsprogram och plocka ut breder och färger, tex GIMP eller Krita. När det gäller fonter så duger det om ni använder er av sans-serif.

Nedan finns den markup ni ska utgå ifrån, i den markup:en får ni bara ändra ”gbook1.css” till ”gbook2.css”. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- iconic -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css"/>
  <link rel="stylesheet" href="gbook1.css"/>
  <title>Guestbook</title>
</head>
<body>
<div class="container">
 
  <div class="page-header">
    <h1>Guestbook</h1>
    <p>This is the guestbook</p>
  </div>
 
  <div class="jumbotron">
    <form method="post">
      <div class="form-row form-group">
        <div class="col">
          <input type="text" class="form-control" placeholder="First name" name="first_name">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Last name" name="last_name">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col">
          <input type="email" class="form-control" placeholder="EMail" name="email">
        </div>
        <div class="col">
          <input type="url" class="form-control" placeholder="URL" name="url">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col">
          <input type="text" class="form-control" placeholder="Message title" name="title">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col">
          <textarea placeholder="Please, write something in this guestbook!" class="form-control" rows="3" name="message"></textarea>
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col">
          <input type="submit" name="submit" class="btn btn-primary">
        </div>
      </div>
    </form>
  </div>
 
  <div class="gbook-items">
 
    <div class="card">
      <div class="card-header">
        eget nunc
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Aliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis. Sed ante. Vivamus tortor. Duis mattis egestas metus.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Modesta Squelch
            <a href="mailto:msquelch4r@zimbio.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="https://ibm.com/elit/proin/interdum/mauris/non/ligula/pellentesque.js"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-28 16:03:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        vel
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Nullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Rivy Greson
            <a href="mailto:rgreson9x@odnoklassniki.ru"><span class="oi oi-envelope-closed"></span></a>
            <a href="https://nsw.gov.au/nunc/nisl/duis/bibendum/felis/sed.png"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-28 04:36:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        dictumst etiam faucibus
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Duis mattis egestas metus. Aenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh. Quisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Anthony Lillow
            <a href="mailto:alillowo6@chron.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="http://purevolume.com/sem/praesent/id/massa/id.jsp"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-27 22:01:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        at velit eu
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Nullam molestie nibh in lectus. Pellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Sabina Rousby
            <a href="mailto:srousbyp@buzzfeed.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="https://smh.com.au/consequat.html"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-27 17:00:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        augue
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Aenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh. Quisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros. Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Reade Aliberti
            <a href="mailto:ralibertif9@netscape.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="http://marriott.com/sit.xml"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-27 01:20:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        duis at
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Vivamus tortor. Duis mattis egestas metus. Aenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh. Quisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Lane Tremellier
            <a href="mailto:ltremellierk6@wikispaces.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="https://meetup.com/odio/curabitur.png"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-26 13:46:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        integer
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus. Phasellus in felis.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Kris Scading
            <a href="mailto:kscadingmj@eepurl.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="http://slideshare.net/porta/volutpat/erat/quisque/erat.jsp"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-25 23:42:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        lacus purus aliquet
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Morbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem. Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum. In hac habitasse platea dictumst.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Cinda Taffley
            <a href="mailto:ctaffleyib@ucoz.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="https://weebly.com/nulla/nisl.json"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-25 12:40:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        magna vulputate
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Vestibulum rutrum rutrum neque. Aenean auctor gravida sem. Praesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Viole Elmore
            <a href="mailto:velmoreic@hibu.com"><span
              class="oi oi-envelope-closed"></span></a>
            <a href="https://github.io/ante.json"><span
              class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-24 15:45:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header">
        mauris
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Duis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus. Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero. Nullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum.</p>
          <footer class="blockquote-footer">
            <span class="oi oi-person"></span> Creigh Cudworth
            <a href="mailto:ccudworth9c@moonfruit.com"><span class="oi oi-envelope-closed"></span></a>
            <a href="http://dion.ne.jp/nulla.aspx"><span class="oi oi-external-link"></span></a>
            <br>
            <cite title="Date time">Posted: 2018-09-23 11:58:00</cite>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>
 
  <nav>
    <ul class="pagination justify-content-center">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
 
</div>
</body>
</html>