Skip to content

Instantly share code, notes, and snippets.

@emygeek

emygeek/index.html

Last active February 9, 2017 07:46
Show Gist options
  • Save emygeek/24e9488a186b8e0a9034893d3dfb9bed to your computer and use it in GitHub Desktop.
Save emygeek/24e9488a186b8e0a9034893d3dfb9bed to your computer and use it in GitHub Desktop.
Download ZIP
Tribute Page (FreeCodeCamp)
Raw
index.html
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
<div id="home">
<div class="container-fluid">
<div class="tagline text-center">
<h1>Serena Williams</h1>
<h2>Sportsperson of the year 2015</h2>
<span class="greyed-text">Scroll Down to learn more...</span>
</div>
<div class="row">
</div>
</div>
</div>
<div id="about" class="page">
<div class="container">
<div class="row">
<h2 class="section-title text-center">About</h2>
</div>
<div class="row">
<div class="col-md-6">
<img src="http://res.cloudinary.com/emygeek/image/upload/v1485075845/serena_nodu2x.jpg" class="img-responsive img-circle" >
</div>
<div class="col-md-6">
<p>Born in Saginaw, Michigan, Serena is the youngest of Price's five daughters. She started playing tennis at the age of three, coached by her parents.
Her professional career started in 1995. Starting from the 304 rank, she zoomed up her way to make place for herself in the top 100, at the 99th rank, beating world No. 7 and world No. 4, before losing the semi-finals to world no. 5.
Year 1998 started what became a legacy in her tennis playing career as she recorded a victory at the mixed doubles titles at Wimbledon and the US Open. The sisters went on to win two more doubles titles. She finished the year ranking at the 20th spot.
</p>
</div>
</div>
</div>
</div>
<div id="quote">
<blockquote><h3>I really think a champion is defined not by their wins but by how they can recover when they fall.</h3></blockquote>
</div>
<div id="timeline" class="page">
<div class="container">
<div class="row">
<h2 class="section-title text-center">Major Achievements</h2>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<ul class="achievements">
<li>Second African-American woman to win a Grand Slam title at 17 years old <span class="greyed-text">1999 US Open</span></li>
<li>Fifth woman to hold all four Grand Slam singles titles simultaneously and the first African-American to win the championship.<span class="greyed-text">2003 Australian Open</span></li>
<li>Serena won her 6th Wimbledon title. She became the only person in history, male or female, to win three of the four grand slams 6 times <span class="greyed-text">2015</span></li>
<li>Her Wimbledon 2016 crown was her 9th grand slam singles title since reaching her 30th birthday. No other female player has won more than 3 grand slam singles titles after turning 30 years of age.</li>
<li>As of the US Open, Serena holds a 309-43 singles record in grand slams, winning 100 of those grand slam singles matches since turning 30 years old. Serena holds the record for most grand slam singles match wins of any player, female or male, in tennis history.<span class="greyed-text">2016</span></li>
<li>Beats sister Venus in the Australian Open final, collecting a 23rd grand slam title to surpass Steffi Graf for the Open Era lead. <span class="greyed-text">January 28, 2017</span></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row text-center">
<h3>Follow her on Social Networks</h3>
<ul class="social">
<li><a href="https://www.facebook.com/SerenaWilliams/"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/serenawilliams?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/serenawilliams/?hl=en"><i class="fa fa-instagram"></i></a></li>
</ul>
<h3> Or visit her official web page</h3>
<a href="http://serenawilliams.com/" target="_blank" class="btn btn-main">serenawilliams.com</a>
</div>
<div class="row text-center author">
<small>A tribute page designed by <a href="https://www.linkedin.com/in/mariembenoun">Marie Mbenoun</a></small>
</div>
</div>
</div>
Raw
style.css
/***************************
Reset Basic Styles
****************************/
html,body, h1, h2, h3, h4, p, a{
margin:0;
padding:0;
}
/***************************
Begin Main Styles
****************************/
body{
font-family: 'Quicksand', sans-serif;
background:#f0f7f9;
letter-spacing:0.8px;
font-size:17px;
line-height:2;
}
h1{
margin-bottom:35px;
font-size:50px;
}
h2{
margin-bottom:30px;
font-size:30px;
}
h3{
margin-bottom: 25px;
font-size:25px;
}
.tagline h1, h2.section-title, span.greyed-text, #footer small{
font-family: 'Love Ya Like A Sister', cursive;
}
h2.section-title:after{
content: '';
position: relative;
height: 2px;
width: 40px;
background: currentColor;
top: 10px;
display: block;
left: 50%;
transform: translateX(-50%);
}
.page{
padding-top: 150px;
padding-bottom:150px;
}
.btn-main{
color: #fff;
background-color: rgb(19, 35, 49);
border-radius: 0;
transition:all 0.5s;
}
.btn-main:hover{
background:rgb(47, 78, 105);
color:#fff;
border-radius:5px;
font-size: 14.5px;
}
/***************************
Home Section Styles
****************************/
#home{
position:relative;
height:100vh;
background:linear-gradient(to bottom, rgba(22, 59, 127, 0.75), #f0f7f9);
background:url(http://res.cloudinary.com/emygeek/image/upload/v1485075838/serena-williams-fashion_akd7cv.jpg);
background-size:cover;
background-attachment:fixed;
}
#home:before{
content:'';
background:rgba(0, 0, 0, 0.56);
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
#home .tagline{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin-right:-50%;
border:10px solid;
padding:20px;
color:#fff;
}
.tagline h2{
font-size:25px;
}
.tagline span{
color:grey;
}
/***************************
About Section Styles
****************************/
#about{}
#about img{
height:400px;
margin:10px auto 20px auto;
}
/***************************
Timeline Section Styles
****************************/
ul.achievements{
list-style-type:none;
}
ul.achievements li{
margin: 20px 30px;
box-shadow: 0px 1px 5px ;
padding:5px 20px;
}
ul.achievements li:nth-child(odd){
border-left: 10px solid #cdcdcd;
}
ul.achievements li:nth-child(even){
border-right: 10px solid #334f9a;
}
ul.achievements li span{
display:block;
text-align:right;
font-size: 13px;
font-style:italic;
}
/***************************
Quote Section Styles
****************************/
#quote{
height:100vh;
position:relative;
background: url(http://res.cloudinary.com/emygeek/image/upload/v1485075843/serena-shots3_vz7un1.jpg);
background-size:cover;
background-attachment:fixed;
}
#quote:before{
content:'';
background:linear-gradient(to bottom right, rgba(28, 30, 128, 0.82), rgba(255, 255, 255, 0.38));
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#quote blockquote{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
/*margin-right:-50%;*/
}
#quote blockquote h3{
font-family: 'Calligraffitti', cursive;
font-size:30px;
color: #fff;
line-height:1.7;
}
/***************************
Footer Section Styles
****************************/
ul.social{
list-style-type: none;
}
ul.social li{
display:inline-block;
margin-right: 10px;
}
ul.social li i.fa{
font-size: 15px;
border:2px solid;
padding:10px;
border-radius:50%;
transition: all 0.5s;
}
ul.social li i.fa:hover{
transform:scale(1.3);
background:#fff;
border:transparent;
}
#footer{
padding: 100px 0;
background: linear-gradient(to top, rgba(22, 59, 127, 0.75), #f0f7f9);
}
#footer .author{
margin-top:50px;
}
#footer .author:before{
content:'';
display:block;
height:2px;
width:250px;
top:-15px;
left:50%;
transform:translateX(-50%);
position:relative;
background:#fff;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Raw
tribute-page-freecodecamp.markdown

Tribute Page (FreeCodeCamp)

Tribute page for Serena Williams. Tribute designed as part of FreeCodeCamp challenges.

A Pen by Marie on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment