Tucan444/Fruit-Tart-Stalking
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

better css

Browse Source
This commit is contained in:
Benjamín 2020-12-12 11:57:00 +01:00
parent ca312ed3ee
commit a5a03b083c
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -46,9 +46,9 @@
<footer> <footer>
<!-- add link to ur website when done --> <!-- add link to ur website when done -->
<p class="footer">Author: Tucan444</p> <a href="https://tucan444.itch.io/" id="link"><p class="footer">Author: Tucan444</p></a>
</footer> </footer>
<script src="backend.js"></script> <script type="module" src="./backend.js"/>
</body> </body>
</html> </html>

37
style.css
View File

@ -23,14 +23,17 @@ header{
} }
#logo{ #logo{
position: relative;
cursor: pointer; cursor: pointer;
border: 5px solid #f00543; border: 5px solid #f00543;
border-radius: 20px; border-radius: 20px;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s, top 0.15s ease-in-out;
top: 0px;
} }
#logo:hover{ #logo:hover{
border-color: #a3042e; border-color: #a3042e;
top: -8px;
} }
#navbar_items { #navbar_items {
@ -38,11 +41,18 @@ header{
} }
#navbar_items li{ #navbar_items li{
position: relative;
display: inline-block; display: inline-block;
padding: 0px 20px; padding: 0px 20px;
border: 5px solid #f00543; border: 5px solid #f00543;
border-radius: 20px; border-radius: 20px;
background-color: #ff184e; background-color: #ff184e;
transition: right 0.15s ease-in-out;
right: 0px;
}
#navbar_items li:hover{
right: -2px;
} }
#navbar_items li a{ #navbar_items li a{
@ -55,26 +65,39 @@ header{
} }
.footer{ .footer{
cursor: pointer;
font-family: "Noto Sans JP", sans-serif; font-family: "Noto Sans JP", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
color: #000000; color: #000000;
margin-left: 20px; margin-left: 20px;
transition: all 0.4s ease 0s;
}
.footer:hover{
color: #ffffff;
}
#link {
text-decoration: none;
} }
/* css for main program here */ /* css for main program here */
#title{ #title{
position: relative;
margin: 1% 10% 1% 10%; margin: 1% 10% 1% 10%;
padding: 3%; padding: 3%;
border: 5px solid #f00543; border: 5px solid #f00543;
border-radius: 20px; border-radius: 20px;
background-color: #ff184e; background-color: #ff184e;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s, top 0.15s ease-in-out;
top: 0px;
} }
#title:hover{ #title:hover{
border-color: #a3042e; border-color: #a3042e;
top: -8px;
} }
#title_text{ #title_text{
@ -86,16 +109,19 @@ header{
} }
#description{ #description{
position: relative;
margin: 1% 10% 1% 10%; margin: 1% 10% 1% 10%;
padding: 3%; padding: 3%;
border: 5px solid #f00543; border: 5px solid #f00543;
border-radius: 20px; border-radius: 20px;
background-color: #ff184e; background-color: #ff184e;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s, top 0.15s ease-in-out;
top: 0px;
} }
#description:hover{ #description:hover{
border-color: #a3042e; border-color: #a3042e;
top: -8px;
} }
#description_text{ #description_text{
@ -130,11 +156,13 @@ header{
} }
#main_images { #main_images {
position: relative;
list-style: none; list-style: none;
border: 6px solid #ff759a; border: 6px solid #ff759a;
border-radius: 20px; border-radius: 20px;
transition: all 0.3s ease 0s; transition: top 0.15s ease-in-out, border-color 0.3s ease-in-out;
border-style: hidden; border-style: hidden;
top: 0px;
} }
#main_images li{ #main_images li{
@ -143,4 +171,5 @@ header{
#main_images:hover{ #main_images:hover{
border-color: #ffb5c9; border-color: #ffb5c9;
top: -8px;
} }