4-Main Content

Video

Steps

1. Next we'll work on the content for the main section:

   

2. Let's start by adding a title and one cheese section:

   <section id="main">
        <!--Main Section-->
        <h1>Shop for Cheese</h1>
        <!--Six different cheeses-->
        <div class="panel">
            <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
            <h2>Soft-Ripened</h2>
            <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
            <button>Order</button>
        </div>
   </section>

3. Instead of recreating that 5 more times, this is a case where copy and paste would be very helpful. Go ahead and copy the code and paste it 5 times.

            <div class="panel">
                <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Soft-Ripened</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Soft-Ripened</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Soft-Ripened</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Soft-Ripened</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Soft-Ripened</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Soft-Ripened</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
   </section>

4. After you copy and paste those, we can customize each one. You'll need to change each picture to the proper name in the images folder. Change the title of the section to match the picture. The placeholder text can be whatever you want it to be:

            </div>
            <div class="panel">
                <img src="img/230x170/cheese_semifirmgroup_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Semi-soft</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/firm_hard_fioresardo_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Firm/Hard</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/blue_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Blue</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/natural_rind_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Natural Rind</h2>
                <p>Cheesy grin who moved my cheese cheesecake roquefort melted cheese swiss cauliflower cheese airedale. Fromage frais macaroni cheese parmesan.</p>
                <button>Order</button>
            </div>
            <div class="panel">
                <img src="img/230x170/soft_ripened_cheese_230.jpg" class="cheeseType" alt="cheese" border="0" />
                <h2>Processed</h2>

5. When you run the app, it should look like this "controlled" hot mess:

   

6. Next we'll add the content for the footer.