keyemail/keyemail-dev
1
2
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added popups!

Browse source
This commit is contained in:
Patrick Hatsune 2024-06-03 12:21:25 -07:00
parent c1f8d94992
commit 46be945e1a
Signed by: keyemail
GPG key ID: 487C4334CE04CE66
1 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/views/HomePage.vue
View file

@ -6,20 +6,25 @@
<div id="name">
<h1>Keyemail</h1>
<ul>
<li>
<li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false">
<img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/>
<div v-if="showActiveBadge">Active Developer</div>
</li>
<li>
<li @mouseover="showHTMLBadge = true" @mouseleave="showHTMLBadge = false">
<img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/>
<div v-if="showHTMLBadge">HTML</div>
</li>
<li>
<img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
<li @mouseover="showCSSBadge = true" @mouseleave="showCSSBadge = false">
<img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
<div v-if="showCSSBadge">CSS</div>
</li>
<li>
<li @mouseover="showJavascriptBadge = true" @mouseleave="showJavascriptBadge = false">
<img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/>
<div v-if="showJavascriptBadge">Javascript</div>
</li>
<li>
<li @mouseover="showVue3Badge = true" @mouseleave="showVue3Badge = false">
<img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/>
<div v-if="showVue3Badge">Vue 3</div>
</li>
</ul>
</div>
@ -33,6 +38,15 @@
<script>
export default {
data () {
return {
showActiveBadge: false,
showHTMLBadge: false,
showCSSBadge: false,
showJavascriptBadge: false,
showVue3Badge: false
}
},
methods: {
downArrow(){
if(counter >= 4){
@ -47,6 +61,7 @@ export default {
}
}
}
var counter = 0;
</script>
@ -72,6 +87,19 @@ header {
margin-left: 20px;
}
#name div {
position: absolute;
top: 230px;
transform: translate(0%, -50%);
width: fit-content;
padding: 5px;
height: 20px;
background-color: #151d2f;
color: white;
font-family: 'Rubik', sans-serif;
border-radius: 5px;
}
header h1 {
color: white;
font-size: 3rem;
@ -206,13 +234,16 @@ article input {
height: 240px;
justify-content: center;
}
header #name {
#name {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 0;
}
#name div {
top: 325px
}
header h1 {
margin-left: 0px;
}