sammy/freecodecamp-projects
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add "tribute page" certification project

Browse source
This commit is contained in:
CherryKitten 2022-10-02 19:50:51 +02:00
parent 5c64663cf0
commit 7c3f7374bd
Signed by: sammy
GPG key ID: 0B696A86A853E955
3 changed files with 93 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
1-responsive-web-design/2-tribute-page/index.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Tribute page</title>
</head>
<body>
<main id="main">
<h1 id="title">Great Baggi</h1>
<p class="subtitle">Will *definitely* put you to sleep.</p>
<div id="img-div" class="img-div">
<img id="image" src="https://gamersantai.com/wp-content/uploads/2021/01/great-baggi_img01.jpg" alt="A blue raptor-like monster, standing on a rock and looking downwards.">
<div class="caption" id="img-caption">
<p>Great Baggi looking down at you, menacingly.</p>
</div>
</div>
<p id="tribute-info" class="tribute-info">
Great Baggi, also known as the <i>Sleep Dog Wyvern</i>, or the <i>Cunning Usurper</i>, is a Large Monster from the
<a href="https://en.wikipedia.org/wiki/Monster_Hunter">Monster Hunter</a>
video game series.<br>
It was first introduced in
<a href="https://en.wikipedia.org/wiki/Monster_Hunter_Tri">Monster Hunter Tri</a>.<br><br>
Its eyes will glow yellow in the dark. Great Baggi are matured male Baggi that have taken over a pack of their own.<br>
It has developed its own unique ability; it can spit a tranquilizing liquid that inflicts sleep on its prey or hunters. It also has developed the ability to command Baggi to surround prey or hunters and spit tranquilizing liquid at them with a roar.<br>
Also, Great Baggi is really really cool and cute.<br><br>
Find out more about this beautiful creature at <a id="tribute-link" href="https://mhrise.kiranico.com/data/monsters/718470492" target="_blank">Kiranico</a>
</p>
</main>
</body>
</html>

60
1-responsive-web-design/2-tribute-page/styles.css Normal file
View file

@ -0,0 +1,60 @@
body{
background-color: #1A222F;
}
main{
background-color: #1C3A40;
margin: auto;
width: 80%;
text-align: center;
padding: 5px 0;
font-family: "Comic Sans MS", sans-serif;
}
h1{
margin: 10px auto;
}
.subtitle{
font-size: 12pt;
margin: 10px auto;
}
.img-div{
background-color: #1A222F;
width: 90%;
margin: auto;
}
.caption{
padding-top: 0;
padding-bottom: 20px;
font-family: unset;
font-size: 10pt;
}
.tribute-info{
max-width: 50%;
margin: auto;
}
a {
color: gray;
}
img{
padding: 10px;
margin: auto;
width: 75%;
max-width: 100%;
display: block;
}
ul{
max-width: 20%;
margin: 0 auto;
list-style-type: none;
padding: 0;
}
.right{
float: right;
}

3
index.html
View file

@ -11,6 +11,7 @@
<h1 id="title">CherryKitten Freecodecamp Projects</h1>
<p>This is just a quick linklist to the Projects, probably will be made prettier once there are more.</p>
<h2>Responsive Web Design</h2>
<a href=1-responsive-web-design/1-survey-form/index.html>Survey Form</a>
<a href=1-responsive-web-design/1-survey-form/index.html>Survey Form</a><br>
<a href="1-responsive-web-design/2-tribute-page/index.html">Tribute Page</a>
</body>
</html>