Thiết kế website giá rẻ

Question

During the process of building my website using only CSS, I encountered difficulties ensuring that the navigation bar and social media icons were properly displayed on smaller screens. Despite attempting to address this issue by incorporating a burger menu, I found that it not only looked awkward but also failed to function effectively. Consequently, I made the decision to remove it from the design altogether. However, I remain in need of assistance in resolving this persistent challenge. Any guidance or suggestions would be greatly appreciated as I strive to optimize the user experience across all devices.
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ramazanov | Home</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/d0f7484fd2.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="flexbox-container">
        <nav class="flexbox-item">
            <a href="" target="_blank">
                <button class="navitem profile">
                    <div class="profile-content">
                        <img src="favcolor.jpg" alt="" class="pf avatar">
                        <div class="pf texts">
                            <div class="name"><strong>@hikmetrmznvv</strong></div>
                        </div>
                    </div>
                </button>
            </a>
            <a href="index.html">
                <button class="navitem home">Home</button>
            </a>
            <a href="" target="_blank">
                <button class="navitem music">Music</button>
            </a>
            <a href="" target="_blank">
                <button class="navitem projects">Projects</button>
            </a>
        </nav>
        <div class="flexbox-item content">
            <div class="button-container">
                <a href="" class="socialbtn"><button class="social Instagram"><i class="fa-brands fa-instagram"></i>&nbspInstagram</button></a>
                <a href="" class="socialbtn"><button class="social Twitter"><i class="fa-brands fa-twitter"></i>&nbspTwitter</button></a>
                <a href="" class="socialbtn"><button class="social Reddit"><i class="fa-brands fa-reddit"></i>&nbspReddit</button></a>
                <a href="" class="socialbtn"><button class="social Discord"><i class="fa-brands fa-discord"></i>&nbspDiscord</button></a>
                <a href="" class="socialbtn"><button class="social Spotify"><i class="fa-brands fa-spotify"></i>&nbspSpotify</button></a>
                <a href="" class="socialbtn"><button class="social Steam"><i class="fa-brands fa-steam"></i>&nbspSteam</button></a>
            </div>
        </div>
    </div>
</body>
<script>
    const content = document.querySelector(".content");
    if (content) {
        content.addEventListener("contextmenu", (e) => e.preventDefault());
    }
</script>
</html>

“`CSS

html, body {
    height: 100%;
    background-color: white;
    overflow: hidden;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: bold;
    user-select: none;
    -webkit-touch-callout: none; 
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none; /* Removes underline from links */
}

.flexbox-container {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.flexbox-item {
    border: 5px solid black;
    background-color: white;
    margin: 0 20px;
    height: 90%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

nav {
    width: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content {
    width: 80%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* Make this container a relative positioned element for absolute positioning within */
}

.navitem {
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    width: 90%;
    margin: 10px 0;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: normal;
    cursor: pointer;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    background-color: transparent;
}

.navitem:hover {
    color: #fff;
    background-color: #1A1A1A;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.navitem:active {
    box-shadow: none;
    transform: translateY(0);
}

.profile {
    width: 28vh;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-bottom: 20px;
}

.profile-content {
    display: flex;
    align-items: center;
    text-align: center;
}

.avatar {
    border-radius: 50%;
    border: 2px solid #1A1A1A;
    height: 75px;
    width: 75px;
    margin: 8px;
}

.name {
    font-size: 20px;
    margin-left: 10px;
}

.home, .music, .projects , .socials {
    width: 25vh; /* Change the width to a specific value */
    /* Other CSS properties */
}

.button-container {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    align-items: center; /* Center the buttons vertically */
    width: 100%; /* Ensure the container takes the full width */
    position: absolute; /* Position at the bottom of the parent */
    bottom: 20px; /* Adjust this value as needed to position the buttons */
}

.socialbtn {
    margin: 5px; /* Adds space between buttons */
}

.social {
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    width: 150px; /* Set a fixed width for buttons */
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: normal;
    cursor: pointer;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    background-color: transparent;
}

.Instagram:hover {
    color: #fff;
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );    
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}
.Twitter:hover {
    color: #fff;
    background-color:#26a7de;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}
.Reddit:hover {
    color: #fff;
    background-color: #FF5700;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}
.Discord:hover {
    color: #fff;
    background-color:#5865F2;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}
.Spotify:hover {
    color: #fff;
    background-color:#1ED760;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}
.Steam:hover {
    color: #fff;
    background-color:#171a21 ;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}
@media screen and (max-width: 768px) {
    .flexbox-container {
      flex-direction: column;
    }
    .flexbox-item {
      width: 100%;
    }
  }

Thiết kế website giá rẻ

Danh mục

How do I make this website responsive for mobile and desktop?