codecademydev/index.html Secret

## index.html
<!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>

## styles.css
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;
  }
}
	<!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>
	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;
	}
	}