summaryrefslogtreecommitdiff
path: root/src/css/index.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/index.css')
-rw-r--r--src/css/index.css170
1 files changed, 95 insertions, 75 deletions
diff --git a/src/css/index.css b/src/css/index.css
index f1e29f41..7f417533 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -2,50 +2,49 @@
/* --primary-color: mediumslateblue; */
/* } */
.wrapper {
- height: 100vh;
- width: 100%;
- top: 0;
- left: 0;
- overflow-x: hidden;
- -ms-overflow-style: none;
- scrollbar-width: none;
- z-index: -6;
+ height: 100vh;
+ width: 100%;
+ top: 0;
+ left: 0;
+ overflow-x: hidden;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ z-index: -6;
}
.wrapper::-webkit-scrollbar {
- display: none;
+ display: none;
}
/* main info window ======================================= */
.indexPage {
- overflow: hidden;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- background-color: rgb(20, 53, 85);
- background-image: url(/images/backgroundNightCity.jpg) ,url(/images/backgroundNightCity.webp);
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- color: #F4E8C1;
- z-index: -10;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ /* background-color: rgb(20, 53, 85);
+ background-image: url(/images/backgroundNightCity.jpg) ,url(/images/backgroundNightCity.webp); */
+ background-color: #05010d;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ color: #F4E8C1;
+ z-index: -10;
}
.window {
- position: relative;
- top: 15%;
- left: 10%;
- height: 70%;
- width: 80%;
- background: transparent;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 999;
- /* transform-style: preserve-3d; */
- /* perspective: 1000px; */
+ position: relative;
+ top: 15%;
+ left: 10%;
+ height: 70%;
+ width: 80%;
+ background: transparent;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 999;
}
/* .window:after { */
@@ -72,66 +71,87 @@
/* } */
.window .windowWrap {
- position: relative;
- width: 100%;
- height: 100%;
- border: 1px solid rgba(255,255,255, .15);
- border-radius: 1em;
- -webkit-backdrop-filter: blur(16px);
- backdrop-filter: blur(16px);
- box-shadow: 0 0 10mm rgba(0,0,0,1);
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- z-index: 11;
+ /* transform-style: preserve-3d; */
+ position: relative;
+ /* transform: perspective(1000px); */
+ width: 100%;
+ height: 100%;
+ border: 1px solid rgba(255,255,255,1);
+ border-radius: 1em;
+ -webkit-backdrop-filter: blur(16px);
+ backdrop-filter: blur(16px);
+ box-shadow: 0 0 10mm rgba(0,0,0,1);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ z-index: 11;
}
+/*
.window:hover,
.windowWrap:hover {
- transform: scale(1.1);
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
-}
+ transform: scale(1.1);
+ -webkit-transition: transform 0.3s;
+ transition: transform 0.3s;
+} */
.window .windowWrap .text {
- position: relative;
- width: 100%;
- text-align: center;
- text-shadow: 10px 10px 10px black;
+ position: relative;
+ width: 100%;
+ text-align: center;
}
.window .windowWrap .text .title {
- /* z-index: -1; */
- /* transform: translateZ(30px); */
- font-family: monoton;
- font-size: 7vw;
- text-transform: uppercase
+ /* z-index: -1; */
+ /* transform: translateZ(30px); */
+ font-family: monoton;
+ font-size: 7vw;
+ text-transform: uppercase;
}
.description {
- /* z-index: -1; */
- /* transform: translateZ(30px); */
- font-family: rocksalt;
- font-size: 1.75vw;
+ /* z-index: -1; */
+ /* transform: translateZ(30px); */
+ font-family: rocksalt;
+ font-size: 1.75vw;
}
.title {
- text-shadow: 15px 15px 15px black;
- -webkit-transition: all 0.5s;
- transition: all 0.5s
+ text-shadow: 15px 15px 15px black;
+ -webkit-transition: all 0.5s;
+ transition: all 0.5s;
}
.title:hover {
- transform: scale(1.1);
- -webkit-transition: all 0.5s;
- transition: all 0.5s
+ transform: scale(1.1);
+ -webkit-transition: all 0.5s;
+ transition: all 0.5s
}
.window .windowWrap .text .br {
- display: block;
- height: 0;
- width: 0;
- margin-bottom: 5vh;
+ display: block;
+ height: 0;
+ width: 0;
+ margin-bottom: 5vh;
+}
+
+.text {
+ transform: translateZ(200px);
+ text-shadow: 0 1px 0 #e9e6e6,
+ 0 2px 0 #e9e6e6,
+ 0 3px 0 #e9e6e6,
+ 0 4px 0 #e9e6e6,
+ 0 5px 0 #e9e6e6,
+ 0 6px 0 #e9e6e6,
+ 0 7px 0 #e9e6e6,
+ 0 8px 0 #e9e6e6,
+ 0 9px 0 #e9e6e6,
+ 0 10px 0 #e9e6e6,
+ 0 30px 10px rgba(0,0,0,.7);
}
+.windowWrap, .tilt {
+ transform-style: preserve-3d;
+ perspective: 1000px;
+} \ No newline at end of file