Webleb - UI Elements - A Code by Skyrreum

<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="shortcut icon" type="x-icon" href="images/Logo.jpg">
    <title>Skyrreum Info</title>
    
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-N26NW1ZG1M"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

gtag('config', 'G-N26NW1ZG1M');
    </script>
</head>
<body>
    <header>
        <a href="#" class="logo">Skyrreum</a>
        <nav class="navigation">
            <a href="#services">Sur moi</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

<section class="main">
        <div>
            <h2>Salut, je suis Skyrreum<br><span>Développeur</span></h2>
            <h2>Je suis étudiant, développeur et retextureur Français</h2>
        </div>
    </section>

<section class="cards" id="services">
        <h2 class="title">Sur moi</h2>
        <div class="content">
            <div class="card">
                <div class="icon">
                    <i class="fab fa-discord"></i>
                </div>
                <div class="info">
                    <h3>Mon Discord</h3>
                    <p>Pseudo: skyrreum</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="info">
                    <h3>Langages</h3>
                    <p>Je parle Français et Anglais.</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="info">
                    <h3>Age</h3>
                    <p>J'ai 15 ans</p>
                </div>
            </div>
        </div>
    </section>

<section class="cards contact" id="contact">
        <h2 class="title">Travaillons ensemble</h2>
        <div class="content">
            <div class="card" style="height: 250px;">
                <div class="icon">
                    <i class="fab fa-discord"></i>
                    <i class="fas fa-globe"></i>
                </div>
                <div class="info">
                    <h3>Mon Serveur de Leak</h3>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
                    <a href="https://discord.gg/invite/xHdsZUKpDj" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-globe"></i>
                </div>
                <div class="info">
                    <h3>Mon Site</h3>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
                    <a href="https://sk-leak.mysellauth.com" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                </div>
            </div>
        </div>
    </section>
    <script>
        function setLanguage(language) {
            if (language === 'de') {
                window.location.href = 'deindex.html'; // Redirect to the German version
            } else if (language === 'ar') {
                window.location.href = 'arindex.html'; // Redirect to the Arabic version
            } else {
                // Redirect to the default version or any other language-specific version
                window.location.href = 'index.html';
            }
        }
        function toggleLanguages() {
    var options = document.getElementById("languageOptions");
    if (options.style.display === "none") {
        options.style.display = "block";
    } else {
        options.style.display = "none";
    }
}

</script>
    <footer class="footer">
        <p class="footer-title">Copyright © <span>Skyrreum</span></p>
    </footer>
    
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TG3SNWNX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

header {
    background-color: #f0f0f0;
    width: 100%;
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 200px;
    font-style: oblique;
}

.logo {
    text-decoration: none;
    color: #0f2f88;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.8em;
    font-style: oblique;
}

.navigation {
    display: flex;
    align-items: center;
}

.navigation a {
    color: #062d99;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    padding-left: 30px;
}

.navigation a:hover {
    color: #000000;
}

.language-tab {
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    margin-left: 20px; /* Adjusted margin to separate it from other navigation links */
    color:#062d99
}
.language-tab:hover a{
    color: #000000; /* Change to the desired color */
}
.language-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f0f0f0; /* Changed background color to match navigation background */
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1;
}
.language-tab:active {
    color: #000; /* Change to the desired color */
}

.language-options button {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: left;
    border: none;
    background-color: transparent;
}
.language-options button:hover {
    background-color: #c7c7c7; /* Changed hover background color */
}

.section {
    padding: 100px 200px;
}

.main {
    width: 100%;
    min-height: 100vh;
    background: #dddddd;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.main div {
    text-align: center; /* Center the text inside the div */
}

.main h2 {
    color: #000000;
    font-size: 2.4em;
    font-weight: 700;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-style: oblique;
    
}

.main h2 span {
    display: inline-block;
    margin-top: 10px;
    color: #0163f79d;
    font-size: 3em;
    font-weight: 800;
    font-style: oblique;
    
}

.main h3 {
    color: #000000;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 30px;
    font-style: oblique;
    border-top: 3px #0018f0 double;
    border-right: 3px #0018f0 double;
    border-bottom: 3px #0018f0 double;
    border-left: 3px #0018f0 double;
}

.title {
    display: flex;
    justify-content: center;
    color: #000000;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 30px;
}

.content {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.card {
    background-color: #dddddd;
    width: 21.25em;
    box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
    border-radius: 10px;
    padding: 25px;
    margin: 15px;
    transition: 0.7s ease;
}

.card:hover {
    transform: scale(1.1);
}

.card .icon {
    color: #5e41ff;
    font-size: 8em;
    text-align: center;
}

.info {
    text-align: center;
}

.info h3 {
    color: #000000;
    font-size: 1.2em;
    font-weight: 700;
    margin: 10px;
}

.projects {
    background-color: #ffffff;
}

.projects .content {
    margin-top: 30px;
}

.project-card {
    background-color: #ffffff;
    border: 1px solid #fff;
    min-height: 14em;
    width: 23em;
    overflow: hidden;
    border-radius: 10px;
    margin: 20px;
    transition: 0.7s ease;
}

.project-card:hover {
    transform: scale(1.1);
}

.project-card:hover .project-image {
    opacity: 0.9;
}

.project-image img {
    width: 100%
}

.project-info {
    padding: 1em;
}

.project-category {
    font-size: 0.8em;
    color: #000;
}

.project-title {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 10px;
}

.more-details {
    text-decoration: none;
    color: #3a6cf4;
}

.more-details:hover {
    color: #601cfc;
}

.contact .icon {
    font-size: 4.5em;
}

.contact .info h3 {
    color: #000;
}

.contact .info p {
    font-size: 1.5em;
}

.footer {
    background-color: #000016;
    color: #fff;
    padding: 2em;
    display: flex;
    justify-content: space-between;
}

.footer-title {
    font-size: 1.3em;
    font-weight: 600;
}

.footer-title span {
    color: #5e41ff;
}

.footer .social-icons a {
    font-size: 1.3em;
    padding: 0 12px 0 0;
}

@media (max-width:1023px) {
    header {
        padding: 12px 20px;
    }

.navigation a {
        padding-left: 10px;
    }

.title {
        font-size: 1.8em;
    }

section {
        padding: 80px 20px;
    }

.main-content h2 {
        font-size: 1em;
    }

.main-content h3 {
        font-size: 1.6em;
    }

.content {
        flex-direction: column;
        align-items: center;
    }

}

@media (max-width:641px) {
    body {
        font-size: 12px;
    }

.main-content h2 {
        font-size: 0.8em;
    }

.main-content h3 {
        font-size: 1.4em;
    }
}

Validating your code, please wait...

HTML

CSS