enpaul
/
allaroundhere.org
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix styling of social buttons again

This commit is contained in:
Ethan Paul 2020-12-27 19:42:21 -05:00
parent cc2f53a1d1
commit 2842ef40bf
No known key found for this signature in database
GPG Key ID: C5F5542B54A4D9C6
2 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/style.css
View File

@ -46,7 +46,8 @@ a:hover {
padding: 1em; padding: 1em;
max-width: 50em; /* width: 40em; */
max-width: 90%;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
@ -55,17 +56,17 @@ a:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute; position: absolute;
top: 50%; top: 20%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, 0);
z-index: 10; z-index: 10;
} }
#logo { #logo {
margin: auto; margin: auto;
margin-top: -10em; margin-top: -5em;
max-width: 50%; max-width: 60%;
min-width: 30%; width: 50%;
display: block; display: block;
border-style: solid; border-style: solid;
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
@ -127,6 +128,17 @@ ul.buttons li {
0px 0px 7px #f77737; 0px 0px 7px #f77737;
} }
#background-info {
text-align: right;
font-size: 0.85em;
padding: 0.75em;
position: fixed;
bottom: 0;
right: 0;
z-index: 5;
}
.footer { .footer {
font-size: 0.9em; font-size: 0.9em;
} }

47
index.html
View File

@ -29,35 +29,24 @@
<h1>AllAroundHere</h1> <h1>AllAroundHere</h1>
<p> <p>
<span class="tape-over"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
culpa qui officia deserunt mollit anim id est laborum.
</span>
</p> </p>
<ul class="buttons"> <ul class="buttons">
<li> <li><a class="button-youtube" href="https://www.youtube.com/channel/UCnJum8qCKlz36SzSsSeZy1w">
<a class="button-youtube" href="https://www.youtube.com/channel/UCnJum8qCKlz36SzSsSeZy1w"> <i class="fab fa-youtube"></i>&nbsp;Youtube
<i class="fab fa-youtube"></i> </li></a>
Youtube <li><a class="button-instagram" href="https://www.instagram.com/allaroundhere/">
</a> <i class="fab fa-instagram"></i>&nbsp;Instagram
</li> </li></a>
<li> <li><a class="button-twitter" href="https://twitter.com/enpaul_">
<a class="button-instagram" href="https://www.instagram.com/allaroundhere/"> <i class="fab fa-twitter"></i>&nbsp;Twitter
<i class="fab fa-instagram"></i> </li></a>
Instagram
</a>
</li>
<li>
<a class="button-twitter" href="https://twitter.com/AllAroundHere1">
<i class="fab fa-twitter"></i>
Twitter
</a>
</li>
</ul> </ul>
<div class="footer"> <div class="footer">
@ -65,6 +54,12 @@
<a href="https://enpaul.net/" target="_blank">E.N.Paul</a> <a href="https://enpaul.net/" target="_blank">E.N.Paul</a>
</div> </div>
</div> </div>
<div id="background-info">
<a href="" target="_blank" id="background-info-link">
Allis Engine #4, Metropolitan Waterworks Museum
</a>
</div>
</body> </body>
</html> </html>