Title: Transformers Beast Characters Webpage Creation   Objective:   The objective of this activity is to develop a web page dedicated to Transformer beast characters using HTML, CSS, and Flexbox layout. The activity aims to reinforce the understanding and practical implementation of various web development concepts, including flexbox, navigation, hover effects, flex-direction, nth-child, tables, transitions, and image display.   Step 1: Set Up the Project Open your preferred text editor. Create a new folder for the activity and name it "TransformersBeastCharacters." Inside the project folder, create the following files: html (main page) html (character information page) html (image gallery page) css (CSS file)   Step 2: Create the Basic Structure                                                             Open the index.html file in your text editor. Set up the basic structure of an HTML document by adding the HTML, head, and body tags. Inside the head tag, add a title for the webpage, such as "Transformers Beast Characters."   Step 3: Build the Navigation                                                               You can place the navigation bar on the left side of the page or the header Inside the body tag, create a navigation bar using an unordered list (ul) and list items (li). Add anchor tags (a) within the list items to link to the different webpages. Home (index.html) Characters (characters.html) Gallery (gallery.html)     Step 4: Design the Main Page (index.html)                                               Create a two-column using Flexbox. Divide the content area (or main section) into two columns using flexbox properties. Place a welcome message or introduction in the left column and a brief description of the Transformers Beast Characters in the right column.     Step 5: Create the Character Information Page (characters.html)              Open the characters.html file. Design a two-column layout using Flexbox. Add information about three different Transformer beast characters, such as their names, abilities, and background stories. Use flex-direction property to stack the information vertically.   Step 6: Develop the Image Gallery Page (gallery.html)                          Open the gallery.html file. Create a table to display a grid of thumbnail images of the Transformer beast characters. Use CSS to style the table and adjust the size and spacing of the images. Implement a hover effect to enlarge the thumbnail images when the cursor hovers over them. Apply a transition effect to smoothly animate the image size change on hover.   Step 7: Customize CSS (style.css)                                                             Open the style.css file. Apply CSS rules to customize the appearance of the webpages, navigation, layout, and other elements. Use flexbox properties to create the two-column layout. Apply nth-child selector to style alternate rows or cells in the table. Be creative Utilize transition property to add smooth animations to image hover effects. Adjust image properties, such as size, alignment, and borders.   Step 8: Test and Refine Save all the files. Open the index.html file in a web browser to preview the main page. Test the navigation bar by clicking on the links to ensure they navigate correctly. Repeat the preview and testing steps for the characters.html and gallery.html pages. Make any necessary adjustments to the layout, styles, or content based on the desired outcome.   use bumblebee, Optimus Prime, Megatron and Starscream. flex box.         Box 1     Box 2     Box 3     .container {   display: flex;   justify-content: space-between;   align-items: center;   height: 200px; } .box {   flex: 1;   height: 100px;   background-color: #f1f1f1;   border: 1px solid #ccc;   text-align: center;   line-height: 100px; }                   Item 1         Item 2         Item 3         Item 4         Item 5       .flex-container {     display: flex;     flex-direction: row;     /* flex-direction: row-reverse; */     /* flex-direction: column; */     /* flex-direction: column-reverse;  */     flex-wrap: nowrap; } .item {     background-color: lightblue;     border: 1px solid black;     padding: 10px;     margin: 10px;     flex-grow: 1; } .item:nth-child(odd) {     flex-grow: 2; }  .item:nth-child(3) {     order: 2;   // default is zero (left to right)     background-color: rgb(167, 230, 208); }  .item:nth-child(5) {     order: 1;     background-color: rgb(240, 229, 147); }

Title: Transformers Beast Characters Webpage Creation

Objective:

The objective of this activity is to develop a web page dedicated to Transformer beast characters using HTML, CSS, and Flexbox layout. The activity aims to reinforce the understanding and practical implementation of various web development concepts, including flexbox, navigation, hover effects, flex-direction, nth-child, tables, transitions, and image display.

Step 1: Set Up the Project

1. Open your preferred text editor.
2. Create a new folder for the activity and name it "TransformersBeastCharacters."
3. Inside the project folder, create the following files:

• html (main page)
• html (character information page)
• html (image gallery page)
• css (CSS file)

Step 2: Create the Basic Structure                                                          

1. Open the index.html file in your text editor.
2. Set up the basic structure of an HTML document by adding the HTML, head, and body tags.
3. Inside the head tag, add a title for the webpage, such as "Transformers Beast Characters."

Step 3: Build the Navigation                                                              

1. You can place the navigation bar on the left side of the page or the header
2. Inside the body tag, create a navigation bar using an unordered list (ul) and list items (li).
3. Add anchor tags (a) within the list items to link to the different webpages.
4. Home (index.html)
5. Characters (characters.html)

• Gallery (gallery.html)

Step 4: Design the Main Page (index.html)                                              

1. Create a two-column using Flexbox.
   • Divide the content area (or main section) into two columns using flexbox properties.

• Place a welcome message or introduction in the left column and a brief description of the Transformers Beast Characters in the right column.

Step 5: Create the Character Information Page (characters.html)             

1. Open the characters.html file.
2. Design a two-column layout using Flexbox.
3. Add information about three different Transformer beast characters, such as their names, abilities, and background stories.
4. Use flex-direction property to stack the information vertically.

Step 6: Develop the Image Gallery Page (gallery.html)                         

1. Open the gallery.html file.
2. Create a table to display a grid of thumbnail images of the Transformer beast characters.
3. Use CSS to style the table and adjust the size and spacing of the images.
4. Implement a hover effect to enlarge the thumbnail images when the cursor hovers over them.
5. Apply a transition effect to smoothly animate the image size change on hover.

Step 7: Customize CSS (style.css)                                                            

1. Open the style.css file.
2. Apply CSS rules to customize the appearance of the webpages, navigation, layout, and other elements.

• Use flexbox properties to create the two-column layout.
• Apply nth-child selector to style alternate rows or cells in the table. Be creative
• Utilize transition property to add smooth animations to image hover effects.
• Adjust image properties, such as size, alignment, and borders.

Step 8: Test and Refine

1. Save all the files.
2. Open the index.html file in a web browser to preview the main page.
3. Test the navigation bar by clicking on the links to ensure they navigate correctly.
4. Repeat the preview and testing steps for the characters.html and gallery.html pages.
5. Make any necessary adjustments to the layout, styles, or content based on the desired outcome.

use bumblebee, Optimus Prime, Megatron and Starscream.

flex box.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}

.box {
  flex: 1;
  height: 100px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
    <div class="flex-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
</body>
</html>

.flex-container {
    display: flex;
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse;  */

    flex-wrap: nowrap;
}

.item {
    background-color: lightblue;
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    flex-grow: 1;
}

.item:nth-child(odd) {
    flex-grow: 2;
} 

.item:nth-child(3) {
    order: 2;   // default is zero (left to right)
    background-color: rgb(167, 230, 208);
} 

.item:nth-child(5) {
    order: 1;
    background-color: rgb(240, 229, 147);
}