File size: 1,547 Bytes
369fac9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<script setup></script>
<template>
<div class="container">
<RouterLink to="#" class="box">
<i class="fa-solid fa-video"></i>
<p class="box__description">Real Time</p>
</RouterLink>
<RouterLink :to="{ name: 'VideoStreaming' }" class="box">
<i class="fa-solid fa-upload"></i>
<p class="box__description">Video Upload</p>
</RouterLink>
</div>
</template>
<style lang="scss" scoped>
.container {
margin-top: 10rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 4rem;
.box {
width: 20%;
max-width: 200px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1.2rem;
cursor: pointer;
border: 4px solid var(--primary-color);
border-radius: 10%;
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
transition: all 0.2s ease-in;
i {
font-size: 3rem;
color: var(--primary-color);
}
&__description {
font-size: 1.2rem;
font-weight: 500;
text-transform: uppercase;
color: var(--secondary-color);
transform: translateY(10px);
}
&:hover {
transform: scale(1.05);
}
}
}
</style>
|