Scribd Logo
Upload

Welcome to Scribd!

  • Kodiranje

    Uploaded by

    Zorica Aničić
    15 views8 pages

    Original Title

    kodiranje

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views8 pages

    Kodiranje

    Uploaded by

    Zorica Aničić

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    !

    DOCTYPE html>

    <html>

    <head>

    <title>El Amigo Pub + Grill</title>

    <link href="style-for-index.css" rel="stylesheet" />

    </head>

    <body>

    <div class="container">

    <div class="box-1">

    <img src="images/logo.png" alt="Logo" />

    </div>

    <div class="box-2">

    <h1>The Best Craft Beer in Spain!</h1>

    <p>

    Bienvenido, amigos! We are a completely fictional location. But that doesn't mean we can't
    imagine that we

    have the best beer in Spain!

    </p>

    </div>

    <div class="box-3">

    <h2>Make a Reservation</h2>

    <p>Get your spot before somebody else does!</p>

    <form class="form">

    <div class="form-group">
    <label for="contact_name">Your Name</label>

    <input type="text" id="contact_name" placeholder="John B. Goode" class="form-input" />

    </div>

    <div class="form-group">

    <label for="contact_email">Your Email</label>

    <input type="email" id="contact_email" placeholder="your@email.com" class="form-input" />

    </div>

    <div class="form-group">

    <label for="your_time">Reservation Time</label>

    <input type="text" id="your_time" placeholder="Tomorrow at 10pm" class="form-input" />

    </div>

    <input type="submit" value="Reserve" />

    </form>

    </div>

    <div class="footer">

    <p>&copy;2020 El Amiga</p>

    </div>

    </div>

    </body>

    </html>
    *{

    box-sizing: border-box;

    body {

    font-family: sans-serif;

    color: white;

    background-color: black;

    background-image: url('./images/background.jpg');

    background-repeat: no-repeat;

    background-position: top center;

    padding: 40px;

    .container {

    width: 600px;

    margin: 0 auto;

    .box-2 {

    background: url('./images/transparent_white.png') top left repeat;

    padding: 0px;

    border: 10px solid black;


    color: #333;

    margin: 10px 0;

    font-family: "Helvetica Neu", Helvetica, Arial, sans-serif;

    text-align: center;

    .box-2 h1 {

    margin: 0 0 10px;

    padding: 0 0 10px;

    font-size: 40px;

    font-weight:normal;

    display: block;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizelegibility;

    .box-2 p {

    font-size: 20px;

    .box-3 {

    margin: 20px 0;

    border: 10px white solid;


    display: flex;

    align-items: center;

    flex-direction: column;

    background: url('./images/transparent_white.png') top left repeat;

    padding: 20px;

    color: #333;

    font-family: "Helvetica Neu", Helvetica, Arial, sans-serif;

    .box-3 h2{

    font-size: 30px;

    font-weight: normal;

    margin: 0 0 10px;

    padding: 0 0 10px;

    .box-3 p{

    font-size: 20px;

    margin: 0 0;

    .form {

    width: 300px;

    }
    .form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 10px;

    margin-top: 20px;

    .form-input {

    height: 36px;

    padding: 5px;

    font-size: 22px;

    font-style: italic;

    font-family: Georgia, Times, serif;

    border: none;

    .form label{

    text-transform: uppercase;

    background: #333;

    font-size: 11px;

    font-weight: bold;

    padding: 5px;

    color: white;

    }
    .form input[type="submit"]{

    background: #333;

    color: white;

    cursor: pointer;

    width: 300px;

    padding: 5px;

    margin: 0 0 10px;

    border: none;

    font-size: 22px;

    font-family: Georgia, Times, serif;

    font-style: italic;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizelegibility;

    .footer{

    font-size: 20px;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-weight: lighter;

    text-align: center;

    padding: 40px;

    color: #333;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizelegibility;

    color: white;
    padding: 20px;

    margin: 20px 0;

    You might also like