Apply CSS Flexbox on 5 pages (e.g., product layout, employee cards, student profiles, etc.)
Name your repository CSS_FLEX
Add documentation in the README.md file of your repository
Submit the GitHub repository link
Deadline: December 5 2024

______________________________________________________________________________________

What is CSS Flexbox

Flexbox is one of the methods or modules in CSS (Cascading Stylesheet) to provide good and efficient way of designing include of being flexible and alignment that distributes among elements within the container or div.

Why CSS Flexbox advantages and important?

In the context of web development, the CSS Flexbox is very helpful to be dynamically responsive and resize the elements of our webpage application.
In addition, it allows automatically adjust the web frame based on the current status of the layout of browser.

Key properties of Flexbox include:

display: flex defines a parent container that hold different child elements to enable the flexbox.
flex-direction: Determines the direction of items (row or column).
justify-content: Controls horizontal alignment. (e.g. start, space-around, center)
align-items: Controls vertical alignment.
flex-grow, flex-shrink, flex-basis: Control item resizing.

PRODUCT LAYOUT

productlayout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="productlayout.css" type="text/css">
    <title>Product Layout</title>
</head>
<body>
    <div class="product">
       <div class="proditem">
        <span>Jordan Courtside 23</span>
        <img src="jordancourtside23.png" alt="Jordan Courside 23 shoes">
       </div>
       <div class="proditem">
        <span>Men's Max90 T-shirt</span>
        <img src="nikesportswear.png" alt="Nike Sportswear">
       </div>
       <div class="proditem">
        <span>Nike Club Team Bag</span>
        <img src="nikeclubteambag.png" alt="Nike club Team Bag">
       </div>
       <div class="proditem">
        <span>NOCTA Opal Hat</span>
        <img src="noctaopalhat.jpg" alt="Nocta Opal Hat">
       </div>
    </div>
</body>
</html>

productlayout.css

html, body {
    scroll-behavior: smooth;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.product {
    margin: 10vh;
    display: flex;
    background: #14c7d0;
    height:70vh;
    width: 90%;
    min-height: 40vh;
    max-width: 180vh;
    max-height: 50vh;
    border-radius: 10px;

    .proditem:nth-child(1) {
        background: #000000;
        display: flex;
        flex-direction: column;
        margin: 20px;
        border-radius: 20px;

    }
    .proditem:nth-child(2) {
        background: #000000;
        display: flex;
        flex-direction: column;
        margin: 20px;
        border-radius: 20px;
    }
    .proditem:nth-child(3) {
        background: #000000;
        display: flex;
        flex-direction: column;
        margin: 20px;
        border-radius: 20px;
    }
    .proditem:nth-child(4) {
        background: #000000;
        display: flex;
        flex-direction: column;
        margin: 20px;
        border-radius: 20px;
    }
}
.proditem img {
    margin:10px 20px 10px 20px ;
    width: 100%;
    min-width: none;
    max-width: 85% ;
    height: 50vh;
    min-height: 20vh;
    max-height: 100vh;
    border-radius: 10px;

}
.proditem span {
    color: #14c7d0;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    display: flex;
    justify-content: center;
    min-width: 20vh;
}

OUTPUT:

Employees Card

employeescard.html

employeescard.css

This activity is only submitted of github

GitHub Link:

https://github.com/Rhedaligan8/CSS_FLEX.git

Activity 26: CSS FLEX | Aligan, Rhed N.

What is CSS Flexbox

Why CSS Flexbox advantages and important?

Subscribe to my newsletter

Rhed Aligan

Rhed Aligan