Flex öğrendiğim 2 gün ve tasarımım

Merhabalar. Daha 2-3 gün oldu CSS Flexbox özelliğini öğrenmeye başladım. Tabi Tayfun abimin sayesinden yapıyorum bunları. Bu da yapmış olduğum basit bir tasarım kodları. Hatalarım var mı kodlarda?

Tasarım tamamen bana ait. Copy Paste falan yapmadım gerçekten.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
}
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}
html,
body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
}
.container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    height: 100%;
}
.left-side {
    flex: 2;
    background: #1f1e1f;
    padding: 70px;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    overflow: auto;
}
.right-side {
    flex: 1;
    background: #312f31;
}
.login {
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.login input {
    border: 0;
    background: #1f1e1f;
    margin-bottom: 10px;
    outline: none;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
.actions {
    display: flex;
    justify-content: space-between;
}
.login .actions button {
    height: 48px;
    background: #ffeb37;
    color: #1f1e1f;
    width: 100%;
    border: none;
    cursor: pointer;
    width: 150px;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.card {
    background: #353435;
    width: 260px;
    height: 200px;
}

HTML Kodları

<!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>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="container">
            <div class="left-side">
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="right-side">
                <div class="login">
                    <input type="text" placeholder="Username">
                    <input type="text" placeholder="Password">
                    <div class="actions">
                        <button>Log In</button>
                        <button>Sign Up</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Flex öğrendiğim 2 gün ve tasarımım

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (1)