Techies page

.gitignore

@@ -1 +1,2 @@
-/designs
+/designs
+35123921_1710169415733082_1750783073923891200_o.jpg

css/activities.css

@@ -0,0 +1,148 @@
+body{
+	background: #fefefe;
+}
+
+.upcoming_container{
+	padding: 1em;
+	display: flex;
+	flex-direction: column;
+}
+
+.container_title{
+	position: relative;
+	font-size: 3em;
+	font-family: CODE_BOLD;
+	align-self: center;
+	display: flex;
+	justify-content: center;
+}
+
+.container_title:after{
+	content: '';
+	background: black;
+	height: .1em;
+	width: 30%;
+	top: 130%;
+	position: absolute;
+}
+
+.event{
+	padding: 2em;
+	display: flex;
+	flex-direction: row;
+}
+
+.event_cover{
+	display: flex;justify-content: flex-end;
+}
+
+.event_cover img{
+	max-height: 25em;
+	align-self: flex-end;
+}
+
+.event_details{
+	padding: 2em;
+	display: flex;
+	flex-direction: column;
+}
+
+.event_details .event_title{
+	align-self: flex-start;
+	font-size: 2em;
+	font-family: rock_regular;
+	align-self: flex-start;
+}
+
+.event_details .event_description p{
+	font-family: quicksand_medium;
+}
+
+.event_details .buttons{
+	display: flex;
+}
+
+.event_details .read_more{
+	display: flex;
+	flex-direction: column;
+	padding: 1em;
+	margin-top: 1em;
+	font-family: quicksand_bold;
+	font-family: 1.2em;
+	border: 1px solid black;
+	border-radius: .3em;
+	min-width: 6em;
+	background: rgba(0,0,0,0);
+	transition: .2s;
+	cursor: pointer;
+}
+
+.read_more:nth-child(2){
+	margin-left: 1.5em;
+}
+
+.read_more span{
+	margin: 0;
+	align-self: center;
+}
+
+.event_details .read_more:hover{
+	background: rgba(0,0,0,.08);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.event-details-container{
+	flex-grow: 1;
+	position: relative;
+	background: white;
+	top: 0em;
+	/height: auto;
+	height: 100vh;
+	width: 100vw;
+	align-self: center;
+	position: fixed;
+	flex-direction: column;
+	display: flex;
+	transition: .2s top;
+	transition-timing-function: ease-in-out;
+}
+
+.hidden{
+	top: -100vh;
+}
+
+.go-back{
+	position: absolute;
+	right: 2em;
+	bottom: 0em;
+	padding: 1em;
+	background: #DDDDDD;
+	border: .1em solid #222222;
+	transform: rotate(-90deg);
+	border-radius: 100%;
+	width: 1.5em;
+	height: 1.5em;
+	cursor: pointer;
+	transition: .5s;
+}
+
+.go-back:hover{
+	background: #999999;
+	transform: rotate(270deg);
+}
+
+
+
+
+
+

css/fonts.css

@@ -3,7 +3,7 @@
 	src: url(../fonts/CODE%20Bold.otf);
 }
 @font-face{
-	font-family: CODE_light;
+	font-family: CODE_regular;
 	src: url(../fonts/CODE%20light.otf);
 }
 @font-face{
@@ -30,3 +30,15 @@
 	font-family: Dosis_ExtraBold;
 	src: url("../fonts/dosis_family/Dosis-ExtraBold.otf")
 }
+@font-face{
+	font-family: quicksand_regular;
+	src: url("../fonts/Quicksand/Quicksand-Regular.ttf")
+}
+@font-face{
+	font-family: quicksand_bold;
+	src: url("../fonts/Quicksand/Quicksand-Bold.ttf")
+}
+@font-face{
+	font-family: quicksand_medium;
+	src: url("../fonts/Quicksand/Quicksand-Medium.ttf")
+}

css/home.css

@@ -68,13 +68,6 @@
 	margin: 0;
 }
 
-
-
-
-
-
-
-
 .about-us{
 	position: relative;
 	width: 100vw;

css/index.css

@@ -1,4 +1,192 @@
 /* The container application */
 #app {
 	margin-top: 6.7vw;  /make this shit dynamic
-}
+}
+
+#loginl, #logoutl, #register1 {
+    background-color: rgb(22,22,22);
+    border: none;
+    color: #49ff68;
+    margin: 0.2em;
+	cursor: pointer;
+	transition: color .2s;
+}
+#logoutl:hover, #loginl:hover{
+	color: white;
+}
+
+/* The login pages */
+#glassfield {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
+    filter: blur(30px);
+}
+#loginbox {
+    background-color: white;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+	height: 60vh;
+	justify-content: center;
+    transform: translate(-50%, -50%);
+    width:50%;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
+	border-radius: .5em;
+}
+#loginclose {
+    background: url(/icons/cross.svg) no-repeat;
+    background-color: white;
+    background-position: 50% 50%;
+    width: 4em;
+    height: 4em;
+    border-style: none;
+	border-top-right-radius: .5em;
+    position: absolute;
+    top: 0;
+    right: 0;
+	cursor: pointer;
+	transition: background .2s;
+}
+#loginclose:hover{
+	background-color: rgba(0,0,0,.1);
+}
+#loginbox img{
+	width: 30%;
+}
+.login-container{
+	width: 70%;
+	display: flex;
+	flex-direction: column;
+}
+.login-item {
+    border: 1px solid #222222;
+    margin: 0.5em;
+    border-radius: .2em;
+    padding: 10px 0.5%;
+    width: 98%;
+}
+.form-button:hover{
+    opacity:0.8;
+}
+.form-button {
+	align-self: center;
+	width: 50%;
+    font-family: code_bold;
+    background-color: #2F5977;
+    color: white;
+    border: none;
+	margin: .5%;
+    cursor: pointer;
+    transition: .2s;
+}
+p{
+    font-family: rock_bold;
+}
+input#login-submit{
+    font-size: 2em;
+    font-family: rock_bold;
+}
+
+/* Registration form */
+
+.hidden{
+    display: none !important;
+}
+.shown{
+	display: flex;
+}
+
+.sign_up_mother_container{
+	top: 0;
+	z-index: 10;
+	position: fixed;
+	height: 100vh;
+	flex-direction: row;
+	justify-content: center;
+	width: 100vw;
+	background: rgba(0,0,0,.15);
+}
+
+.popup{
+	padding: 1em 3em;
+	padding-bottom: 3em;
+	position: fixed;
+	top: 50vh;
+	transform: translateY(-50%);
+	background: #FEFEFE;
+	border: 2px solid #222222;
+	width: 60%;
+	align-self: center;
+}
+
+.popup .cross{
+	position: absolute;
+	right: 0;
+	top: 0;
+	padding: 1em;
+}
+
+.popup .cross:hover{
+	cursor: pointer;
+	transition: .4s;
+	background: rgba(0,0,0,.2);
+}
+
+.popup h1{
+	padding-bottom: .5em;
+	font-family: quicksand;
+}
+
+.popup input{
+	font-family: quicksand_medium;
+	border: 1px solid #222222;
+	box-shadow: none;
+	border-radius: .2em;
+	padding: .8em .5em;
+	width: 30em;
+}
+
+.popup textarea{
+	font-family: quicksand_medium;
+	border: 1px solid #222222;
+	box-shadow: none;
+	border-radius: .2em;
+	padding: .8em .5em;
+	height: 5em;
+	width: 30em;
+}
+
+.popup .dp_uploader{
+	overflow: hidden;
+	width: 40%;
+	position: absolute;
+	right: 1em;
+	top: 50%;
+	transform: translateY(-50%);
+	/border: 1px solid black;
+	display: flex;
+	flex-direction: column;
+}
+
+.dp_uploader input#addPhoto{
+	margin-top: 2em;
+	width: 23em;
+	align-self: center;
+}
+
+.dp_uploader img{
+	align-self: center;
+	border-radius: 50%;
+	width: 70%;
+}