Skip to content

Instantly share code, notes, and snippets.

@valerikalinina

valerikalinina/a-tribute-page.markdown

Created June 16, 2017 18:58
Show Gist options
  • Save valerikalinina/c9f7015a2071741519e45b27c87afbb7 to your computer and use it in GitHub Desktop.
Save valerikalinina/c9f7015a2071741519e45b27c87afbb7 to your computer and use it in GitHub Desktop.
Download ZIP
a Tribute page
Raw
a-tribute-page.markdown
Raw
index.html
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Raleway+Dots|Raleway:300,300i,400,500,700" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="row">
<div class="col-md-6 text-center">
<span class="glyphicon glyphicon-camera" ></span>
<a class="link link--dots" href="#photo">Photo</a>
</div>
<div class="col-md-6 text-center">
<span class="glyphicon glyphicon-star-empty"></span>
<a class="link link--dots" href="#info">A time line</a>
</div>
</div>
</header>
<main>
<div class="text-title">
<h1 class="title text-animated text-center">Edson Arantes do Nascimento</h1>
</div>
<div class="image" id="photo">
<img class="img-responsive" src="https://img.championat.com/i/article/59/82/1363185982_b_pele.jpg" alt="Yonger Pele"/>
<p class="image__describtion text-center">17-year-old Pele received unanimous recognition from experts, spectators and rivals and became the youngest champion in the history of world championships.</p>
</div>
<div class="image-two">
<img class="img-responsive" src="http://worldpronos.com/website/var/tmp/image-thumbnails/0/4159/thumb__auto_a56ef9693f9ece61b07876dabb7b8970/biography-football-pele-1.jpeg" alt="Pele is a champion" />
<p class="image__describtion text-center">Pelé began playing for Santos at age 15 and the Brazil national football team at 16. During his international career, he won three FIFA World Cups : 1958 , 1962 and 1970 , being the only player ever to do so.</p>
</div>
<div class="info" id="info">
<div class="info-text">
<h2 class="title text-center">Here's a time line of Pelé</h2>
<ul class="info__items">
<li class="info__item">Born 23 October 1940, Três Corações, Minas Gerais, Brazil</li>
<li class="info__item">1956 - he signed a professional contract with the club in "Santos".</li>
<li class="info__item">1957 - in this season season started, Pelé was given a starting place in the first team and, at the age of 16, became the top scorer in the league.</li>
<li class="info__item">1957 - Ten months after signing professionally, the teenager was called up to the Brazil national team.</li>
<li class="info__item">1958 - Pelé won his first FIFA World Cups. He was the youngest player of that tournament, and at the time the youngest ever to play in the World Cup.</li>
<li class="info__item">1962 - Won again FIFA World Cups.</li>
<li class="info__item">1970 - The final tournament of 1970 (the fourth in the sports biography of Pele) became a triumphal one - for him personally, and for the whole team, whose composition in this championship many experts are the strongest in the history of the Brazilian national team.</li>
<li class="info__item">1975 - Finished performances for Santos and the national team.</li>
<li class="info__item">1975 - Pele signed a contract with the American professional club "Cosmos".</li>
<li class="info__item">October 1, 1977 Pele, who added to his extensive collection, who took the title of US champion, played a farewell match in which he played for Cosmos and Santos at one time, and completed his football career.</li>
<li class="info__item">1995 - Brazilian President Fernando Henrique Cardoso appointed Pelé to the position of Extraordinary Minister for Sport, and he was also appointed a UNESCO Goodwill Ambassador.</li>
<li class="info__item">1999 - The IOC called Pele the greatest athlete of the century (although he never participated in the Olympics)</li>
</ul>
</div>
</div>
<div class="container">
<div class="author text-center">Pele always remained an adherent of the team game.</div>
<p class="text text-title">"Without a common effort, a victory in football is impossible," he says. "Football is a team, a team, not one or two or three star players."</p>
<p class="wish text-center">If you have time, you should watch the film about him - "Pelé: Birth of a Legend" or read more about this incredible human being on his <a class="link" href="https://en.wikipedia.org/wiki/Pel%C3%A9">Wikipedia entry</a>.</p>
</div>
</main>
<footer>
<div class="developer text-center">Written and coded by <a class="link" href="#">Valeri Kalinina</a></div>
</footer>
</body>
Raw
style.css
body {
min-width: 620px;
font-family: 'Merriweather', serif;
font-size: 16px;
line-height: 20px;
margin: 0;
}
img {
width: 100%;
}
h1,
h2 {
font-family: 'Raleway', sans-serif;
}
.link {
font-family: 'Raleway', sans-serif;
font-weight: 200;
font-size: 18px;
color: rgba(0, 0, 0, 0.3);
}
.link:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.6);
}
.link:active {
color: rgba(0, 0, 0, 0.2);
}
.link--dots {
font-family: 'Raleway Dots', cursive;
font-size: 30px;
line-height: 30px;
text-decoration: none;
}
.container-fluid {
min-width: 620px;
padding: 0;
}
header {
background-color: white;
padding: 15px 0;
color: black;
}
main {
color: white;
background-color: rgba(0, 0, 1, 0.5);
padding: 0 20px;
font-family: 'Merriweather', serif;
font-size: 16px;
line-height: 20px;
padding-top: 50px;
}
.text-title {
border-top: 1px dotted #fff;
border-bottom: 1px dotted #fff;
padding: 50px 10px;
color: black;
margin-top: 10px;
margin-bottom: 50px;
background-image: url('https://images.vexels.com/media/users/3/140307/isolated/preview/382007f0d8744db97c4981d448a58c88-footballer-kicking-by-vexels.png');
background-repeat: no-repeat;
background-position: right;
}
main .title {
position: relative;
font-size: 70px;
line-height: 176px;
z-index: 1;
margin-bottom: 90px;
margin-top: 10px;
}
main .title::after {
position: absolute;
content: 'known as Pelé';
top: 100px;
left: 20px;
font-size: 120px;
line-height: 200px;
color: rgba(255, 255, 255, 0.4);
z-index: 0;
}
.info .title::after {
display: none;
}
.image__describtion {
position: relative;
font-size: 30px;
line-height: 36px;
font-family: 'Raleway Dots', cursive;
text-align: center;
color: rgba(255, 255, 255, 1);
margin: 100px 0 60px;
}
.image__describtion::after {
position: absolute;
content: '17-year-old';
top: -80px;
left: 0;
font-size: 120px;
line-height: 120px;
font-family: 'Raleway', sans-serif;
color: rgba(255, 255, 255, 0.2);
}
.image-two .image__describtion::after {
content: 'Pelé won';
}
.info {
position: relative;
width: 100%;
background-image: url('https://www.thestar.com/content/dam/thestar/news/insight/2014/06/30/tim_hudak_pele_and_a_sexy_mugshot_what_were_you_thinking/pele.jpg');
background-repeat: no-repeat;
background-position: top;
margin: 0;
}
.info-text {
padding: 60px 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.info .title {
position: absolute;
top: -45px;
left: center;
font-size: 40px;
line-height: 40px;
color: black;
}
.author {
font-size: 30px;
line-height: 36px;
color: black;
padding-top: 50px;
}
.wish {
color: black;
padding-bottom: 50px;
}
.text {
font-family: 'Raleway', sans-serif;
font-size: 60px;
line-height: 66px;
padding: 150px 0;
color: rgba(255, 255, 255, 0.6);
}
footer {
font-family: 'Raleway Dots', cursive;
font-weight: 200;
font-size: 18px;
color: black;
background-color: white;
padding: 20px 0;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment