uploaded site and api data
This commit is contained in:
Dumitrana-Mihnea
+754
@@ -0,0 +1,754 @@
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: lightblue;
|
||||
}
|
||||
html
|
||||
{
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em
|
||||
}
|
||||
body {
|
||||
background: linear-gradient(-45deg, #2a5596, #cf8fa7, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 14s ease infinite;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
color: black;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
word-spacing: 3px;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.topnav a.active {
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
.logo1
|
||||
{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
}
|
||||
a.dreapta{
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown {
|
||||
padding: 5.5px 25px;
|
||||
float: right;
|
||||
}
|
||||
.linkedin{
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
}
|
||||
.mana{
|
||||
width: 800px;
|
||||
height: 580px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px 8px white inset;
|
||||
}
|
||||
.dropdown .dropbtn {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: inherit;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
color:black;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabel-mijloc
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: 25vh;
|
||||
color:white;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
}
|
||||
|
||||
.buton
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: -30vh;
|
||||
color:white;
|
||||
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .2rem;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
}
|
||||
.mijloc
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mijloc > a{
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.coloana-stanga
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 3x black;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
float:left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.coloana-dreapta
|
||||
{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
}
|
||||
|
||||
h3 {
|
||||
clear: left;
|
||||
opacity: 0;
|
||||
filter: blur(4px);
|
||||
letter-spacing: .1rem;
|
||||
line-height: 1.2cm;
|
||||
padding: 1px;
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
h3:nth-child(1) {
|
||||
animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
|
||||
}
|
||||
|
||||
h3:nth-child(2) {
|
||||
animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
|
||||
}
|
||||
|
||||
.waviy {
|
||||
position: relative;
|
||||
font-size: 60px;
|
||||
color: #480777;
|
||||
}
|
||||
.waviy span {
|
||||
font-family: 'Alfa Slab One', cursive;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
animation: waviy 1s infinite;
|
||||
animation-delay: calc(.1s * var(--i));
|
||||
|
||||
}
|
||||
@keyframes waviy {
|
||||
0%,40%,100% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-20px)
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 2vw;
|
||||
letter-spacing: .2rem;
|
||||
position: absolute;
|
||||
top: 0.5px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
h1:nth-child(2) {
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 2px #161622;
|
||||
}
|
||||
|
||||
h1:nth-child(1) {
|
||||
color: #541184;
|
||||
animation: animate 5s ease-in-out infinite;
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
h1{
|
||||
display: none;
|
||||
}
|
||||
.logo1{
|
||||
width: 40%;
|
||||
height: 20%;
|
||||
}
|
||||
h3{
|
||||
font-size: 3.6vw;
|
||||
line-height: 1cm;
|
||||
}
|
||||
.dropdown{
|
||||
padding: 25.5px 10px;
|
||||
}
|
||||
.glow-on-hover{
|
||||
display: flex;
|
||||
cursor:none;
|
||||
}
|
||||
}
|
||||
@keyframes animate {
|
||||
100%,
|
||||
0% {
|
||||
clip-path: polygon(
|
||||
45% 0%,
|
||||
44% 16%,
|
||||
50% 33%,
|
||||
60% 54%,
|
||||
59% 65%,
|
||||
89% 95%,
|
||||
95% 97%,
|
||||
98% 99%,
|
||||
100% 0%
|
||||
);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: polygon(
|
||||
0% 60%,
|
||||
15% 65%,
|
||||
34% 66%,
|
||||
51% 62%,
|
||||
67% 50%,
|
||||
84% 45%,
|
||||
100% 46%,
|
||||
100% 100%,
|
||||
0% 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.masthead-brand {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.fade-out-image { animation: fadeout 5s; }
|
||||
@keyframes fadeout {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
.nav-masthead .nav-link {
|
||||
padding: .25rem 0;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
background-color: transparent;
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link+.nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.masthead-brand {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-masthead {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
.logo .title {
|
||||
color: white;
|
||||
}
|
||||
.logo .subtitle {
|
||||
position: relative;
|
||||
color: white;
|
||||
left: -30px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
position: absolute;
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
height: 25%;
|
||||
width: 25%;
|
||||
top: 500vh;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
backface-visibility: hidden;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.loading .message {
|
||||
font-size: x-large;
|
||||
}
|
||||
.loading .spinner {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 1s linear infinite;
|
||||
border: 32px solid #bebebe;
|
||||
border-top: 32px solid #3498db;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.loaded .loading {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shoutout {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.glow-on-hover {
|
||||
width: 220px;
|
||||
height: 25px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: #111;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.glow-on-hover:before {
|
||||
content: '';
|
||||
background: linear-gradient(45deg, #31074e, #00ffd5, #002bff, #7a00ff, #ff00c8);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left:-2px;
|
||||
background-size: 400%;
|
||||
z-index: -1;
|
||||
filter: blur(5px);
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
animation: glowing 20s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.glow-on-hover:active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.glow-on-hover:active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.glow-on-hover:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glow-on-hover:after {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #290760;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes glowing {
|
||||
0% { background-position: 0 0; }
|
||||
50% { background-position: 400% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
bottom: 45vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.container-item-1{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
.container-item-11{
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
}
|
||||
.p41
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
.container-item-2{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
border-radius: 10%;
|
||||
}
|
||||
.container-item-22{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.input_video {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
|
||||
}
|
||||
.input_video.selfie {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.input_image {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
|
||||
}
|
||||
|
||||
.output_canvas {
|
||||
width: 55%;
|
||||
height: 85%;
|
||||
position: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
bottom: 49vh;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.rezultat-cuvinte
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
float: left;
|
||||
align-content: left;
|
||||
top: 50vh;
|
||||
}
|
||||
|
||||
.ultimu
|
||||
{
|
||||
width: 100%;
|
||||
height: 3%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-content: right;
|
||||
bottom: 25vh;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.buton-fill2
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 150px;
|
||||
height: 70px;
|
||||
|
||||
box-shadow: 0 0 10rem #fff,
|
||||
0 0 15rem #fff,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 15rem #d99ef0,
|
||||
0 0 15rem #7305f9,
|
||||
inset 0 0 12rem #2f0a6c;
|
||||
|
||||
position: flex;
|
||||
justify-content: right;
|
||||
float: right;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-neon{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: palevioletred;
|
||||
opacity: 10%;
|
||||
|
||||
box-shadow: 0 0 4rem #b411ef,
|
||||
0 0 12rem #691ad0,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 18rem #d99ef0,
|
||||
0 0 28rem #7305f9,
|
||||
inset 0 0 20rem #2f0a6c;
|
||||
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.btn-neon_a{
|
||||
display: hidden;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 45px;
|
||||
align-items: center;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 50px #17b25d,
|
||||
0 0 100px #17b25d,
|
||||
0 0 150px #17b25d;
|
||||
background-color: #17b25d;
|
||||
}
|
||||
|
||||
.btn-neon_a polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
svg
|
||||
{
|
||||
left: 50%;
|
||||
height:50;
|
||||
width:180;
|
||||
}
|
||||
.btn-neon svg{
|
||||
position: flex;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #17b25d;
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 60;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
.p31
|
||||
{
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.buton-fill
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 39px;
|
||||
color: #f5f5f5;
|
||||
background-color: #1387a4;
|
||||
opacity: 50%;
|
||||
|
||||
width: 90%;
|
||||
height: 450px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.clear
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 650px;
|
||||
height: 70px;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Home-page-2
|
||||
{
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
display: absolute;
|
||||
margin: 0px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user