html & css [display: flex;] 활용+

<!DOCTYPE html>
<head>
    <title>Gradient</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div class="header">
        <h1>The Best Colors</h1>
        <div class="quad">
            <div class="box">
                <div class="cube biggest a">
                    <div class="cube"><h2>Tomato <br> #FF6347</h2></div>
                </div>
                <div class="cube biggest b">
                    <div class="cube"><h2>Teal <br> #008080</h2></div>
                </div>
            </div>
            <div class="box">
                <div class="cube biggest c">
                    <div class="cube"><h2>Burlywood <br> #DEB887</h2></div>
                </div>
                <div class="cube biggest d">
                    <div class="cube"><h2>Thistle <br> #D7BFD7</h2></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

body{
    background-color: gray;
}
h1{
    text-align: center;
}
.quad{
    width: 500px;
    height: 800px;
    margin: 0px auto;
    
}
.box{
    width: 500px;
    height: 400px;
    display: flex;
    justify-content: space-evenly ;
}
.cube{
    background-color: white;
    margin-top: 30px;
    width: 200px;
    height: 130px;
}
.biggest{
    background-color: tomato;
    border: 5px solid white;
    width: 200px;
    height: 370px;
    margin-top: 15px;
    
}
.b{
    background-color: teal;
}
.c{
    background-color: burlywood; 
}
.d{
    background-color: thistle;
}
h2{
    margin-left: 10px;
    line-height: 60px
}

티스토리툴바