Dashboard Temp Share Shortlinks Frames API

HTMLify

flexbox
Views: 380 | Author: light 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    body{
    background-color: whitesmoke;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}
header{
    background-color: aliceblue;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      
      
}
.content{
           display: block;
           padding: 10px;
           border-style: solid;
           border-color: #333;
           background-color: #f4f4f4;
           margin: 8px;
           border-radius: 10px ;
           /*-webkit-border-radius:;
           -moz-border-radius: 10px ;
           -ms-border-radius: 10px ;
           -o-border-radius: 10px ;
           -webkit-border-radius: 10px ;
} */
.container{
    border-style: solid;
    color: white;
    border-color: #333;
    margin: 12px;
    border-radius: 10px ;
}
.box{
    width: 150px;
    height: 150px;
    font-size: 4rem;
    text-align: center;
    border-radius: 10px;
    /* -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px; */
}
#box1{
    background-color: hsl(0, 100%, 70%);
}
#box2{
    background-color: hsl(60, 100%, 75%);
}
.box{
    background-color: hsl(84, 100%, 74%);
}
#box4{
    background-color: hsl(199, 100%, 69%);
}
   </style>
</head>
<body>
    <header>
        <h1>
            FLEXBOX
        </h1>
    </header>
    <nav>

    </nav>
    <main>
        <div class="content">
            <h2>
                What is flexbox?
            </h2>
            <p>
                Flexbox is short for the Flexible Box Layout module.  <br>

Flexbox is a layout method for arranging items in rows or columns. <br>

Flexbox makes it easier to design a flexible responsive layout structure, without using float or positioning. <br>  
    Remember flexbox is not for flexing. <br>
            </p>

             <div class="container">
                <div class="box" id="box1">1</div>
                <div class="box" id="box2">2</div>
                <div class="box" id="box3">3</div>
                <div class="box" id="box4">4</div>
             </div>
        </div>

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

Share this file: