trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2024-09-28 16:09:17 -07:00
Code Issues Projects Releases Wiki Activity

add github label to index.html

Browse Source
This commit is contained in:
Trent Palmer 2020-04-26 13:04:26 -07:00
parent 0636b433ca
commit fdb927e29d
3 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
drum-machine/index.html
View File

@ -20,7 +20,7 @@
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</div> </div>
<div id="drum-machine"> <div id="drum-machine">
<a href="https://github.com/TrentSPalmer/fcc-challenges/tree/gh-pages/drum-machine"> <a href="https://github.com/TrentSPalmer/fcc-challenges/tree/gh-pages/drum-machine" target="_blank">
<img src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149" <img src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149"
class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"> class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a> </a>

52
fcc_challenges.css
View File

@ -2,10 +2,16 @@ body, html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Baloo Bhai', serif; font-family: 'Baloo Bhai', serif;
color: #f1f3ce;
background-color: #00293C; background-color: #00293C;
} }
body {
color: #f1f3ce;
max-width: 900px;
margin: auto;
padding: 10px;
}
h1 { h1 {
font-size: 1.4em; font-size: 1.4em;
margin-bottom: -.5em; margin-bottom: -.5em;
@ -21,7 +27,7 @@ div {
width: 90%; width: 90%;
padding: .1em; padding: .1em;
} }
a { .link {
box-shadow: .1em .1em black; box-shadow: .1em .1em black;
text-decoration: none; text-decoration: none;
text-indent: 1em; text-indent: 1em;
@ -34,16 +40,54 @@ a {
border: .1em solid black; border: .1em solid black;
border-radius: .3em; border-radius: .3em;
} }
a:hover { .link:hover {
background-color: #f62a00; background-color: #f62a00;
} }
a:focus { .link:focus {
background-color: #f1f3ce; background-color: #f1f3ce;
color: #f62a00; color: #f62a00;
} }
.attachment-full {
position: absolute;
right: 0px;
height: 149px;
width: 149px;
}
.githubLabel {
background-color: #00293C;
border: none;
width: 149px;
height: 0px;
position: absolute;
right: 0px;
}
@media (min-width: 1201px) { @media (min-width: 1201px) {
div { div {
width: 95% width: 95%
} }
} }
@media (orientation: portrait) {
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}
@media (orientation: landscape) and (max-height: 400px) {
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}

20
index.html
View File

@ -9,33 +9,37 @@
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Baloo+Bhai" /> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Baloo+Bhai" />
</head> </head>
<body> <body>
<a href="https://github.com/TrentSPalmer/fcc-challenges/tree/gh-pages/drum-machine" class="githubLabel" target="_blank">
<img src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149"
class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a>
<h1 id="title">FCC Challenges</h1> <h1 id="title">FCC Challenges</h1>
<h2>Repository View</h2> <h2>Repository View</h2>
<div> <div>
<a href="https://github.com/TrentSPalmer/fcc-challenges" target="_blank">GitHub Repository of This Page</a> <a class="link" href="https://github.com/TrentSPalmer/fcc-challenges" target="_blank">GitHub Repository of This Page</a>
</div> </div>
<h2>Responsive Web Design Projects</h2> <h2>Responsive Web Design Projects</h2>
<div> <div>
<a href="mccain-tribute/" target="_blank">Tribute Page - McCain Tribute</a> <a class="link" href="mccain-tribute/" target="_blank">Tribute Page - McCain Tribute</a>
</div> </div>
<div> <div>
<a href="how-was-dinner/" target="_blank">Survey Form - How Was Dinner?</a> <a class="link" href="how-was-dinner/" target="_blank">Survey Form - How Was Dinner?</a>
</div> </div>
<div> <div>
<a href="tools-that-love-you/" target="_blank">Product Landing Page <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tools That Love You</a> <a class="link" href="tools-that-love-you/" target="_blank">Product Landing Page <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tools That Love You</a>
</div> </div>
<div> <div>
<a href="lmde-3-disk-encryption/" target="_blank">Technical Documentation <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LMDE 3 Disk Encryption</a> <a class="link" href="lmde-3-disk-encryption/" target="_blank">Technical Documentation <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LMDE 3 Disk Encryption</a>
</div> </div>
<h2>Front End Library Projects</h2> <h2>Front End Library Projects</h2>
<div> <div>
<a href="random-quote-machine/build" target="_blank">Random Quote Machine</a> <a class="link" href="random-quote-machine/build" target="_blank">Random Quote Machine</a>
</div> </div>
<div> <div>
<a href="markdown-previewer" target="_blank">Markdown Previewer</a> <a class="link" href="markdown-previewer" target="_blank">Markdown Previewer</a>
</div> </div>
<div> <div>
<a href="drum-machine" target="_blank">Drum Machine</a> <a class="link" href="drum-machine" target="_blank">Drum Machine</a>
</div> </div>
</body> </body>
</html> </html>