Untitled

avatar
unknown
plain_text
3 years ago
3.4 kB
4
Indexable
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CW4</title>
    <style>
        .container{
            display: flex;
            justify-content: center;
            margin-top: 20px;
           
        }
        .main {
            background-color: black;
            color: white;
            width: 600px;
           
        }

        header,
        .row {
            display: flex;
            padding-top: 8px;
            padding-bottom: 10px;
            /* aligns all child elements (flex items) in a row */
        }

        .col {
            flex: 1;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;

            /* distributes space on the line equally among items */
        }

        .imag {
            width: 30px;
            height: 30px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <section class="main">
            <header>
                <div class="col"><img class="imag" src="Flag-South-Korea.webp" alt=""></div>
                <div class="col" style=margin:10px;>TEAM STATS</div>
                <div class="col"><img class="imag" src="Flag_of_Iran.svg.png" alt=""></div>
            </header>
            <div class="row">
                <div class="col">13</div>
                <div class="col">Shots</div>
                <div class="col">16</div>
            </div>
            <div class="row">
                <div class="col">6</div>
                <div class="col">Shots on Target</div>
                <div class="col">8</div>
            </div>
            <div class="row">
                <div class="col">49%</div>
                <div class="col">Possession</div>
                <div class="col">51%</div>
            </div>
            <div class="row">
                <div class="col">429</div>
                <div class="col">Passes</div>
                <div class="col">444</div>
            </div>
            <div class="row">
                <div class="col">82%</div>
                <div class="col">Pass acuracy</div>
                <div class="col">84%</div>
            </div>
            <div class="row">
                <div class="col">10</div>
                <div class="col">Fouls</div>
                <div class="col">3</div>
            </div>
            <div class="row">
                <div class="col">1</div>
                <div class="col">Yellow cards</div>
                <div class="col">0</div>
            </div>
            <div class="row">
                <div class="col">0</div>
                <div class="col">Red cards</div>
                <div class="col">0</div>
            </div>
            <div class="row">
                <div class="col">1</div>
                <div class="col">Offsides</div>
                <div class="col">1</div>
            </div>
            <div class="row">
                <div class="col">9</div>
                <div class="col">Corners</div>
                <div class="col">8</div>
            </div>
        </section>
    </div>

</body>

</html>
Editor is loading...