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); }

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

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);

 

 

 

 

Expert Solution
steps

Step by step

Solved in 4 steps with 7 images

Blurred answer
Knowledge Booster
Designing elements of Web Page
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education