-
-
Save codecademydev/3bb53fddbfeec3f67222fdf289b60691 to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Muhammad Ali</title> | |
<link rel="stylesheet" type=text/css href=styles.css> | |
<link rel="stylesheet" href="<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300&family=Noto+Sans&display=swap" rel="stylesheet"> | |
</head> | |
<body> | |
<h1>Muhammad Ali Biography</h1> | |
<h3>(1942-2016)</h3> | |
<div id= "pageby"><p>RECREATE PAGE by : Atika Dewi Suryani</p></div> | |
<div class="image"><img src="mali.jpg" target=_blank alt="Bio" class="responsive"></div> | |
<br> | |
<p>1942 : <span>Muhammad Ali (Cassius Marcellus Clay, Jr.) is Born</span></p> | |
<p>1954 : <span>Muhammad Ali is pointed to boxing by police officer to channel his anger</span></p> | |
<p>1960 : <span>Muhammad Ali wins light-heavyweight gold medal at Summer Olympic</span></p> | |
<p>skip to</p> | |
<p>1964 : <span>Cassius Clay (Muhammad Ali) defeats Sonny Liston for Heavyweight Title</span></p> | |
<p>1964 : <span>Muhammad Ali marries Sonji Roi</span></p> | |
<p>1967 : <span>Muhammad Ali marries Belinda Boyd</span></p> | |
<p>1970 : <span>"The Fight of the Century" Joe Frazier vs Muhammad Ali</span></p> | |
<p>1980 : <span>Muhammad Ali comes out of retirement</span></p> | |
<p>2005 : <span>George W. Bush awards Muhammad Ali the Presidential Citizens Medal</span></p> | |
<p>2016 : <span>Muhammad Ali Dies</span></p> | |
<br> | |
<h3 id="title_form">If you find above information matters</h3> | |
<p id="description">Fill this form survey above. Many thanks ;)</p> | |
<div class="form"> | |
<form> | |
<label for="name">Name</label> | |
<input type="text" id="name" name="fullname" placeholder="Enter your name"> | |
<label for="country">Country</label> | |
<select id="country" name="country"> | |
<option value="australia">Australia</option> | |
<option value="canada">Canada</option> | |
<option value="usa">USA</option> | |
<option value="usa">etc</option> | |
</select> | |
<label for="subject">Subject</label> | |
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea> | |
<input id = "submit" type="submit" value="Submit"> | |
</form> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1 { | |
text-align: center; | |
font-family: "Josefin Sans", serif, sans-serif; | |
font-weight: bold; | |
margin-top: 40px; | |
} | |
h3 { | |
text-align: center; | |
font-family: "Josefin Sans", serif, sans-serif; | |
font-weight: bold; | |
} | |
#pageby p { | |
text-align: center; | |
font-family: "Josefin Sans", serif, sans-serif; | |
font-weight: 200; | |
font-size: 12px; | |
} | |
.image { | |
position:absolute; | |
max-width:45%; | |
max-height:45%; | |
top:50%; | |
left:50%; | |
overflow:visible; | |
opacity: .2; | |
} | |
.responsive { | |
position:relative; | |
max-width:100%; | |
max-height:100%; | |
margin-top:-50%; | |
margin-left:-50%; | |
} | |
p { | |
text-align: center; | |
font-family: "Josefin Sans", serif, sans-serif; | |
font-weight: 300; | |
font-size: 22px; | |
} | |
span { | |
color: black; | |
font-weight: 460; | |
opacity: .5; | |
} | |
/* Style inputs, select elements and textareas */ | |
input[type=text], select, textarea{ | |
font-family: "Josefin Sans", serif, sans-serif; | |
width: 100%; | |
padding: 12px; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
box-sizing: border-box; | |
resize: vertical; | |
} | |
/* Style the label to display next to the inputs */ | |
label { | |
font-family: "Josefin Sans", serif, sans-serif; | |
padding: 12px 12px 12px 0; | |
display: inline-block; | |
} | |
/* Style the submit button */ | |
input[type=submit] { | |
font-family: "Josefin Sans", serif, sans-serif; | |
background-color: #4CAF50; | |
color: white; | |
padding: 12px 20px; | |
border: none; | |
border-radius: 4px; | |
cursor: pointer; | |
float: right; | |
} | |
/* Style the container */ | |
.container { | |
border-radius: 5px; | |
background-color: #f2f2f2; | |
padding: 20px; | |
} | |
/* Floating column for labels: 25% width */ | |
.col-25 { | |
float: left; | |
width: 25%; | |
margin-top: 6px; | |
} | |
/* Floating column for inputs: 75% width */ | |
.col-75 { | |
float: left; | |
width: 75%; | |
margin-top: 6px; | |
} | |
/* Clear floats after the columns */ | |
.row:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ | |
@media screen and (max-width: 600px) { | |
.col-25, .col-75, input[type=submit] { | |
width: 100%; | |
margin-top: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment