adding base template for working
This commit is contained in:
@ -1,47 +1,135 @@
|
||||
<script setup>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import TheWelcome from './components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
|
||||
<ul style="padding-top:60px"class="vertical">
|
||||
<li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
|
||||
<div class="text">Messages</div> </a></li>
|
||||
<li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
|
||||
<div class="text">Notifications</div></a></li>
|
||||
<li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
|
||||
<div class="text">Schedules</div></a></li>
|
||||
<li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
|
||||
<div class="text">Forum</div></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
<ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
|
||||
<li title="Home">
|
||||
<a href="#home">
|
||||
<img src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
||||
</a>
|
||||
</li>
|
||||
<li title="Home">
|
||||
<a href="#home">
|
||||
<item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
||||
</a>
|
||||
</li>
|
||||
<li style="float: right;" title="Account">
|
||||
<a href="#Account">
|
||||
<item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
||||
</a></li>
|
||||
<li style="float: right;" title="Notifications">
|
||||
<a href="#Notifications">
|
||||
<item class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
||||
</a></li>
|
||||
<li style="float: right;" title="Options">
|
||||
<a href="#Options">
|
||||
<item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
||||
</a></li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
}
|
||||
ul.vertical{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 70px ;
|
||||
background-color: rgb(53, 53, 53);
|
||||
border-right:5px;
|
||||
border-color:black;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
overflow:auto;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
li a{
|
||||
display: flex;
|
||||
padding: 8px 16px;
|
||||
color:rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
ul.vertical li a:hover:not(.active) {
|
||||
background-color: rgb(112, 112, 112);
|
||||
border-radius:6px;
|
||||
color: white;
|
||||
|
||||
transform: translate(0px ,1px);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
ul.vertical li a.active {
|
||||
background-color: rgb(239, 60, 168);
|
||||
border-radius:6px;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
ul.horizontal li a.active {
|
||||
background-color: rgb(57, 57, 57);
|
||||
border-radius:6px;
|
||||
}
|
||||
ul.horizontal {
|
||||
z-index: 101;
|
||||
display: block ;
|
||||
list-style-type:none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
height:61px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgb(24, 24, 24);
|
||||
}
|
||||
|
||||
ul.horizontal li {
|
||||
font-size: 35px;
|
||||
float: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
ul.horizontal li a:hover:not(.active){
|
||||
background-color: black;
|
||||
border-radius:6px;
|
||||
color:white;
|
||||
transform: translate(0px ,1px);
|
||||
|
||||
}
|
||||
|
||||
ul.vertical:hover {
|
||||
z-index: 100;
|
||||
width: 250px;
|
||||
border-radius: 40px;
|
||||
transition-duration: .3s;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 0%;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
ul.vertical:hover .text {
|
||||
opacity: 1;
|
||||
width: 70%;
|
||||
transition-duration: .3s;
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
frontend/src/assets/Clyde.png
Normal file
BIN
frontend/src/assets/Clyde.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
@ -1,35 +1,5 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
body {
|
||||
background-color: rgb(53, 25, 60);
|
||||
margin:0;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user