v0.0.9 - Added swiper JS/CSS
Added hover.css Updated index/login layout frontend Updated getPost.php
This commit is contained in:
Anders
parent
4ce94621a7
commit
dc15757c5f
|
|
@ -3,14 +3,9 @@ require "../../bootstrap.php";
|
|||
|
||||
use Backend\Model\Post;
|
||||
|
||||
session_start();
|
||||
if (!isset($_SESSION['token'])) {
|
||||
header("location: ../../Frontend/index.php?login=notloggedin");
|
||||
}
|
||||
|
||||
header('Content-Type: application/json;charset=UTF-8');
|
||||
|
||||
//HOme.php
|
||||
//Home.php
|
||||
$data = Post::all();
|
||||
echo $data;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,805 @@
|
|||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
--color-text: #111;
|
||||
--color-number: #999;
|
||||
--color-bg: #fff;
|
||||
--color-link: #1352d1;
|
||||
--color-link-hover: #111;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-family: europa, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Page Loader */
|
||||
.js .loading::before,
|
||||
.js .loading::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.js .loading::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.js .loading::after {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: -30px 0 0 -30px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.4;
|
||||
background: var(--color-link);
|
||||
animation: loaderAnim 0.7s linear infinite alternate forwards;
|
||||
}
|
||||
|
||||
@keyframes loaderAnim {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5, 0.5, 1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-link);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-link-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
|
||||
a:focus {
|
||||
/* Provide a fallback style for browsers
|
||||
that don't support :focus-visible */
|
||||
outline: none;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
a:focus:not(:focus-visible) {
|
||||
/* Remove the focus indicator on mouse-focus for browsers
|
||||
that do support :focus-visible */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
/* Draw a very noticeable focus style for
|
||||
keyboard-focus on browsers that do support
|
||||
:focus-visible */
|
||||
outline: 2px solid red;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.frame {
|
||||
padding: 3rem 5vw;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.frame__title {
|
||||
font-size: 1.525rem;
|
||||
margin: 0 0 1rem;
|
||||
font-weight: normal;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.frame__tagline {
|
||||
color: #999;
|
||||
max-width: 300px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.frame__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.frame__links a:not(:last-child) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.github {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 10vh 25px;
|
||||
max-width: 1050px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-auto-rows: 200px;
|
||||
grid-gap: 4rem;
|
||||
grid-row-gap: 6rem;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.content__item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
counter-increment: itemcounter;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.link::before,
|
||||
.link::after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.link::before {
|
||||
content: '';
|
||||
/* show by default */
|
||||
}
|
||||
|
||||
.link--metis {
|
||||
font-family: bely-display, sans-serif;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.link--metis::before {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.link--metis:hover::before {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.link--io {
|
||||
font-family: europa, sans-serif;
|
||||
}
|
||||
|
||||
.link--io::before {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.link--io:hover::before {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--io::after {
|
||||
content: '';
|
||||
top: calc(100% + 4px);
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.link--io:hover::after {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--thebe {
|
||||
font-family: angie-sans, sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.link--thebe::before {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--thebe:hover::before {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(1, 2, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.link--thebe::after {
|
||||
content: '';
|
||||
top: calc(100% + 4px);
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--thebe:hover::after {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.link--leda {
|
||||
overflow: hidden;
|
||||
line-height: 2;
|
||||
font-family: orpheuspro, serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.link--leda::before {
|
||||
height: 2px;
|
||||
top: calc(100% - 5px);
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
|
||||
}
|
||||
|
||||
.link--leda:hover::before {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.link--leda::after {
|
||||
content: attr(data-text);
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: none;
|
||||
transform-origin: 100% 50%;
|
||||
transform: translate3d(150%, 0, 0);
|
||||
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
|
||||
}
|
||||
|
||||
.link--leda:hover::after {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.link--leda span {
|
||||
display: inline-block;
|
||||
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
|
||||
}
|
||||
|
||||
.link--leda:hover span {
|
||||
transform: translate3d(-150%, 0, 0);
|
||||
}
|
||||
|
||||
.link--ersa {
|
||||
padding: 0 10px;
|
||||
font-family: halyard-display, sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-indent: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.link--ersa::before {
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--ersa:hover::before {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.link--ersa span {
|
||||
display: inline-block;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--ersa:hover span {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
.link--elara {
|
||||
font-family: aktiv-grotesk-extended, sans-serif;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.link--elara::before {
|
||||
transform-origin: 50% 100%;
|
||||
transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
|
||||
clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
|
||||
}
|
||||
|
||||
.link--elara:hover::before {
|
||||
transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
|
||||
clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
|
||||
}
|
||||
|
||||
.link--elara span {
|
||||
display: inline-block;
|
||||
transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--elara:hover span {
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
|
||||
.link--dia {
|
||||
font-family: freightdispcmp-pro, serif;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.link--dia::before,
|
||||
.link--dia::after {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
transform: translate3d(0, 3px, 0);
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);
|
||||
}
|
||||
|
||||
.link--dia:hover::before,
|
||||
.link--dia:hover::after {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
|
||||
}
|
||||
|
||||
.link--dia::after {
|
||||
content: '';
|
||||
top: calc(100% + 4px);
|
||||
width: 70%;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.link--dia::before,
|
||||
.link--dia:hover::after {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
.link--dia:hover::before {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.link--kale {
|
||||
font-family: halyard-display, sans-serif;
|
||||
font-weight: 600;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.link--kale::before {
|
||||
height: 10px;
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.link--kale:hover::before {
|
||||
opacity: 1;
|
||||
animation: lineUp 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes lineUp {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
51% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.link--kale::after {
|
||||
content: '';
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.link--kale:hover::after {
|
||||
opacity: 1;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
.link--carpo {
|
||||
font-family: adrianna-extended, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.link--carpo::before {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale3d(0, 1, 1);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.link--carpo:hover::before {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.link--carpo::after {
|
||||
content: '';
|
||||
top: calc(100% + 4px);
|
||||
transition: transform 0.3s;
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
|
||||
.link--carpo:hover::after {
|
||||
transform: scale3d(0, 1, 1);
|
||||
}
|
||||
|
||||
.link--helike {
|
||||
font-family: aktiv-grotesk-extended, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link--helike:hover span {
|
||||
animation: glitchText 0.4s linear;
|
||||
}
|
||||
|
||||
@keyframes glitchText {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
|
||||
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
|
||||
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
|
||||
}
|
||||
|
||||
10% {
|
||||
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
}
|
||||
|
||||
35% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.link--helike::before {
|
||||
height: 2px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.link--helike:hover::before {
|
||||
opacity: 1;
|
||||
animation: glitchLine 0.4s steps(2, start) forwards;
|
||||
}
|
||||
|
||||
@keyframes glitchLine {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate3d(0, 4px, 0);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0);
|
||||
transform-origin: 100% 0%;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate3d(-30, 10px, 0) scale3d(1, 0.4, 1);
|
||||
transform-origin: 100% 0%;
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0);
|
||||
;
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.link--mneme {
|
||||
font-family: aktiv-grotesk-extended, sans-serif;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.link--mneme::before {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.link--mneme:hover::before {
|
||||
opacity: 1;
|
||||
animation: coverUp 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes coverUp {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
51% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.link--mneme::after {
|
||||
content: '';
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.link--mneme:hover::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.link--iocaste {
|
||||
font-family: lust-fine, sans-serif;
|
||||
overflow: hidden;
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
.link__graphic {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.link__graphic--slide {
|
||||
top: -3px;
|
||||
stroke-width: 2px;
|
||||
transition: transform 0.7s;
|
||||
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
|
||||
}
|
||||
|
||||
.link:hover .link__graphic--slide {
|
||||
transform: translate3d(-66.6%, 0, 0);
|
||||
}
|
||||
|
||||
.link--herse {
|
||||
font-family: freight-display-pro, serif;
|
||||
font-size: 1.375rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link--herse::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link__graphic--stroke path {
|
||||
stroke-dasharray: 1;
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
.link:hover .link__graphic--stroke path {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
/* Trick from https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/ */
|
||||
|
||||
|
||||
.link__graphic--arc {
|
||||
top: 73%;
|
||||
left: -23%;
|
||||
}
|
||||
|
||||
.link__graphic--arc path {
|
||||
transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
|
||||
}
|
||||
|
||||
.link:hover .link__graphic--arc path {
|
||||
transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.link--carme {
|
||||
font-family: angie-sans, sans-serif;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.link--carme::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link__graphic--scribble {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.link__graphic--scribble path {
|
||||
transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||||
}
|
||||
|
||||
.link:hover .link__graphic--scribble path {
|
||||
transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.link--eirene {
|
||||
font-family: europa, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link--eirene::before {
|
||||
height: 7px;
|
||||
border-radius: 20px;
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);
|
||||
}
|
||||
|
||||
.link--eirene:hover::before {
|
||||
transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
|
||||
transition-duration: 0.4s;
|
||||
opacity: 1;
|
||||
transform: scale3d(1.2, 0.1, 1);
|
||||
}
|
||||
|
||||
.link--eirene span {
|
||||
transform: translate3d(0, -4px, 0);
|
||||
display: inline-block;
|
||||
transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);
|
||||
}
|
||||
|
||||
.link--eirene:hover span {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
|
||||
transition-duration: 0.4s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 53em) {
|
||||
.frame {
|
||||
text-align: left;
|
||||
z-index: 100;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 3rem 3.5rem;
|
||||
pointer-events: none;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas: 'title links'
|
||||
'... ...'
|
||||
'author ...';
|
||||
}
|
||||
|
||||
.frame__title-wrap {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.frame__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.frame__tagline {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.frame__links {
|
||||
grid-area: links;
|
||||
padding: 0;
|
||||
justify-self: end;
|
||||
align-self: start;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.frame__author {
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.frame a {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
|
||||
body {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
background-color: #ffe53b;
|
||||
background-image: linear-gradient(147deg, #ffe53b 0%, #fd3838 74%);
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.blog-slider {
|
||||
width: 95%;
|
||||
position: relative;
|
||||
max-width: 60vw;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
|
||||
padding: 25px;
|
||||
border-radius: 25px;
|
||||
height: 400px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.blog-slider {
|
||||
max-width: 65vw;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 500px) and (min-width: 992px) {
|
||||
.blog-slider {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
.blog-slider__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__item {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__img img {
|
||||
opacity: 1;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.blog-slider__content {
|
||||
padding-right: 25px;
|
||||
}
|
||||
.blog-slider__content > * {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.blog-slider__code {
|
||||
color: #7b7992;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
}
|
||||
.blog-slider__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #0d0925;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-slider__text {
|
||||
color: #4e4a67;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.blog-slider__button {
|
||||
display: inline-flex;
|
||||
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
|
||||
padding: 15px 35px;
|
||||
border-radius: 50px;
|
||||
color: #fff;
|
||||
box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.blog-slider__button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,
|
||||
.blog-slider .swiper-pagination-custom,
|
||||
.blog-slider .swiper-pagination-fraction {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.blog-slider__pagination {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-direction: row;
|
||||
z-index: 21;
|
||||
width: fit-content;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__pagination {
|
||||
transform: translateX(-50%);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0px 8px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
.blog-slider__pagination .swiper-pagination-bullet {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 10px;
|
||||
background: #062744;
|
||||
opacity: 0.2;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.blog-slider__pagination .swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #fd3838;
|
||||
box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
|
||||
}
|
||||
|
||||
input[type="checkbox"]#hamburger {
|
||||
position: fixed;
|
||||
top: -999%;
|
||||
left: -999%;
|
||||
}
|
||||
|
||||
label[for="hamburger"] {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: #2F9AA9;
|
||||
z-index: 1030;
|
||||
cursor: pointer;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
box-shadow: 1px 2px 5px #464647;
|
||||
}
|
||||
|
||||
label[for="hamburger"] > ul {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: Absolute;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
label[for="hamburger"] > ul > li {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #464647;
|
||||
margin: auto;
|
||||
transition: all .4s ease;
|
||||
position: relative;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked#hamburger + label + div > main > div > div > div > .front {
|
||||
transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked#hamburger + label > ul > li:first-child {
|
||||
transform: rotate(45deg);
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked#hamburger + label > ul > li:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked#hamburger + label > ul > li:last-child {
|
||||
transform: rotate(-45deg);
|
||||
bottom: 30%;
|
||||
left: 0;
|
||||
}
|
||||
body {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.layer {
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: .4s;
|
||||
transform: perspective(800px) scale(1) translateX(0) rotateY(0);
|
||||
transform-style: preserve-3d;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.showlayer {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.transform-none {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding-left: 66.66%;
|
||||
font-size: larger;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
display: Block;
|
||||
color: White;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin-bottom: 10%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.front {
|
||||
transition: .4s;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,395 +5,56 @@
|
|||
<title>ITSKP</title>
|
||||
|
||||
<script type="text/javascript" src="Assets/JS/jquery-3.6.0.min.js"></script>
|
||||
<script type="text/javascript" src="Assets/JS/swiper-bundle.min.js"></script>
|
||||
<script src="Assets/JS/swiper-bundle.min.js"></script>
|
||||
<script type="text/javascript" src="Assets/JS/bootstrap.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/main.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/swiper.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/swiper-bundle.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/pagination.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/hover.css"/>
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
background-color: #ffe53b;
|
||||
background-image: linear-gradient(147deg, #ffe53b 0%, #fd3838 74%);
|
||||
}
|
||||
|
||||
.blog-slider {
|
||||
width: 95%;
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
|
||||
padding: 25px;
|
||||
border-radius: 25px;
|
||||
height: 400px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.blog-slider {
|
||||
max-width: 680px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider {
|
||||
min-height: 500px;
|
||||
height: auto;
|
||||
margin: 180px auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 500px) and (min-width: 992px) {
|
||||
.blog-slider {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
.blog-slider__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__item {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__img img {
|
||||
opacity: 1;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
|
||||
transition-delay: 0.7s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
|
||||
transition-delay: 0.9s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
|
||||
transition-delay: 1s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
|
||||
transition-delay: 1.1s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
|
||||
transition-delay: 1.2s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
|
||||
transition-delay: 1.3s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
|
||||
transition-delay: 1.4s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
|
||||
transition-delay: 1.5s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
|
||||
transition-delay: 1.6s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
|
||||
transition-delay: 1.7s;
|
||||
}
|
||||
.blog-slider__img {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
height: 300px;
|
||||
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
|
||||
box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
|
||||
border-radius: 20px;
|
||||
transform: translateX(-80px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.blog-slider__img:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
|
||||
border-radius: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.blog-slider__img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__img {
|
||||
transform: translateY(-50%);
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.blog-slider__img {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 500px) and (min-width: 992px) {
|
||||
.blog-slider__img {
|
||||
height: 270px;
|
||||
}
|
||||
}
|
||||
.blog-slider__content {
|
||||
padding-right: 25px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__content {
|
||||
margin-top: -80px;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.blog-slider__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.blog-slider__content > * {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.blog-slider__code {
|
||||
color: #7b7992;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
}
|
||||
.blog-slider__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #0d0925;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-slider__text {
|
||||
color: #4e4a67;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.blog-slider__button {
|
||||
display: inline-flex;
|
||||
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
|
||||
padding: 15px 35px;
|
||||
border-radius: 50px;
|
||||
color: #fff;
|
||||
box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.blog-slider__button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,
|
||||
.blog-slider .swiper-pagination-custom,
|
||||
.blog-slider .swiper-pagination-fraction {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.blog-slider__pagination {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-direction: row;
|
||||
z-index: 21;
|
||||
width: fit-content !important;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__pagination {
|
||||
transform: translateX(-50%);
|
||||
left: 50% !important;
|
||||
top: 205px;
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0px 8px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
.blog-slider__pagination .swiper-pagination-bullet {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
background: #062744;
|
||||
opacity: 0.2;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.blog-slider__pagination .swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #fd3838;
|
||||
width: 30px;
|
||||
box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__pagination .swiper-pagination-bullet-active {
|
||||
height: 11px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body class="position-relative">
|
||||
<nav class="layer" id="layer">
|
||||
<ul>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="index.php">Home</a></li>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="https://bib.itskp-odense.dk/">Bulltitin Board</a></li>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="https://udlaan.itskp-odense.dk/">Udlån af udstyr</a></li>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="login.php">Login</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<input type="checkbox" name="hamburger" id="hamburger" onclick="shownav()"/>
|
||||
<label for="hamburger">
|
||||
<ul><li></li><li></li><li></li></ul>
|
||||
</label>
|
||||
<div id="app" class="min-vh-100 d-flex flex-column">
|
||||
<form action="../Backend/controller/login.php" method="POST">
|
||||
<input type="text" name="username" placeholder="Username">
|
||||
<input type="password" name="password" placeholder="Password">
|
||||
<input type="submit" name="loginsubmit" placeholder="login">
|
||||
</form>
|
||||
<main class="d-flex position-relative" style="flex: auto;">
|
||||
<div class="container d-grid align-items-center pt-5 pb-5" style="contain: content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12 h-100" style="border-radius: 4px">
|
||||
<div class="blog-slider">
|
||||
<div class="blog-slider front home" id="front">
|
||||
<div class="blog-slider__wrp swiper-wrapper">
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<!--<div class="blog-slider__img">
|
||||
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg" alt="">
|
||||
</div>-->
|
||||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">26 December 2019</span>
|
||||
<div class="blog-slider__title">Lorem Ipsum Dolor</div>
|
||||
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
|
||||
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="blog-slider__pagination"></div>
|
||||
</div>
|
||||
|
|
@ -417,28 +78,26 @@
|
|||
type: 'bullets',
|
||||
clickable: true,
|
||||
dynamicBullets: true,
|
||||
dynamicMainBullets: 3,
|
||||
dynamicMainBullets: 1,
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#layer').removeClass('showlayer');
|
||||
$('#front').addClass('transform-none');
|
||||
$('#hamburger').prop('checked', '');
|
||||
})
|
||||
|
||||
|
||||
/*dasdasda*/
|
||||
$( document ).ready(function() {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '../Backend/controller/getPost.php',
|
||||
success:function (data) {
|
||||
console.log(data);
|
||||
},
|
||||
error:function (data) {
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
function shownav() {
|
||||
if($('#layer').hasClass('showlayer')) {
|
||||
$('#layer').removeClass('showlayer');
|
||||
$('#front').addClass('transform-none');
|
||||
}
|
||||
else {
|
||||
$('#layer').addClass('showlayer');
|
||||
$('#front').removeClass('transform-none');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ITSKP</title>
|
||||
|
||||
<script type="text/javascript" src="Assets/JS/jquery-3.6.0.min.js"></script>
|
||||
<script src="Assets/JS/swiper-bundle.min.js"></script>
|
||||
<script type="text/javascript" src="Assets/JS/bootstrap.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/main.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/swiper-bundle.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/pagination.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/CSS/hover.css"/>
|
||||
</head>
|
||||
<body class="position-relative">
|
||||
<nav class="layer" id="layer">
|
||||
<ul>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="index.php">Home</a></li>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="https://bib.itskp-odense.dk/">Bulltitin Board</a></li>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="https://udlaan.itskp-odense.dk/">Udlån af udstyr</a></li>
|
||||
<li class="content__item"><a class="link link--elara text-white" href="login.php">Login</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<input type="checkbox" name="hamburger" id="hamburger" onclick="shownav()"/>
|
||||
<label for="hamburger">
|
||||
<ul><li></li><li></li><li></li></ul>
|
||||
</label>
|
||||
<div id="app" class="min-vh-100 d-flex flex-column">
|
||||
<main class="d-flex position-relative" style="flex: auto;">
|
||||
<div class="container d-grid align-items-center pt-5 pb-5" style="contain: content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 h-100" style="border-radius: 4px">
|
||||
<div class="card text-black-50 front">
|
||||
<div class="card-header">Login</div>
|
||||
|
||||
<div class="card-body">
|
||||
<form method="POST" action="../Backend/controller/login.php">
|
||||
<div class="form-group row mb-4">
|
||||
<label for="username" class="col-md-4 col-form-label text-md-right">Username</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="username" type="text" class="form-control" name="username" required autocomplete="username" autofocus>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-4">
|
||||
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="password" type="password" class="form-control" name="password" required autocomplete="current-password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-md-8 offset-md-4">
|
||||
<button type="submit" name="loginsubmit" class="btn btn-primary">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var swiper = new Swiper('.blog-slider', {
|
||||
effect: 'fade',
|
||||
loop: true,
|
||||
mousewheel: {
|
||||
invert: false,
|
||||
},
|
||||
// autoHeight: true,
|
||||
pagination: {
|
||||
el: '.blog-slider__pagination',
|
||||
type: 'bullets',
|
||||
clickable: true,
|
||||
dynamicBullets: true,
|
||||
dynamicMainBullets: 3,
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#layer').removeClass('showlayer');
|
||||
$('#front').addClass('transform-none');
|
||||
$('#hamburger').prop('checked', '');
|
||||
})
|
||||
|
||||
function shownav() {
|
||||
if($('#layer').hasClass('showlayer')) {
|
||||
$('#layer').removeClass('showlayer');
|
||||
$('#front').addClass('transform-none');
|
||||
}
|
||||
else {
|
||||
$('#layer').addClass('showlayer');
|
||||
$('#front').removeClass('transform-none');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue