Style registration form

resources/build.sh → build.sh

@@ -3,7 +3,7 @@
 export project=$HOME/projects/trendplays
 
 watch() {
-	npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources/views $project/resources/scss &
+	npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources &
 	pid=$!
 	sass --load-path=sass --watch --error-css $project/resources/scss/main.scss\
 	$project/public/main.css &

public/main.js

@@ -1,5 +1,6 @@
 var toggle = document.querySelector(".nav-toggle");
 var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p");
+var registerToggles = document.querySelectorAll(".register-btn, .register-area .cancel-button, .services-cards button");
 toggle.addEventListener("click", function() {
   heroText.forEach((item) => {
     item.classList.toggle("hidden");
@@ -7,6 +8,11 @@ toggle.addEventListener("click", function() {
   document.querySelector("nav form.login").classList.toggle("active");
   this.classList.toggle("toggled");
 });
+for (i = 0; i < registerToggles.length; i++) {
+  registerToggles[i].addEventListener("click", function() {
+    document.querySelector(".register-area").classList.toggle("active");
+  });
+}
 var cols = document.getElementsByClassName("collapsible");
 var i;
 for (i = 0; i < cols.length; i++) {

resources/js/main.js

@@ -1,5 +1,7 @@
 var toggle = document.querySelector(".nav-toggle")
 var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
+var registerToggles = document.querySelectorAll(".register-btn, .register-area
+	.cancel-button, .services-cards button")
 
 toggle.addEventListener("click", function() {
 	heroText.forEach(item => {
@@ -10,6 +12,14 @@ toggle.addEventListener("click", function() {
 	// this.src = "/images/close.svg"
 })
 
+//Triggers for registration menu
+for (i = 0; i < registerToggles.length; i++) {
+	registerToggles[i].addEventListener("click", function() {
+	document.querySelector(".register-area").classList.toggle("active")
+	});
+}
+
+
 //FAQ code
 var cols = document.getElementsByClassName("collapsible");
 var i;

resources/scss/_vars.scss

@@ -16,6 +16,8 @@ $theme-colors: (
 	"dark-grey": #212121,
 	"faded-text": #425466,
 	"faded-text2": #6c757d,
+	"dark-green": #3bb78f,
+	"light-green": #0bab64
 );
 
 @function getColor($col) {

resources/scss/main.scss

@@ -85,7 +85,6 @@ nav h1 {
 
 nav #logo {
 	margin-right: 50px;
-	z-index: 2;
 }
 
 nav form {
@@ -467,18 +466,59 @@ footer a {
 	display: none;
 }
 
-div.toggle-area {
-	display: none;
+div.register-area {
 	overflow: hidden;
 	height: 0px;
 	width: 100%;
 	z-index: 1;
 	@include vars.hovering3;
-	// background-color: vars.getColor("light-grey");
 	margin-bottom: 2em;
-	position: absolute;
+	position: fixed;
 	border-radius: 0;
 	padding: 0;
+	opacity: 0;
+	transition: all 0.2s;
+	background: white;
+	h3 {
+		text-align: center;
+	}
+
+	label,input {
+		color: black;
+		display: block;
+		border-color: black;
+	}
+
+	div {
+		margin-top: 20px;
+		margin-bottom: 20px;
+	}
+
+	form {
+		width: fit-content;
+		margin: 20px auto;
+	}
+
+	.submit-btn {
+		width: 100%;
+		background-color: #3bb78f;
+		@include vars.special-button("light-green", "dark-green");
+	}
+
+	.cancel-button {
+		width: 20px;
+		height: 20px;
+		background: url("/images/close-black.svg");
+		background-size: cover;
+		position: absolute;
+		top: 20px;
+		right: 20px;
+	}
+}
+
+div.register-area.active {
+	height: 400px;
+	opacity: 1;
 }
 
 
@@ -518,21 +558,21 @@ div.toggle-area {
 		display: block;
 	}
 
-	div.toggle-area.active {
+	div.register-area.active {
 		display: initial;
 	}
 
-	div.toggle-area h1 {
+	div.register-area h1 {
 		font-size: 1.5rem;
 		display: inline-block;
 		color: vars.getColor("brand-orange");
 	}
 
-	div.toggle-area h3 {
+	div.register-area h3 {
 		text-align: center;
 	}
 
-	div.toggle-area .login {
+	div.register-area .login {
 		color: vars.getColor("brand-orange");
 		display: block;
 		margin-left: auto;
@@ -543,18 +583,18 @@ div.toggle-area {
 		// position: absolute;
 	}
 
-	div.toggle-area .login input {
+	div.register-area .login input {
 		border: 2px solid black;
-		border-color: vars.getColor("brand-orange");
+		border-color: black;
 		color: black;
 	}
 
-	div.toggle-area button {
+	div.register-area button {
 		margin-top: 1em;
 		width: 6em;
 	}
 
-	div.toggle-area div {
+	div.register-area div {
 		margin-top: 10px;
 		margin-bottom: 5px;
 	}

resources/views/home.blade.php

@@ -10,15 +10,16 @@
 @section('content')
 	@parent
 	<main>
-	<div class="toggle-area">
-		<a id='logo' href='/'>
-			<h1>Trendplays</h1>
-			<img src="/images/arrow-up.svg" height="30px" alt="">
-		</a>
-		<h3>Login</h3>
+	<div class="register-area">
+		<h3>Registration</h3>
 		<form class="login" action="">
 			@csrf
 			<div>
+			<label for='sender_name'>Name</label>
+			<input required type='name' name='sender_name' placeholder=''
+spellcheck='false'>
+			</div>
+			<div>
 			<label for='sender_email'>Email</label>
 			<input required type='email' name='sender_email' placeholder=''
 spellcheck='false'>
@@ -27,13 +28,18 @@ spellcheck='false'>
 			<label for='sender_password'>Password</label>
 			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
 			</div>
-			<button class='login-btn'type="login">Log in</button>
+			<div>
+			<label for='sender_password'>Confirm Password</label>
+			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
+			</div>
+			<button class="submit-btn" type="submit">Submit</button>
+			<div class="cancel-button"></div>
 		</form></div>
 	<div class='landing-hero'>
 		<div class='hero-filter'>
 			<h2>The web's #1 content promoter</h2>
 			<p>Give your brand the boost it needs for oganic growth with the web's most trusted social media marketing panel.</p>
-			<a class='register-btn' href="/register">Register Now</a>
+			<a class='register-btn'>Register Now</a>
 		</div>
 	</div>
 	<div class='blue-background'><section class="about-us">