SowinskiBraeden/BugBeGone
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix sign up nav

Browse Source
This commit is contained in:
SowinskiBraeden committed 2022-04-16 18:56:27 -07:00
1 parent 4af5e4594b
commit 41b991789e
7 files changed
+185 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/scripts/register.js
+16
View File
@@ -1,6 +1,22 @@
var counter = 1;
$(document).ready(function() {
// navigation bar toggle
$('#navbar-toggler').click(function(){
$('.navbar-collapse').slideToggle(400);
});
// navbar bg change on scroll
$(window).scroll(function(){
let pos = $(window).scrollTop();
if(pos >= 100){
$('.navbar').addClass('cng-navbar');
} else {
$('.navbar').removeClass('cng-navbar');
}
});
var erroEle = $('.error-message'),
focusInput = $('.questions').find('.active');
public/scripts/script.js
-9
View File
@@ -54,13 +54,4 @@ $(document).ready(function(){
});
});
// testimonial carousel
$('.testimonial .owl-carousel').owlCarousel({
loop: true,
autoplay: true,
dots: true,
nav: false,
items: 1
});
});
public/styles/register.css
+128 -26
View File
@@ -5,44 +5,108 @@
--black: #191b17;
--transition: all 0.5s ease-in-out;
}
* {
margin: 0;
body {
font-family: 'Hind Siliguri', sans-serif;
padding: 0;
}
*, *:after, *:before {
margin: 0;
box-sizing: border-box;
}
body {
background: #191b17;
font-size: 1.5em;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif;
font-weight: 100;
text-align: center;
html{
color: var(--black);
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
#signup:hover {
/* setup & reusable stylings */
img{
width: 100%;
}
a{
text-decoration: none;
color: var(--black);
}
li{
list-style-type: none;
}
button{
cursor: pointer;
}
.title {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -25%);
font-weight: 80;
z-index: 3;
}
.title h1 {
color: var(--white-smoke);
outline: 0;
background: transparent;
}
.container2{
max-width: 1320px;
margin: 0 auto;
padding: 0 1rem;
}
h1, h2, h3, h4, h5, h6{
margin: 0.6rem 0;
line-height: 1.25;
font-weight: 400;
text-transform: capitalize;
}
.text{
margin: 0.6rem 0;
opacity: 0.8;
}
.center {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
}
section{
padding: 6.5rem 0;
}
.title{
padding: 0.6rem 0;
text-align: center;
}
.title h2{
font-size: 2.2rem;
color: var(--night-rider);
}
.title .text{
font-weight: 500;
font-size: 1.1rem;
}
.register-title {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
}
.hero-div{
flex: 1;
flex-direction: column;
text-align: center;
}
.hero-div h1{
font-size: 2.55rem;
padding-bottom: 0.4rem;
}
/* header */
.header{
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../images/header-bg.jpg);
min-height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
display: flex;
flex-direction: column;
justify-content: stretch;
}
.navbar{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
}
.brand-and-toggler{
@@ -55,7 +119,6 @@ body {
.navbar-brand{
font-weight: 500;
color: var(--night-rider);
text-decoration: none;
}
.navbar-brand span{
color: var(--mount-meadow);
@@ -69,17 +132,14 @@ body {
}
.nav-item{
padding: 0.6rem 0;
list-style: none;
}
.nav-link{
color: var(--night-rider);
text-transform: uppercase;
font-size: 0.95rem;
letter-spacing: 1.5px;
font-weight: 400;
opacity: 0.65;
transition: var(--transition);
text-decoration: none;
}
.nav-link:hover{
color: var(--mount-meadow)!important;
@@ -87,6 +147,33 @@ body {
.navbar-collapse{
display: none;
}
.hero-div{
flex: 1;
flex-direction: column;
text-align: center;
}
.hero-div h1{
font-size: 2.55rem;
padding-bottom: 0.4rem;
}
.btn-trans{
color: #fff;
transition: var(--transition);
display: none;
}
.btn-trans:hover{
background: var(--mount-meadow);
border-color: var(--mount-meadow);
}
.btn-white{
background: #fff;
color: var(--night-rider);
transition: var(--transition);
}
.btn-white:hover{
background: transparent;
color: #fff;
}
.container {
background: #495069;
color: var(--white-smoke);
@@ -283,6 +370,13 @@ body {
.nav-link{
color: var(--white-smoke);
}
.hero-div h1{
font-size: 3.8rem;
}
.btn-trans{
display: inline-block;
margin-right: 0.8rem;
}
/* navbar change */
.cng-navbar{
@@ -298,4 +392,12 @@ body {
.cng-navbar .nav-link{
color: var(--night-rider);
}
}
@media screen and (min-width: 1200px){
.hero-div h1{
width: 70%;
margin-left: auto;
margin-right: auto;
}
}
public/styles/style.css
-3
View File
@@ -538,9 +538,6 @@ section{
.feature-right{
margin-top: 0;
}
.video p{
width: 60%;
}
}
@media screen and (min-width: 1200px){
routes/routes.go
+1
View File
@@ -11,6 +11,7 @@ func Setup(app *fiber.App) {
app.Get("/", controllers.MainPage)
app.Get("/register", controllers.RegisterPage)
app.Get("/login", controllers.LoginPage)
app.Get("/dashboard", controllers.DashboardPage)
// Authentication handlers
app.Post("/register", controllers.Register)
views/index.html
+2 -2
View File
@@ -17,7 +17,7 @@
<script src="https://kit.fontawesome.com/ccff26c93b.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- header -->
<header class="header" id="intro">
<nav class="navbar">
@@ -65,7 +65,7 @@
<div class="hero-btns animate__animated animate__fadeInUp animate__slow">
<a href="https://discord.gg/9ZdkyRmxCH"><button type="button" class="btn-trans">Join our Discord</button></a>
<a href="#team"><button type="button" class="btn-white">Meet our people</button></a>
<a href="/register"><button type="button" class="btn-white">Get Started</button></a>
</div>
</div>
</header>
views/register.html
+38 -35
View File
@@ -8,44 +8,47 @@
<script src="https://kit.fontawesome.com/ccff26c93b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="container2">
<div class="brand-and-toggler">
<a href="/" class="navbar-brand">
BugBeGone
</a>
<button type="button" class="navbar-toggler" id="navbar-toggler">
<i class="fas fa-bars"></i>
</button>
<header class="header">
<nav class="navbar">
<div class="container2">
<div class="brand-and-toggler">
<a href="/" class="navbar-brand">
BugBeGone
</a>
<button type="button" class="navbar-toggler" id="navbar-toggler">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="/#info" class="nav-link">info</a>
</li>
<li class="nav-item">
<a href="/#feature" class="nav-link">feature</a>
</li>
<li class="nav-item">
<a href="/#team" class="nav-link">team</a>
</li>
<li class="nav-item">
<a href="/#pricing" class="nav-link">pricing</a>
</li>
<li class="nav-item">
<a href="/#contact" class="nav-link">contact</a>
</li>
<li class="nav-item">
<a href="/login" class="nav-link">login</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="/#info" class="nav-link">info</a>
</li>
<li class="nav-item">
<a href="/#feature" class="nav-link">feature</a>
</li>
<li class="nav-item">
<a href="/#team" class="nav-link">team</a>
</li>
<li class="nav-item">
<a href="/#pricing" class="nav-link">pricing</a>
</li>
<li class="nav-item">
<a href="/#contact" class="nav-link">contact</a>
</li>
<li class="nav-item">
<a href="/login" class="nav-link">login</a>
</li>
</ul>
</div>
<div class="center">
<h1>Sign Up</h1>
</div>
</nav>
<div class="title">
<h1>Sign Up</h1>
</div>
</header>
<div class="container">
<div class="navigation">
<ol>