generated from Templates/html-nginx-deployment
Loading page and landing page initial styling.
All checks were successful
Home Cluster Builds/wedding-page/pipeline/head This commit looks good
All checks were successful
Home Cluster Builds/wedding-page/pipeline/head This commit looks good
This commit is contained in:
11
html/static/css/font-amelia-giovani.css
Normal file
11
html/static/css/font-amelia-giovani.css
Normal file
@@ -0,0 +1,11 @@
|
||||
@font-face {
|
||||
font-family: AmeliaGiovani;
|
||||
src: url(../fonts/Amelia\ Giovani\ Regular.otf);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.font-amelia-giovani-regular {
|
||||
font-family: AmeliaGiovani;
|
||||
font-weight: 400;
|
||||
}
|
||||
72
html/static/css/font-cinzel.css
Normal file
72
html/static/css/font-cinzel.css
Normal file
@@ -0,0 +1,72 @@
|
||||
/* Cinzel */
|
||||
@font-face {
|
||||
font-family: Cinzel;
|
||||
src: url(../fonts/Cinzel-Regular.ttf);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Cinzel;
|
||||
src: url(../fonts/Cinzel-Medium.ttf);
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Cinzel;
|
||||
src: url(../fonts/Cinzel-SemiBold.ttf);
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Cinzel;
|
||||
src: url(../fonts/Cinzel-Bold.ttf);
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Cinzel;
|
||||
src: url(../fonts/Cinzel-ExtraBold.ttf);
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Cinzel;
|
||||
src: url(../fonts/Cinzel-Black.ttf);
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.font-cinzel-regular {
|
||||
font-family: Cinzel;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-cinzel-medium {
|
||||
font-family: Cinzel;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-cinzel-semi-bold {
|
||||
font-family: Cinzel;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-cinzel-bold {
|
||||
font-family: Cinzel;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-cinzel-extra-bold {
|
||||
font-family: Cinzel;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.font-cinzel-extra-black {
|
||||
font-family: Cinzel;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
/* ROBOTO */
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../fonts/Roboto-Thin.ttf);
|
||||
@@ -82,36 +84,36 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.font-italic {
|
||||
.font-roboto-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.font-thin {
|
||||
.font-roboto-thin {
|
||||
font-family: Roboto;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.font-light {
|
||||
.font-roboto-light {
|
||||
font-family: Roboto;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.font-regular {
|
||||
.font-roboto-regular {
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
.font-roboto-medium {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
.font-roboto-bold {
|
||||
font-family: Roboto;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-black {
|
||||
.font-roboto-black {
|
||||
font-family: Roboto;
|
||||
font-weight: 900;
|
||||
}
|
||||
86
html/static/css/loaders.css
Normal file
86
html/static/css/loaders.css
Normal file
@@ -0,0 +1,86 @@
|
||||
#loading-page {
|
||||
background-color: var(--color-dark);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
align-content: center;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.newtons-cradle {
|
||||
--uib-speed: 1.2s;
|
||||
--uib-color: var(--color-primary);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.newtons-cradle-dot {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 1.8rem;
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.newtons-cradle-dot::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--uib-color);
|
||||
}
|
||||
|
||||
.newtons-cradle-dot:first-child {
|
||||
animation: swing var(--uib-speed) linear infinite;
|
||||
}
|
||||
|
||||
.newtons-cradle-dot:last-child {
|
||||
animation: swing2 var(--uib-speed) linear infinite;
|
||||
}
|
||||
|
||||
@keyframes swing {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(70deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swing2 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(-70deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
/* VARIABLES */
|
||||
:root {
|
||||
--color-primary: #c9cacf;
|
||||
--color-secondary: #f2f2f3;
|
||||
--color-primary: #a598be;
|
||||
--color-secondary: #e7d6a2;
|
||||
--color-tertiary: #5260ff;
|
||||
--color-success: #2dd36f;
|
||||
--color-warning: #ffc409;
|
||||
--color-danger: #eb445a;
|
||||
--color-dark: #3d3e43;
|
||||
--color-dark: #19233e;
|
||||
--color-medium: #92949c;
|
||||
--color-light: #f4f5f8;
|
||||
--base-rem-size: 12px;
|
||||
@@ -29,13 +29,35 @@ a {
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
select {
|
||||
color: var(--color-secondary);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
#select-user {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.8rem;
|
||||
border-style: solid;
|
||||
border-color: var(--color-secondary);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
width: 70%;
|
||||
margin: 5rem auto;
|
||||
padding: 3rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 16px 16px 36px #626369,
|
||||
-16px -16px 36px #c2c5cf;
|
||||
box-shadow: 20px 20px 67px #0c101d,
|
||||
-20px -20px 67px #2b3d6c;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.container a {
|
||||
@@ -44,4 +66,105 @@ a {
|
||||
|
||||
.container a:hover {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
#page-content {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
#img-holder {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#img-holder img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: calc(60% - 2rem);
|
||||
position: relative;
|
||||
min-width: 450px;
|
||||
}
|
||||
|
||||
.panel h1 {
|
||||
font-size: 4rem;
|
||||
letter-spacing: 1.2px;
|
||||
text-decoration: underline 1px;
|
||||
text-underline-offset: 15px;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
#page-content {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: auto;
|
||||
letter-spacing: 1.8px;
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--color: var(--color-primary);
|
||||
--color2: var(--color-dark);
|
||||
padding: 0.8em 1.75em;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: .3px solid var(--color);
|
||||
transition: .5s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--color);
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.btn::after, .btn::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: skew(90deg) translate(-50%, -50%);
|
||||
position: absolute;
|
||||
inset: 50%;
|
||||
left: 25%;
|
||||
z-index: -1;
|
||||
transition: .5s ease-out;
|
||||
background-color: var(--color);
|
||||
text-shadow: 1px;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
top: -50%;
|
||||
left: -25%;
|
||||
transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.btn:hover::after {
|
||||
transform: skew(45deg) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: var(--color2);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
filter: brightness(.7);
|
||||
transform: scale(.98);
|
||||
}
|
||||
|
||||
.btn-holder {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user