As you scroll through the HTML this is really the only place you need to change stuff for your layout.
You can ignore everything in the <head> tag, it is the location of the CSS and some Javascript files, plus the font that is being used.
Code: Select all
<div class="screenshot">
<img class="banner" src="cardBanner.png">
This is the beginning of the contents of the body tag. The div class "screenshot" is a division (think of them like containers in this context) that includes everything. When we use Javascript to take a screenshot we are grabbing this element and everything it contains for the image. That was stuff like the "Save Image" button is not included in the image.
This is the next big thing. This is another container. Inside this container we put two more containers, one for the left side of the layout and one for the right side of the layout. The only thing this does is just hold two other divisions.
Code: Select all
<div class="one">
<h1>Cardinals Defeat Dodgers on Jackie Robinson Day</h1>
<img class="story_image" src="image2.png">
<p class="pictureCaption">Harrison Bader hits the go ahead home run in the top of the 9th inning.</p>
<p class="story">After facing a series of defeats by the Los Angeles Dodgers the St. Louis Cardinals finally
decided that they can take on the NL West leaders.
<br><br>Since the beginning of the season it's been clear that the team's offense will win them games. Matt
Ryan didn't miss a beat despite playing his first game without starting wide receiver Calvin Ridley,
accounting for 3 touchdowns (2 passing, 1 rushing). Brian Hill took credit for Atlanta's other score with a
goal line touchdown. He finished with more carries than backup running back Ito Smith for the first time.
<br><br>And in the midst of surrendering XXX total yards to the Titans, the Falcons managed to allow only
12 points to be scored. The secondary was relentlessly torched by former AFC offensive player of the week
Adam Humphries, who will likely finish the week leading the league in receiving yards after racking up
176 today.
<br><br>Atlanta forced Titans quarterback Marcus Mariota into 2 turnovers, both interceptions. Isaiah
Oliver snagged a pick in the endzone to put a halt to any scoring chance the Titans may have had in the
4th quarter, and Desmond Trufant sealed the game with less than a minute remaining.
<br><br>The Falcons face their third straight AFC South team next week when they travel to Houston to face
the Texans.</p>
</div>
This is the left side of the layout. The items within the <h1> is the headline. Change it to whatever you want. The next tag is the image. The only thing you need to change if you want is the src="image2.png". Place your image in the same folder as everything else and then change "image2.png" to whatever your image name is (include the quotations). The CSS has this setup to automatically size it correctly.
The next line is the caption for the picture. Then finally after that you have the <p> tag for the story. Import to know is that if you plan on adding a new paragraph use two <br> tags like shown here. It helps with the spacing.
Code: Select all
<div class="two">
<p class="gameInfo">April 15th, 2020<br>Dodger Stadium<br>Los Angeles, CA</p>
<div class="funBorder"></div>
<table class="boxScore">
<tr class="header"><td class="boxTeam">Team</td><td class="final">R</td><td class="otherBoxScore">H</td>
<td class="otherBoxScore">E</td>
</tr>
<tr class="away">
<td class="boxTeam">Cardinals</td><td class="finalScore">4</td><td class="otherBoxScore">5</td>
<td class="otherBoxScore">0</td>
</tr>
<tr class="home">
<td class="boxTeam">Dodgers</td><td class="finalScore">3</td><td class="otherBoxScore">7</td>
<td class="otherBoxScore">1</td>
</tr>
</table>
<div class="scoringSummary">
<p class="scoringHeader">INNING 1</p>
<p class="scoringEvent">[STL] Goldschmidt hits a 2 RBI home run<br>
[LAD] C. Seager hits a RBI double</p>
<p class="scoringHeader">INNING 8</p>
<p class="scoringEvent">[STL] Wong hits a 2 RBI single<br>
[STL] Molina draws a RBI walk</p>
<br>
</div>
<br>
<h3 class="teamName">St. Louis Cardinals </h3><p class="teamRecord">(9-9)</p>
<p class="playerStats">H. Bader: 1-4, HR (1), RBI<br>
H. Bader: 1-4, HR (1), RBI<br>
H. Bader: 1-4, HR (1), RBI<br>
H. Bader: 1-4, HR (1), RBI<br>
A. Wainwright: 7.0 IP, 7 H, 1 ER, 7 SO<br>
G. Gallegos (W, 1-0): 1.0 IP, 2 SO</p>
<br>
<h3 class="teamName">Los Angeles Dodgers </h3><p class="teamRecord">(14-4)</p>
<p class="playerStats">Harrison Bader: 1-4, HR (1), RBI<br>
Harrison Bader: 1-4, HR (1), RBI<br>
Harrison Bader: 1-4, HR (1), RBI<br>
Harrison Bader: 1-4, HR (1), RBI<br>
Adam Wainwright: 7.0 IP, 7 H, 1 ER, 7 SO<br>
Giovanny Gallegos (W, 1-0): 1.0 IP, 2 SO</p></p>
</div>
This is the right side of the layout. It's all pretty explanatory but ask me if you have any questions.
FINAL NOTE! This was all for my baseball layout. Give me a couple of minutes and I'll go back and fix it for the football layout.