F2 меню Majestic

PavelKiryanov · 19 Июн 2024

Всем привет, не так давно начал заниматься Front-end разработкой, по тихоньку начинаю вливаться.
Хотелось бы услышать объективную критику по поводу данной штуки.
Да - просто, да - без JS, но я пока только начинаю, и хотелось бы понять на сколько в правильном направлении я иду.
Может быть и нечего проверять, я не знаю. В общем гляньте, дайте совет)

HTML:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/left_menu.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <title>F2 меню</title>
</head>
<body>
    <main>
        <img class="background_image"
            src="./image/1.jpg"
            alt=""/>   
            <div class="background_color_grey">
                <div class="box_up">
                    <img class="profile_img"
                    src="./image/profile.avif"
                    alt=""/>   
                    <ul class="login_global_text">
                        <li class="login_text">Логин</li>
                    </ul>
                    <ul class="up_text">
                        <li class="player_info_text player_name">Pavel Kiryanov</li>
                        <li class="player_info_text player_admin_level">3</li>
                    </ul>
                    <div class="secondary_menu">
                        <ul class="secondary_menu_list">
                            <li class="secondary_menu-item">
                                <span class="coins"><i class='bx bxs-coin-stack' ></i> 4000</span>
                            </li>
                            <li class="secondary_menu-item">
                                <button
                                class="secondary_menu-button menu_button"
                                ><i class='bx bxs-plus-circle'></i> Ввести код</button>
                            </li>
                            <li class="secondary_menu-item">
                                <button
                                class="secondary_menu-button menu_button"
                                ><i class='bx bxs-plus-circle'></i> Пополнить</button>
                            </li>
                            <li class="secondary_menu-item">
                                <p class="text_exit">Выход</p>
                                <button
                                class="secondary_menu-button esc_button"
                                >Esc</button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box_left">
                    <ul class="main_menu">
                        <div class="main_menu_item player_info"><i class='bx bx-user-circle' ></i> Персонаж<i class='bx bx-chevron-down' ></i></div>
                        <div class="main_menu_item player_animation"><i class='bx bx-color' ></i> Анимации<i class='bx bx-chevron-down' ></i></div>
                        <div class="main_menu_item player_question"><i class='bx bx-error-circle' ></i> Обращения<i class='bx bx-chevron-right' ></i></div>
                        <div class="main_menu_item player_market"><i class='bx bx-store-alt' ></i> Магазин<i class='bx bx-chevron-down' ></i></div>
                        <div class="main_menu_item player_game"><i class='bx bx-dice-6' ></i> Мини-игры<i class='bx bx-chevron-down' ></i></div>
                        <div class="main_menu_item player_pass"><i class='bx bx-circle-three-quarter' ></i> Сезонный пропуск<i class='bx bx-chevron-down' ></i></div>
                        <div class="main_menu_item player_stats"><i class='bx bx-sort-up' ></i> Игровая статистика <i class='bx bx-chevron-down' ></i></div>
                        <div class="main_menu_item player_rules"><i class='bx bx-spreadsheet' ></i> Правила сервера<i class='bx bx-chevron-down' ></i></div>
                        <div class="main_menu_item player_faq"><i class='bx bx-news' ></i> FAQ <i class='bx bx-chevron-right' ></i></div>
                        <div class="main_menu_item player_settings"><i class='bx bx-cog' ></i> Настройки<i class='bx bx-chevron-right' ></i></div>
                    </ul>
                </div>
            </div>
        </main>
</body>
       
</html>
   
</html>

CSS:

global.css

body{
    margin:0;
    font-family:'Lora';
    display: flex;
}
.background_color_grey{
    background-color:rgba(30, 30, 30, 0.7);
    width:100vw;
    height:100vh;
    position:absolute;
}
.background_image{
    width: 100vw;
    height: 100vh;
}
main{
    display:flex;
    width:100vw;
    height:100vh;
}

CSS:

header.css

.box_up{
    display:flex;
    height:55px;
    width:100%;
    background-color:rgba(20, 20, 20);
}
.up_text{
    display:flex;
    flex-wrap:wrap;
    column-gap:5px;
    padding-left:0px;
    margin: 6px 0px 0px 0px;
    flex-grow: 8;
}

.player_info_text{
    color:#ffffff;
    display:inline-flex;
    align-items:center;
    font-size:12px;
    letter-spacing:1.2px;
    font-weight:600;
    z-index: 1;

}
.player_admin_level{
    background-color:rgba(255, 193, 18);
    border-radius:50%;
    padding-inline: 8px;
    line-height: 2;
    margin: 16px 0;

}
.login_text{
    color:rgba(227, 227, 227);
    position:absolute;
    display:inline-flex;
    font-size:10px;
    font-weight:300;
    z-index: 1;
}
.profile_img{
    border-radius:50%;
    width:40px;
    height:40px;
    margin: 8px 0px 5px 10px;
    z-index: 1;
}
.login_global_text{
    margin: 14px 0px 0px 0px;
    padding-left:10px;
}

/*Правый верхний текст*/
.secondary_menu{
    flex-grow: 1;
}
.secondary_menu_list{
    display:flex;
    justify-content:center;
    column-gap:20px;
    margin: 0;
}
.secondary_menu-item{
    display:flex;
    color:white;
}
.text_exit{
    font-size: 16px;
}
.secondary_menu-button{

    color:white;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:7px;
    background-color:rgba(5, 5, 5);
    border:none;
}

.esc_button{
    background-color: white;
    color: black;
    padding: 0px 10px 0px 10px;
    margin: 13px 0px 10px 13px;
    border-radius: 5px;
    transition-duration: 0.2s;

}
.menu_button{
    background-color: rgba(38, 38, 38);
    padding: 0px 20px 0px 20px;
    margin: 13px 0px 10px 0px;
    transition-duration: 0.2s;
}
.bxs-plus-circle{
    margin-right: 5px;
}
.coins{
    position: relative;
    top: 18px;
    right: 10px;
}

.menu_button:hover{
    background-color:rgba(120, 120, 120);
}
.esc_button:hover{
    background-color:rgb(222, 222, 222);

}

CSS:

left_menu.css

.box_left{
    width: 210px;
    height: 100vh;
    background-color: rgba(20, 20, 20);
    position: relative;
    bottom:71px;
}
.main_menu{
    z-index: 1;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
}
.main_menu_item{
    position: relative;
    z-index: 1;
    color:rgba(227, 227, 227);
    top:80px;
    font-size: 14px;
    margin-bottom: 30px;
    transition-duration: 0.2s;
}

.main_menu_item:hover{
    text-decoration:underline;
    color: rgba(120, 120, 120);
    font-size: 14.5px;
    cursor: pointer;
}

.bx-chevron-down,
.bx-chevron-right{
    position: absolute;
    right: 10px;
}

Jerry (ChatGPT) · 19 Июн 2024

Код выглядит достаточно сбалансированным для начального уровня разработки. Использование чистого HTML и CSS без JS - хороший способ начать. Рекомендации:

1. Попробуйте улучшить структуру CSS файлов, чтобы было легче найти нужные стили.
2. Проверьте совместимость с различными браузерами.
3. Изучите лучшие практики HTML и CSS, такие как семантическая разметка или методологии стилей (например, BEM).
4. Продолжайте практиковаться и экспериментировать - это поможет вам стать более опытным разработчиком.

PavelKiryanov · 19 Июн 2024

Inoi · 19 Июн 2024

position:absolute - зло
я бы не разбивал одну страницу на три ксски, это только больше геморроя создаёт, если ты не используешь фреймворк какой-нибудь и модули, типа как в реакте

это ревью от не верстальщика чиста

PavelKiryanov · 19 Июн 2024

Может быть использовал margin где можно было не использовать его? Или использование не является критикой? (много видео смотрел, его практически не используют.)

Поиск

F2 меню Majestic

PavelKiryanov

Новый участник

Jerry (ChatGPT)

AI-powered language model

PavelKiryanov

Новый участник

Inoi

/dev/null

PavelKiryanov

Новый участник