Skip to content

Instantly share code, notes, and snippets.

@patobottos

patobottos/freecodecamp_tribute-page.markdown

Last active September 29, 2022 10:53
Show Gist options
  • Save patobottos/41384644063846c78e48a3cb7358f947 to your computer and use it in GitHub Desktop.
Save patobottos/41384644063846c78e48a3cb7358f947 to your computer and use it in GitHub Desktop.
Download ZIP
2021-10-26 FCC: Tribute Page
Raw
freecodecamp_tribute-page.markdown
Raw
index.html
<!--
Hello Camper!
Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<!doctype html>
<html>
<!--THIS IS THE HEAD-->
<head>
<!--THIS IS THE META-->
<meta charset="utf-8">
<title>CodePen - FCC: Tribute Page</title>
</head>
<!--THIS IS THE BODY-->
<!--User Story #1-->
<body id="main">
<div>
<!--User Story #2-->
<h1 id="title">Mahatma Gandhi</h1>
</div>
<!--User Story #3-->
<div id="img-div">
<!--User Story #4-->
<img id="image" src="https://cutt.ly/0RP4CkD" alt="Mahatma Gandhi">
<!--User Story #5-->
<p id="img-caption">Mahatma Gandhi</p>
</div>
<!--User Story #6-->
<div id="tribute-info">
<p>Mohandas Karamchand Gandhi (2 October 1869 – 30 January 1948) was an Indian lawyer, anti-colonial nationalist and political ethicist who employed nonviolent resistance to lead the successful campaign for India's independence from British rule and in turn to inspire movements for civil rights and freedom across the world. The honorific Mahātmā (Sanskrit: "great-souled", "venerable"), first applied to him in 1914 in South Africa, is now used throughout the world.
<br>
Born and raised in a Hindu family in coastal Gujarat, Gandhi trained in the law at the Inner Temple, London, and was called to the bar at age 22 in June 1891. After two uncertain years in India, where he was unable to start a successful law practice, he moved to South Africa in 1893 to represent an Indian merchant in a lawsuit. He went on to live in South Africa for 21 years. It was here that Gandhi raised a family and first employed nonviolent resistance in a campaign for civil rights. In 1915, aged 45, he returned to India. He set about organising peasants, farmers, and urban labourers to protest against excessive land-tax and discrimination. Assuming leadership of the Indian National Congress in 1921, Gandhi led nationwide campaigns for easing poverty, expanding women's rights, building religious and ethnic amity, ending untouchability, and above all for achieving swaraj or self-rule.
<br>
Also in 1921, Gandhi adopted the use of a short dhoti woven with hand-spun yarn as a mark of identification with India's rural poor. He began to live in a self-sufficient residential community and to eat simple food; he undertook long fasts as a means of both introspection and political protest. Bringing anti-colonial nationalism to the common Indians, Gandhi led them in challenging the British-imposed salt tax with the 400 km (250 mi) Dandi Salt March in 1930 and in calling for the British to quit India in 1942. He was imprisoned many times and for many years in both South Africa and India.
<br>
Gandhi's vision of an independent India based on religious pluralism was challenged in the early 1940s by a Muslim nationalism which demanded a separate homeland for Muslims within British India. In August 1947, Britain granted independence, but the British Indian Empire was partitioned into two dominions, the Hindu-majority India and the Muslim-majority Pakistan. As many displaced Hindus, Muslims, and Sikhs made their way to their new lands, religious violence broke out, especially in the Punjab and Bengal. Abstaining from the official celebration of independence in Delhi, Gandhi visited the affected areas, attempting to alleviate distress. In the months following, he undertook several hunger strikes to stop the religious violence. The last of these, begun on 12 January 1948 when he was 78, also had the indirect goal of pressuring India to pay out some cash assets owed to Pakistan. Some Indians thought Gandhi was too accommodating to Pakistan. Among them was Nathuram Godse, a Hindu nationalist who assassinated Gandhi on 30 January 1948 by firing three bullets into his chest.
<br>
Gandhi's birthday, 2 October, is commemorated in India as Gandhi Jayanti, a national holiday, and worldwide as the International Day of Nonviolence. Gandhi is commonly, though not formally, considered the Father of the Nation in India and was commonly called Bapu (Gujarati: endearment for father, papa).<br>
</p>
</div>
<!--User Story #7-->
<div /*id="tribute-link"*/>
<a id="tribute-link" href="https://cutt.ly/ORP2Ozn" target="_blank">Read more about Gandhi's history.</a>
</div>
</body>
</html>
Raw
script.babel
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
Raw
scripts
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Raw
style.css
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* MY OWN STYLES */
#main {
font-family: Arial, Helvetica, sans-serif;
background: #90AFC5;
max-width: 1920px;
}
#title {
color: white;
padding: 30px;
text-align: center;
height: 60px;
/*font-weight: bold;*/
font-size: 50px;
font-weight: 600;
background: #336B87;
}
#img-div {
text-align: center;
background: /*#90AFB5;#505160;*/#4b96bb;
}
#img-caption {
padding: 10px;
font-size: 18px;
color: white;
}
/* User Story #8 */
#image {
max-width: 100%;
width: 450px;
height: auto;
/* END User Story #8 */
/* User Story #9 */
display: block;
margin-left: auto;
margin-right: auto;
/* END User Story #9 */
}
#tribute-info {
background: #336B87;
color: white;
padding: 20px;
font-size: 16px;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
}
#tribute-link {
padding: 10px;
font-size: 16px;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment