Clip-Path – codezillaye

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeZillaYe Platform</title>
    <link rel="stylesheet" href="/coye.css">
</head>
<body>
    <header>
        <h1>Welcome to CodeZillaYe</h1>
        <p>CodeZillaYe is a cutting-edge platform that empowers developers with the tools and resources they need to create, innovate, and succeed in the world of coding. Join us to take your coding skills to the next level!</p>
        <div class="clip-shapes">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
            <div class="shape shape5"></div>
            <div class="shape shape6"></div>
            <div class="shape shape7"></div>
            <div class="shape shape8"></div>
            <div class="shape shape9"></div>
            <div class="shape shape10"></div>
        </div>
    </header>
</body>
</html>

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f4f4f9;
}

header {
    text-align: center;
    padding: 1rem;
    background-color: #2a6683;
    color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 1000px;
}

header h1 {
    margin: 0 0 10px;
    font-size: 2.5em;
}

header p {
    margin: 0 0 20px;
    font-size: 1.2em;
}

.clip-shapes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    justify-items: center;
    padding: 1rem;
    overflow: hidden;
}

.shape {
    width: 450px;
    height: 500px;
    background-image: url('https://codezillaye.com/wp-content/uploads/2024/06/codezillaye.com_.png');
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out;
}

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

.shape1 {
    clip-path: circle(50%);
}

.shape2 {
    clip-path: ellipse(50% 25%);
}

.shape3 {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.shape4 {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%);
}

.shape5 {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape6 {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}

.shape7 {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.shape8 {
    clip-path: polygon(50% 0%, 85% 20%, 100% 50%, 85% 80%, 50% 100%, 15% 80%, 0% 50%, 15% 20%);
}

.shape9 {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.shape10 {
    clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
}