1st - create a web page using grid and flexbox

PHOTO EMBED

Wed Nov 20 2024 15:10:19 GMT+0000 (Coordinated Universal Time)

Saved by @sem 

//,html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid & Flexbox Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Web Page</h1>
    </header>
    <main>
        <section class="grid-container">
            <div class="grid-item">Item 1</div>
            <div class="grid-item">Item 2</div>
            <div class="grid-item">Item 3</div>
            <div class="grid-item">Item 4</div>
            <div class="grid-item">Item 5</div>
            <div class="grid-item">Item 6</div>
        </section>
        <section class="flex-container">
            <div class="flex-item">Flex Item 1</div>
            <div class="flex-item">Flex Item 2</div>
            <div class="flex-item">Flex Item 3</div>
        </section>
    </main>
    <footer>
        <p>© 2024 My Web Page</p>
    </footer>
</body>
</html>
 
 
 
 
 
 
//.cc
* {
    box-sizing: border-box;
}
 
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
 
header {
    background: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}
 
main {
    padding: 20px;
}
 
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}
 
.grid-item {
    background: #ffeb3b;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
 
.grid-item:hover {
    transform: scale(1.05);
    background-color: #ffc107;
}
 
.flex-container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
 
.flex-item {
    background: #2196F3;
    color: white;
    padding: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}
 
.flex-item:hover {
    transform: translateY(-5px);
    opacity: 1;
}
 
footer {
    background: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
}
content_copyCOPY