Layout & Added Socials
This commit is contained in:
Keyemail
parent
e763964c99
commit
efff7676a9
11911
package-lock.json
generated
Normal file
11911
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -8,6 +8,11 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.png">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://kit.fontawesome.com/d18ce6e9fb.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
14
src/App.vue
14
src/App.vue
|
|
@ -16,12 +16,24 @@ export default {
|
|||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #192236;
|
||||
margin: 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.navbar h1{
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<div class="workinprogress">
|
||||
<div class="socials">
|
||||
<h1>Work In Progress</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.workinprogress {
|
||||
<style scoped>
|
||||
.socials {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,11 +10,11 @@
|
|||
<img alt="Profile Picture" src="../assets/roller_profile_circle.png">
|
||||
</div>
|
||||
<div class="workinprogress">
|
||||
<h1>-- More is to come soon! Work in progress. --</h1>
|
||||
<h1>-- Alpha site. Change is possible. --</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.header {
|
||||
position: relative;
|
||||
color: white;
|
||||
|
|
@ -56,6 +56,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1376px){
|
||||
.workinprogress{
|
||||
font-size: 20px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,150 @@
|
|||
<template>
|
||||
<div class="workinprogress">
|
||||
<h1>Work In Progress</h1>
|
||||
<div class="socials">
|
||||
<h1>My Socials!</h1>
|
||||
<div class="socialsgrid">
|
||||
<div class="discord">
|
||||
<h2>Discord</h2>
|
||||
<p>keyemail</p>
|
||||
<i class="fa-brands fa-discord"></i>
|
||||
</div>
|
||||
<a href="https://github.com/Keyemail" target="_blank">
|
||||
<div class="github">
|
||||
<h2>GitHub</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-github"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://steamcommunity.com/id/keyemail/" target="_blank">
|
||||
<div class="steam">
|
||||
<h2>Steam</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-steam"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://open.spotify.com/user/316yuurxrw3zcprxsnrvgamxktp4" target="_blank">
|
||||
<div class="spotify">
|
||||
<h2>Spotify</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-spotify"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCCNkKG8XoZCh52vLCbXYy7g" target="_blank">
|
||||
<div class="youtube">
|
||||
<h2>YouTube</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/keyemail1?igsh=OGQ5ZDc2ODk2ZA%3D%3D&utm_source=qr" target="_blank">
|
||||
<div class="instagram">
|
||||
<h2>Instagram</h2>
|
||||
<p>keyemail1</p>
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.workinprogress {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
<style scoped>
|
||||
.socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.socials h1 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.socialsgrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
align-content: start;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.socialsgrid a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.socialsgrid div{
|
||||
margin: 5px;
|
||||
width: 275px;
|
||||
height: 170px;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
border-color: white;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid transparent;
|
||||
transition: 0.4s border;
|
||||
}
|
||||
|
||||
.socialsgrid div:hover {
|
||||
cursor: pointer;
|
||||
border: 4px;
|
||||
border-style: solid;
|
||||
}
|
||||
.socialsgrid i {
|
||||
font-size: 35px;
|
||||
margin-top: auto;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.socialsgrid h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.discord {
|
||||
background-color: #5865F2;
|
||||
}
|
||||
|
||||
.github {
|
||||
background-color: #171515;
|
||||
}
|
||||
|
||||
.steam {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.spotify {
|
||||
background-color: #1DB954;
|
||||
}
|
||||
|
||||
.youtube {
|
||||
background-color: #CD201F;
|
||||
}
|
||||
|
||||
.instagram {
|
||||
background-color: #C13584;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 905px){
|
||||
.socialsgrid{
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 615px){
|
||||
.socialsgrid{
|
||||
grid-template-columns: auto;
|
||||
width: 80%
|
||||
}
|
||||
.socials {
|
||||
margin-top: 80px;
|
||||
justify-content: unset;
|
||||
}
|
||||
.socialsgrid div {
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue