Top/bottom/body script

I could definitely use some assistance in implementing code that involves div elements for a #header, #footer, and #main. I'm a bit unsure of where exactly to insert this code within the existing structure. I have already set up a basic HTML page paired with a CSS style sheet. I'm not looking for someone to write out the entire code for me as I am determined to grasp this concept for my class. However, any kind of guidance or pointers would be greatly appreciated. The webpage I am working on is a resume with my contact details displayed in the header, a copyright notice in the footer, and the resume content placed in the main section. Thank you in advance for any help you can provide!

Below is the code snippet I used for a previous assignment on which I need to build further.

CSS Style Sheet...

body {
    background-color: rgb(184, 179, 173);
}

.header{
    h1{
        font-family:"Impact", Charcoal, "sans-serif";
        color: rgb(217, 89, 0);
        margin-left: 20px;
        font-size:65px;
        text-align: center;
    }

    h2{
        font-family:"arial black", gadget, "sans-serif";
        color: rgb(242, 125, 0);
        margin-left: 20px;
        font-size:40px;
        text-align: center;
        text-decoration: underline;
    }

    p{
        font-family:"arial", arial, "sans-serif";
        color: rgb(51, 53, 36);
        margin-left: 32px;
        font-size:20px;
        text-align: left;
        text-indent:-32px
    }

    img {
        display: block;
        margin: 0 auto;
        width:230px;
        height:320px;
    }

HTML page...

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="JillBowman2.css">
</head>
<body>

<h1>Jill Bowman</h1>
<img  src="https://s26.postimg.org/9p6vuu5i1/JBowman.png" alt="Jill-Bowman-Photo">
<br>
<h2>Education</h2>
<p>Bachelor of Science - Elementary Education<br>
Oklahoma State University - Stillwater, OK<br>
May 2010</p>
<br>
<p>Master of Education - Educational Technology <br>
University of Arkansas - Fayetteville, AR<br>
Anticipated December 2018.</p>
<h2>Educational Experience</h2>
<br>
<p>6th Grade Math Teacher - McKinney, TX<br>
From August 2015 - June 2017 I was employed by McKinney Independent School District as a 6th grade math teacher at Dowell Middle School. During my time at Dowell I taught on-level, Pre-AP, and GT. I was the NJHS sponsor and coordinated a fundraising campaign that raised over $10,000 for the Leukemia and Lymphoma Society. I was also the Academic UIL coach for Calculator Applications and Number Sense. My students consistently placed in the top 5 in both events. In the 2016-2017 school year, 59% of my students scored at the highest level on the STAAR test.</p>
<br>
<p>8th Grade Math Teacher - Carrollton, TX<br>
From August 2014 - June 2015 I was employed by Carrollton-Farmers Branch Independent School District as an 8th grade math teacher at Dan F. Long Middle School. While at Long, I taught Algebra 1 and 8th grade math. I implemented a blended classroom with the use of 1-to-1 iPads. I was also the head cheer coach and StuCo sponsor at Long.</p>
<br>
<p>Middle School Math Teacher - Tulsa, OK<br>
From August 2012 - June 2014 I was employed by Tulsa Union Public School as a math teacher at the Union 6th/7th Grade Center. While at U6/7 I taught all levels of math to 6th and 7th grade. I was also the leader of two after school clubs. One of my clubs talked about current events and the other taught the students how to cook easy and healthy meals for their families. I was also the afternoon detention teacher. </p>
<br>
<p>7th Grade Math Teacher - Liberal, KS<br>
From August 2011-May 2012 I was employed by Liberal USD 480 as a 7th grade math teacher at West Middle School. While at WMS, I taught various levels of 7th grade math. I was also responsible for security at all sporting events. </p>
<br>
<p>6th Grade Core Teacher - Liberal, KS<br>
From August 2010 - May 2011 I was employed by Liberal USD 480 as a 6th grade core teacher at Cottonwood Intermediate School. I was responsible for teaching my students math, science, social studies, and language arts. While at CIS I worked for Project BEST which was an after school enrichment and remediation program. </p>
<br>
<h2>Showcase</h2>
<br>
<p>As a requirement for one of my master’s classes, I built a website with various technology tutorials. Please visit my page by clicking <a href="https://jeb029.wixsite.com/website"> here.</a>
<h2>Contact Me</h2>
<p>Feel free to contact me via <a href="mailto:jill@example.com">Email.</a></p>
</body>
</html>

Answer №1

As far as I can tell, you've already linked the style sheet in your HTML document. The next step is to insert a div element, acting as a container, and apply the appropriate css definitions. Your initial attempt seemed to work fine, but you might have missed calling the header CSS definition:

    <div class="header">Header</div>

If you're still struggling, I suggest checking out this resource for additional assistance: Simple div with header, footer, and body

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop images from flipping while CSS animation is in progress

I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...

Encountered a problem loading resources - code 500 malfunction detected

I am encountering an issue where I consistently receive a 500 Internal Server Error message in the developer console for all CSS, image, and JS files: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Despite doub ...

How can I incorporate a fade opacity effect into my Div scrolling feature?

I successfully implemented code to make div elements stick at the top with a 64px offset when scrolling. Now, I am trying to also make the opacity of these divs fade to 0 as they scroll. I am struggling to figure out how to achieve this effect. Below is ...

I am having trouble getting my footer to align properly in a vertical position

My goal is to have my li elements remain on the same line, but unfortunately, they are not cooperating (they are aligning horizontally, but that's all). Here is the code snippet: <footer> <div class="container"> <div id="coi ...

Creating a banner using four grid elements, with each element containing four child elements, is a simple process that can

Can you assist me in recreating my idea from an image? I am having trouble understanding how to select and place other elements, and then return them to their original positions after deselecting... I attempted to use a grid but it did not work properly. ...

Insert a div element into the JavaScript file

I have a JavaScript code snippet that needs to be inserted after the "Artwork" section. Here is the code: <div class="image-upload"> <label for="files"> <img src="ohtupload.jpg"> </label> </di ...

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Below is the content of my Gruntfile.js: module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ uglify: { start: { files: { 'js/script.min.js': ['js/script.js&a ...

The ng-repeat function is unable to fetch data from a JSON file

Within my AngularJS framework template, I have the following snippet of html code: <ul class="sb-parentlist"> <h1 class={{headerClass}}> Popular</h1><div data-ng-repeat="data in data track by $index"> <li> ...

Navigating through different pages in PHP

How can I set up my php page to handle the following situations? When someone clicks on "my account", they should be directed to the login page if they are not currently logged in. If a user is already logged in and clicks on "my account," they should ...

Looking to switch the markers from circles to icons in the GeoChart component of react-google-charts

During my personal project, I came across the react-google-charts library and discovered a method to add markers to the map. <Chart width={"200%"} height={"100%"} chartType={"GeoChart"} data={geoData} rootProps={{ "data-testid": "1" ...

The functionality of the Bootstrap carousel for moving to the next and previous images is malfunctioning, as it only

The carousel on my website is not functioning properly. It only displays the first image and does not slide to the next pictures as it should. Here is the code snippet for the carousel: <body> </nav> <div id="carousel1" class="carousel slid ...

Styling <Link> component with styled-components: A step-by-step guide

Utilizing the Link component from @material-ui/core/Link in my TypeScript code was initially successful: <Link href="#" variant="body2"> Forgot? </Link> However, I am exploring the transition to styled-components located in a separate file. ...

"The functionality of the Bootstrap4 tab panel is not working properly for switching

I am currently working on creating 4 tab panels using Bootstrap 4. My goal is for the tab contents to fade in when I click on them. However, I am facing an issue where nothing happens when I click on the other panels. Do you have any insights on why this ...

Unable to click on hyperlink and image not adjusting in size

I am having an issue with the anchor tags inside a div. For some reason, the width and height are set to 0px, and I have tried to adjust them with no success. Each dot in my onepage scroller is meant to navigate to a different page. .dotstyle-scaleup{ f ...

Issue with displaying the glyphicon-chevron on the carousel control

Currently, I'm in the process of incorporating a straightforward modal into my gallery design. I have a slide carousel positioned at the top of the page, while at the bottom, there are thumbnails of the gallery. While the slide carousel control butto ...

"My attempts to link various buttons in separate Bootstrap modals to their specific content are not yielding successful results

Greetings fellow members of Stack! Please bear with me as I am a newcomer here. I am currently working on a Business website for a friend using Bootstrap3. On our team page, we have multiple members and I would like to display additional details for each ...

Utilizing the Bootstrap grid system allows for input fields to automatically expand to 100% width once they reach

I am encountering some challenges while attempting to develop a responsive form using bootstrap grids. The issue seems to arise when resizing the browser window, as the grid classes behave unexpectedly by expanding and taking up the entire page width at ce ...

Having trouble customizing the appearance of wtform attributes

Hello Everyone, Here is the content of the .py file: from flask import Flask, render_template, flash, session, redirect, url_for from flask_wtf import FlaskForm from wtforms import StringField,SubmitField from wtforms.validators import Da ...

Unveiling Elements as You Scroll Within a Specified Area

I have implemented a jQuery and CSS code to reveal my contact form as I scroll down the page. However, I am facing an issue with setting a specific range for displaying the element while scrolling. Currently, I have only managed to handle the scrolling dow ...