azhiya/fcc-tribute-page-ada-lovelace.markdown

## fcc-tribute-page-ada-lovelace.markdown

      
    Raw
  

              fcc-tribute-page-ada-lovelace.markdown
            
          
    FCC: Tribute Page - Ada Lovelace

A Pen by Hauwa Abashiya on CodePen.
License.

  
## index.html
<head>
  <title id="title">Ada Lovelace</title>
</head>

<main id="main">

    <h1>Ada Lovelace</h1>

    <p>The first computer programmer</p>

    <figure id="img-div">
    <img id="image" src="http://cdn.history.com/sites/2/2015/12/Ada_Lovelace_portrait-E.jpeg" alt="Watercolor portrait of Ada Lovelace wearing flowers in her hair.">
    <figcaption id="img-caption">Watercolor portrait of Ada King, Countess of Lovelace, circa 1840 by Alfred Edward Chalon</figcaption>
  </figure>

<section id="tribute-info">
    <h2>Timeline of Ada Lovelace's life:</h2>
    <ul>
      <li><strong>1815</strong> - Born Augusta Ada Byron in London, England</li>
      <li><strong>1833</strong> - Met Charless Babbage</li>
      <li><strong>1835</strong> - Married William King, 8<hs>th<hs> Baron King</li>
       <li><strong>1838</strong> - Became Countess of Lovelace when her husband became Earl of Lovelace</li>
      <li><strong>1841</strong> - Returned to working on mathematics</li>
      <li><strong>1843</strong> - Translated Menabrea's, Sketch of Charles Babbage Analytical Engine</li>
      <li><strong>1852</strong> - Died in Marylebone, London</li>
    </ul>
    <p>You can read more about this amazing woman on <a id="tribute-link" href="https://en.m.wikipedia.org/wiki/Ada_Lovelace" target="_blank">Wikipedia</a>.</p>
</section>
</main>

## script.babel
// coded by @ChaituVR
const projectName = 'tribute-page';
localStorage.setItem('example_project', 'Tribute Page');


## scripts
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

## style.css
/*main styles*/

html{
  font-size:16px;
  font-family:"Open Sans", sans-serif;
}

body{
  font-size:1rem;
  line-height:1.5;
  text-align:center;
  color:#202a38;
  margin:0;
  background:#f3f1ea;
}

/* main styles */
#main{
  margin:2rem 1rem;
  padding:auto;
}

/* img-div styles */
#img-div{
  margin: 2rem;
  max-width:100%;
}

#image{
  border-color:#8b8a85;
  border-width:30px;
  border-style:solid;
  max-width:100%;
  display:block;
  height:auto;
  margin: auto;
}

h1{
  font-size:3rem;
  vw:90vw;
}

/* tribute info styles */

h2{
  font-size: 1.5rem;
  vw:80vw;
}

p{
  vmin:75vmin;
}
/* link styles */
a{
  color:#0463c3;
}
a:hover{
  color:#ffa500;
}
a:visited{
  color:#68228b;
}

/**/
ul{
  margin:auto;
  width:500px;
  text-align:left;
}

@media (max-width: 850px){
  #img-caption{
    font-size:0.875rem;
  }
}

@media (max-width: 500px){

  #img-caption{
    font-size:0.675rem;
  }
}
	<head>
	<title id="title">Ada Lovelace</title>
	</head>

	<main id="main">

	<h1>Ada Lovelace</h1>

	<p>The first computer programmer</p>

	<figure id="img-div">
	<img id="image" src="http://cdn.history.com/sites/2/2015/12/Ada_Lovelace_portrait-E.jpeg" alt="Watercolor portrait of Ada Lovelace wearing flowers in her hair.">
	<figcaption id="img-caption">Watercolor portrait of Ada King, Countess of Lovelace, circa 1840 by Alfred Edward Chalon</figcaption>
	</figure>

	<section id="tribute-info">
	<h2>Timeline of Ada Lovelace's life:</h2>
	<ul>
	<li><strong>1815</strong> - Born Augusta Ada Byron in London, England</li>
	<li><strong>1833</strong> - Met Charless Babbage</li>
	<li><strong>1835</strong> - Married William King, 8<hs>th<hs> Baron King</li>
	<li><strong>1838</strong> - Became Countess of Lovelace when her husband became Earl of Lovelace</li>
	<li><strong>1841</strong> - Returned to working on mathematics</li>
	<li><strong>1843</strong> - Translated Menabrea's, Sketch of Charles Babbage Analytical Engine</li>
	<li><strong>1852</strong> - Died in Marylebone, London</li>
	</ul>
	<p>You can read more about this amazing woman on <a id="tribute-link" href="https://en.m.wikipedia.org/wiki/Ada_Lovelace" target="_blank">Wikipedia</a>.</p>
	</section>
	</main>
	// coded by @ChaituVR
	const projectName = 'tribute-page';
	localStorage.setItem('example_project', 'Tribute Page');
	/main styles/

	html{
	font-size:16px;
	font-family:"Open Sans", sans-serif;
	}

	body{
	font-size:1rem;
	line-height:1.5;
	text-align:center;
	color:#202a38;
	margin:0;
	background:#f3f1ea;
	}

	/* main styles */
	#main{
	margin:2rem 1rem;
	padding:auto;
	}

	/* img-div styles */
	#img-div{
	margin: 2rem;
	max-width:100%;
	}

	#image{
	border-color:#8b8a85;
	border-width:30px;
	border-style:solid;
	max-width:100%;
	display:block;
	height:auto;
	margin: auto;
	}

	h1{
	font-size:3rem;
	vw:90vw;
	}

	/* tribute info styles */

	h2{
	font-size: 1.5rem;
	vw:80vw;
	}

	p{
	vmin:75vmin;
	}
	/* link styles */
	a{
	color:#0463c3;
	}
	a:hover{
	color:#ffa500;
	}
	a:visited{
	color:#68228b;
	}

	/**/
	ul{
	margin:auto;
	width:500px;
	text-align:left;
	}

	@media (max-width: 850px){
	#img-caption{
	font-size:0.875rem;
	}
	}

	@media (max-width: 500px){

	#img-caption{
	font-size:0.675rem;
	}
	}