Skip to content

Instantly share code, notes, and snippets.

@Lucas-Severo

Lucas-Severo/index.html

Created February 24, 2020 14:16
Show Gist options
  • Save Lucas-Severo/4f43b404e9047fdd53b997b77daa215d to your computer and use it in GitHub Desktop.
Save Lucas-Severo/4f43b404e9047fdd53b997b77daa215d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Lucas-Severo created this gist Feb 24, 2020.
    19 changes: 19 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Teste</title>
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <div class="maior"></div>
    <div class="menor">
    <div class="img"></div>
    <div class="img"></div >
    <div class="img"></div>
    <div class="img"></div>
    </div>
    </body>
    </html>
    36 changes: 36 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    * {
    padding: 0;
    margin: 0;
    }

    html, body {
    height: 100%;
    padding: 20px;
    background-color: lightgray;
    }

    body {
    display: flex;
    justify-content: space-around;
    }

    .maior {
    width: 52%;
    height: 60%;
    background-color: gray;
    }

    .menor {
    width: 45%;
    height: 60%;
    background-color: gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }

    .img {
    width: 49%;
    height: 48%;
    background-color: yellow;
    }