I am having trouble with the boxes in my tribute page. I want them to automatically fit to the screen but I’ve run out of ideas to fix it. https://codepen.io/DeOnnaGray/pen/paXrMj?editors=1000
Thank you for that. I was struggling lol. When I change the width of the webpage the text at the bottom does not stay inside the boxes I created and everything started to overlap. I want the text to remain inside the boxes.
Thank you! That helped a lot. Yes, I was attempting to use bootstrap but its my first time so I probably am missing something. Here is what I have now…
<head>
<title>The Black Panther Party</title>
<style>
.container-fluid{
padding:30px;
background:white;
}
.innerBox{
border-radius: 5px;
padding:30px;
background: #E5DFDE;
font-size; 40px
}
.pictureBox{
border-radius: 5px;
height: 555px;
padding:30px;
margin-bottom;300px;
background:white;
text-align:center;
}
</style>
</head>
<body>
<class="container-fluid">
<div class="innerBox">
<div class="row">
<div class="col-xs-12">
<h1><center>The Black Panther Party</center></h1>
<h2><em><center>A Brief History</center></em></h2>
<div class="pictureBox">
<img src="https://images-na.ssl-images-amazon.com/images/I/61dK9zOrO4L.jpg">
<p>The Black Panther Party Poster Print by Wishum Gregory</p>
</div>
<br>
<br>
<h3>Here is a timeline of the Black Panther Movement:</h3>
<ul>
<li><strong>1966</strong> - Bobby Seale and Huey Newton founded the political orgainization Black Panther Party for Self-Defense as it was originally called. The party was formed in responsed to police brutality and the original focus was to take up arms and to keep a watchful eye on Oakland police.</li>
<li><strong>1967</strong> - Co-Founder Huey Newton allegedly killed a police officer, John Frey.The Federal Bureau of Investigation (FBI) directs its program "COINTELPRO" to "neutralize" what they call "black nationalist hate groups". </li>
<li><strong>1968</strong> - Eldridge Cleaver's Soul on Ice is published. Martin Luther King is assassinated. Riots break out nationwide. A team of Panthers led by Eldridge Cleaver ambushes Oakland police officers. Panther Bobby Hutton is killed.</li>
<li><strong>1969</strong> - Community and social programs became a core of the party, including Free Breakfast for Children Program and community health clinics.</li>
<li><strong>1970</strong> - Huey Newton's conviction is overturned in May 1970, but he remains incarcerated until August 1970. Newton tells The New York Times that "we've never advocated violence".</li>
<li><strong>1971</strong> - A fall-out between Newton and Cleaver ensues after they argue during a live broadcast link-up. the Newton and Cleaver factions engage in retaliatory assassinations of each other's members, resulting in the deaths of four people. Nationally, hundreds of Party members quit the BPP.</li>
<li><strong>1972</strong> - Newton shuts down chapters around the country, and calls the key members to Oakland. BPP members or supporters win a number of minor offices in the Oakland city elections.</li>
<li><strong>1973</strong> - The BPP focuses nearly all of its resources on winning political power in the Oakland city government. Seale runs for mayor; Elaine Brown runs for city council. Both lose, and many Party members resign after the losses.</li>
<li><strong>1974</strong> - Newton embarks on a major purge, expelling Bobby and John Seale, David and June Hilliard, Robert Bay, and numerous other top party leaders. Dozens of other Panthers loyal to Seale resigned or deserted. Newton murders Kathleen Smith, a teenage prostitute. He flees to Cuba. Elaine Brown takes over the leadership in his absence. Accountant Betty van Patter is murdered, after threatening to disclose irregularities in the Party's finances.</li>
<li><strong>1977</strong>
</ul>
<br>
<p>As inheritors of the discipline, pride, and calm self-assurance preached by Malcolm X, the Panthers became national heroes in black communities by infusing abstract nationalism with street toughness—by joining the rhythms of black working-class youth culture to the interracial élan and effervescence of Bay Area New Left politics ... In 1966, the Panthers defined Oakland's ghetto as a territory, the police as interlopers, and the Panther mission as the defense of community. The Panthers' famous "policing the police" drew attention to the spatial remove that White Americans enjoyed from the police brutality that had come to characterize life in black urban communities.</p>
<p><em>-Author Jama Lazerow</em></p>
<br>
<h4>If you would like more information on the history of the Black Panthers and the Black Panther movement, visit the
<a href="https://en.wikipedia.org/wiki/Black_Panther_Party">Wikipedia Page.</a>
</h4>
<p><center>Source: Black Panther Party. (2018, March 05). Retrieved March 10, 2018, from https://en.wikipedia.org/wiki/Black_Panther_Party</a></center></p>
</div>
</div>
</div>
</div>
<p><center>Coded by DeOnna Gray<center></p>
</body>
What you did is fine although I would recommend a couple of changes.
Just the way codepen works you have separate areas for your CSS, HTML and JS code.
Therefore you don’t need the <style> defenition inside the HTML.
You also don’t need <head> section. This is added for you automatically. Debug and view source of your page to see the actually output.
For centering text, instead of using the <center> tag use in CSS { text-align: center; } as a CSS rule on the elements you want to apply it to.
Hey, thank you for the feedback. Following the rules for the tribute page everything has to be in the HTML section, the only exception being the line of code that he explained had to be put in CSS so our link would work correctly. This information is good to know though for future exercises so thank you!
1 Like
At the 3:30 mark in the video of how to make the tribute page he says that everything should be in the HTML section aside from the code he shows to put in the CSS section. https://www.freecodecamp.org/challenges/build-a-tribute-page
Okay, will do. Thank you!