Day 18 Progress - Diving into Flexbox and CSS Practice

Today was productive! Here’s what I accomplished:

1. Smiley Face Creation: I created a smiley face using HTML and CSS. It was a fun exercise to apply my CSS skills in a creative way.

.face{
    width: 400px;
    height: 400px;
    background-color:    #ffcc33;
    border-radius: 50%;
}
.lefteye, .righteye{
    height:75px;
    width: 75px;
    border-radius: 50%;
    background-color: black;
    display: inline-block;
    position: absolute;
    left: 100px;
    top: 100px;
}
.righteye{
    left: 250px;
}
.mouth{
    width: 220px;
    height: 80px;
    background-color:brown;
    border-radius: 0 0 50px 50px;
    position: absolute;
    top: 250px;
    left: 100px;

}

2. CSS Practice: I practiced a set of CSS questions that involved the topics I’ve learned previously. This helped reinforce my understanding and gave me a chance to apply concepts in different scenarios.

/* Qs1. Add a 2s transition on box1 for width changes.
It should have 'ease-in' speed curve & 0.5s delay */

#box1 {
    width: 100px;
    height: 100px;
    background: green;
    transform: width 2s ease-in 0.5s;
    }
#box1:hover {
    width: 600px;
 }
 /*Qs2. Using transform, move box2 200px to the right &
200px down. Also rotate it 90deg.*/

#box2 {
    width: 100px;
    height: 100px;
    background: red;
    transform: translateX(200px) translateY(200px) rotate(90deg);
    }
/* Qs3. Using transform, skew box3 20deg along the x axis.*/
#box3 {
    width: 100px;
    height: 100px;
    background: lightblue;
    transform: skewX(20deg);
}
/* Qs4. Set a 2px horizontal & 2px vertical, green shadow
for box4, with a 5px blur radius.*/
#box4 {
    width: 100px;
    height: 100px;
    background: lightgreen;
    box-shadow: 2px 2px 5px green;
    }
/* Qs5. Set Your picture or any picture as the background of
the div
"myPic". Also, set transparency of this div to 50%. */
#myPic{
    background-image: url(man\ image.jpg);
    background-size: auto;
    opacity: 50%;
}

3. Exploring Flexbox: I started learning about Flexbox, a powerful layout module in CSS. This new topic is exciting as it offers a flexible way to design complex layouts.

   

   4. Flexbox Properties:

• flex-direction: This property defines the direction in which the flex container's items are placed in the flex container.

  • row: Items are placed horizontally from left to right.

  • column: Items are placed vertically from top to bottom.

  • row-reverse: Items are placed horizontally from right to left.

  • column-reverse: Items are placed vertically from bottom to top.

    .container{
    flex-direction: row;
    flex-direction: column;
    flex-direction: row-reverse;
    flex-direction: column-reverse;
    }

5. justify-content: This property aligns the flex items along the main axis of the flex container.

• flex-start: Items are aligned to the start of the container.

• flex-end: Items are aligned to the end of the container.

• center: Items are centered within the container.

• space-between: Items are evenly distributed with the first item at the start and the last item at the end.

• space-around: Items are evenly distributed with equal space around them.

• space-evenly: Items are evenly distributed with equal space between them.

.container{
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}

These properties are crucial for creating flexible and responsive layouts, and I'm looking forward to experimenting with them more.