aboutsummaryrefslogtreecommitdiff
path: root/react-frontend/src/css
diff options
context:
space:
mode:
Diffstat (limited to 'react-frontend/src/css')
-rw-r--r--react-frontend/src/css/App.css1
-rw-r--r--react-frontend/src/css/Landing.css322
2 files changed, 168 insertions, 155 deletions
diff --git a/react-frontend/src/css/App.css b/react-frontend/src/css/App.css
index f632a7f..e39eb3e 100644
--- a/react-frontend/src/css/App.css
+++ b/react-frontend/src/css/App.css
@@ -6,6 +6,7 @@
grid-template-rows: max-content auto max-content;
grid-template-columns: max-content auto max-content max-content;
background-color: #121212;
+
}
.App-logo {
diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css
index c2bc567..58658b0 100644
--- a/react-frontend/src/css/Landing.css
+++ b/react-frontend/src/css/Landing.css
@@ -1,244 +1,256 @@
html {
- scroll-behavior: smooth;
- }
+ scroll-behavior: smooth;
+ z-index: 1000;
+
+}
.nav-bar{
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100vw;
- height: 70px;
- background-color: rgb(7, 7, 44);
- z-index: 100;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100vw;
+ height: 70px;
+ background-color: rgb(7, 7, 44);
+ z-index: 100;
}
.topnav {
- background-color: rgb(7, 7, 44);
- overflow: hidden;
- margin-right: 30px;
+ background-color: rgb(7, 7, 44);
+ overflow: hidden;
+ margin-right: 30px;
}
.topnav a {
- float: right;
- color: #f2f2f2;
- text-align: center;
- padding: 14px 16px;
- text-decoration: none;
- font-size: 17px;
- height: 30px;
- padding-top: 25px;
+ float: right;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+ height: 30px;
+ padding-top: 25px;
}
.topnav a:hover {
- background-color: rgb(17, 11, 99);
- color: white;
+ background-color: rgb(17, 11, 99);
+ color: white;
}
.topnav a.active {
- background-color: #4CAF50;
- color: white;
+ background-color: #4CAF50;
+ color: white;
}
-body {
- background-color: #f3f3f3;
- font-family:Verdana, Geneva, Tahoma, sans-serif;
- overflow-y: scroll;
- overflow-x: hidden;
- display: flex;
- flex-direction: column;
- width: 80vw;
- scroll-behavior: smooth slow;
+.body {
+ background-color: #f3f3f3;
+ font-family:Verdana, Geneva, Tahoma, sans-serif;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ width: 100vw;
+ scroll-behavior: smooth slow;
+ z-index: 100;
}
main {
- margin-top: 65px;
- display: flex;
- flex-direction: column;
+ margin-top: 65px;
+ display: flex;
+ flex-direction: column;
}
.intro {
- height: 900px;
- width: 100vw;
- background-color: rgb(3, 2, 24);
- color: white;
- position: relative;
- left: -10px;
+ height: 900px;
+ width: 100vw;
+ background-color: rgb(3, 2, 24);
+ color: white;
+ position: relative;
+ left: -10px;
}
#enter-watchdogs {
- background-color: rgb(206, 206, 206);
- color: rgba(10, 9, 71);
- border: 2px solid rgb(255, 255, 255);
- border-radius: 5px;
- padding: 5px 10px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- height: 70px;
- width: 200px;
- font-weight: bold;
- font-family:sans-serif;
+ background-color: rgb(206, 206, 206);
+ color: rgba(10, 9, 71);
+ border: 2px solid rgb(255, 255, 255);
+ border-radius: 5px;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ height: 70px;
+ width: 200px;
+ font-weight: bold;
+ font-family:sans-serif;
}
#enter-watchdogs:hover {
- background-color: #94ff73;
- }
+ background-color: #94ff73;
+}
.app-preview {
- height: 900px;
- width: 100vw;
- background-color: #b7ffb9;
- color: white;
- position: relative;
- left: 0px;
- position: relative;
- left: -10px;
+ height: 900px;
+ width: 100vw;
+ background-color: #b7ffb9;
+ color: white;
+ position: relative;
+ left: 0px;
+ position: relative;
+ left: -10px;
}
#preview {
- width: 70vw;
- border: 10px solid rgb(255, 255, 255);
- border-radius: 5px;
+ width: 70vw;
+ border: 10px solid rgb(255, 255, 255);
+ border-radius: 5px;
}
#preview-text {
- color:#868686;
- font-size: small;
+ color:#868686;
+ font-size: small;
}
section {
- width: 100vw;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+width: 100vw;
+overflow: hidden;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
}
#app-intro{
- padding-top: 160px;
- height: fit-content;
- width: 100vw;
+padding-top: 160px;
+height: fit-content;
+width: 100vw;
}
.team {
- width: 100%;
- max-width: 1600px;
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- padding-top: 0px;
- width: 80%;
- min-height: 500px;
- align-items: center;
+width: 100%;
+max-width: 1600px;
+display: flex;
+flex-direction: row;
+justify-content: space-evenly;
+padding-top: 0px;
+width: 80%;
+min-height: 500px;
+align-items: center;
}
.center {
- display: flex;
- flex-direction: column;
- justify-content: center;
+display: flex;
+flex-direction: column;
+justify-content: center;
}
.heading{
- font-size: 45px;
- margin: 10px 0 0 0;
- text-align: center;
- font-weight: bold;
+font-size: 45px;
+margin: 10px 0 0 0;
+text-align: center;
+font-weight: bold;
}
.text{
- color: rgba(0,0,0, 0.6);
- font-size: 18px;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- max-width: 700px;
- margin: 10px 0 20px 0;
+color: rgba(0,0,0, 0.6);
+font-size: 18px;
+display: flex;
+justify-content: center;
+align-items: center;
+text-align: center;
+max-width: 70vw;
+margin: 10px 0 20px 0;
}
#team {
- width: 100vw;
- padding: 50px 0 200px 0;
- justify-content: flex-start;
- background-color: #cccccc;
- position: relative;
- left: -10px;
+width: 100vw;
+padding: 50px 0 200px 0;
+justify-content: flex-start;
+background-color: #cccccc;
+position: relative;
+left: -10px;
}
#team-heading{
- margin-bottom: 0px;
+margin-bottom: 0px;
}
#team-holder {
- flex-direction: column;
- max-width: 1000px;
- max-height: 500px;
- height: 500px;
+flex-direction: column;
+max-width: 1000px;
+max-height: 500px;
+height: 500px;
}
#people-holder{
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 100%;
+display: flex;
+flex-direction: row;
+justify-content: center;
+align-items: center;
+width: 100%;
}
.team-person-holder{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 50px;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+margin-top: 50px;
}
.team-person{
- border-radius: 100px;
- overflow: hidden;
- margin: 20px;
- height: 200px;
- width: 200px;
- box-shadow: 0 0 2px 2px rgba(0,0,0,0.15);
+border-radius: 100px;
+overflow: hidden;
+margin: 20px;
+height: 200px;
+width: 200px;
+box-shadow: 0 0 2px 2px rgba(0,0,0,0.15);
}
.team-text{
- color: rgba(0,0,0, 1);
- font-size: 18px;
+color: rgba(0,0,0, 1);
+font-size: 18px;
+display: flex;
+justify-content: center;
+align-items: center;
+text-align: center;
+max-width: 700px;
+margin: 0;
+}
+
+#footer {
+ width: 100vw;
+ background: rgb(7, 7, 44);
display: flex;
+ flex-direction: column;
justify-content: center;
align-items: center;
- text-align: center;
- max-width: 700px;
- margin: 0;
+ position: relative;
+ left: -10px;
+ height: fit-content;
+ width: 100vw;
}
-#footer {
- width: 100vw;
- background: rgb(7, 7, 44);
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: relative;
- left: -10px;
- height: fit-content;
- width: 100vw;
- }
-
.footer-item{
- color: white;
- font-size: 20px;
+ color: white;
+ font-size: 20px;
}
.footer-subtext{
- color: white;
- font-size: 15px;
- width: 80vw;
+ color: white;
+ font-size: 15px;
+ width: 80vw;
}
.appinfotxt {
- font-size: 15px;
- color:rgb(3, 2, 24);
+font-size: 15px;
+color:rgb(3, 2, 24);
+max-width: 70vw;
+}
+
+.h2 {
+font-size: 30px;
+color: black;
}
+#return-to-landing {
+z-index: 1000;
+}