Skip to content

Commit

Permalink
REGISTRATION FORM UPDATED
Browse files Browse the repository at this point in the history
  • Loading branch information
@EvrimCiftci
EvrimCiftci committed Feb 29, 2024
1 parent a7043fa commit 110c40c
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 57 deletions.
90 changes: 46 additions & 44 deletions public/css/homePage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ scroll-behavior: smooth;
padding: 0;
margin: 0;
align-items: center;
background-color: #1d1a39;
background-color: #fff;
}
#header{
margin:10px;
Expand All @@ -16,79 +16,83 @@ border-top: solid 2px #fff;

}
.col{
background-color: #1d1a39;
background-color: #fff;
color: red;
border: none;
min-height: 170px;
display: flex;
align-items: center;
padding: 25px;

border-bottom: 2px solid red;
border-top: 2px solid red;
}

.col h1 ,h3{
font-family: 'Bebas Neue', sans-serif;
color: #fff;
color: red;

}
.container{
display: flexbox;
display: flex;
flex-direction: column;
height: 100%;
margin: 0px;
padding: 15px;
position: absolute;
width: 100%;

align-items: center;
justify-content: space-between ;
}
.container .col{
border: solid #1d1a39 0.5px;
min-height: 400px;
min-width: 275px;
border-radius: 15px;
}

a{
text-decoration: none;
color: white;
color: red;
font-size: 1rem;
margin: 10px;
transition: all 0.5s ease-in-out;
margin-left: 25px;
}
a:hover{
color: whitesmoke;
color: rgb(170, 3, 3);
margin-left: 30px;
text-shadow: 3px 4px 0px lightgreen;
text-shadow: 3px 4px 0px red;
}

#right-box{

background-position: right;
background-size: contain;
background-repeat: no-repeat;
border: solid 1px black;
height: 150px;
width: 150px;
border-radius: 15px;
}

#loginContainer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-position:center ;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
margin-left: 110px;
background-color: #1d1a39;
border: none;
}

.login-box{
justify-content: center;
padding: auto;
display: flex;
align-items: center;
border: solid 1px white;
box-shadow: 2px 2px 8px 2px white;
width: 70%;
border: solid 1px red;
box-shadow: 1px 1px 2px 1px red;
width: 60%;
padding: 20px;
margin-left: 30%;
border-radius: 25px;
Expand Down Expand Up @@ -133,20 +137,14 @@ text-align: center;
height: 100%;
width: 100%;
border-radius: 8px;
background: linear-gradient(
to right,
hsl(248, 39%, 39%) 0%,
hsl(248, 39%, 49%) 8%,
hsl(248, 39%, 39%) 92%,
hsl(248, 39%, 29%) 100%
);
background-color: rgb(253, 50, 50);
}

.front {
display: block;
position: relative;
border-radius: 8px;
background: hsl(248, 53%, 58%);
background: rgb(252, 104, 104);
padding: 16px 32px;
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Expand Down Expand Up @@ -199,6 +197,7 @@ text-align: center;
}

.input:focus {
border: solid 1px red;
background-color: white;
transform: scale(1.05);
box-shadow: 2px 2px 20px #969696,
Expand Down Expand Up @@ -333,44 +332,49 @@ transform: scaleY(0.45);
padding-left: 200px;
padding-right: 200px;
width: 900px;
background-color: #1d1a39;
margin-left: 300px;
border: solid white 1px;
border-radius: 25px;

}
#carouselExample{
border: solid black 1px;

border: solid red 1px;
margin-right: 25px;
}
#footer{
justify-content: space-between;
min-height: 150px;
border: none;
border-top: solid #fff;
background-color: #1d1a39;
width: 100%;
margin-left: 20%;
border-top: solid red;
background-color: #fff;
width: 1700px;
margin-left: 15%;
margin-right: -10%;
}
.left-footer{
width: 200px;
width: 500px;
height: 200px;
float: left;
text-align: center;
padding: 40px;
padding-top: 0;
color: white;
color: red;
}
.left-footer img{
height: 60px;
width: 60px;
}
.left-footer a{
margin: 0;
color: white;
color: red;
}
.mid-footer{
width: 35%;
height: 200px;
}
.right-footer{
width: 500px;
height: 200px;
float: right;
padding: 15px;
}
Expand All @@ -379,7 +383,7 @@ transform: scaleY(0.45);
.card {
width: fit-content;
height: fit-content;
background-color: #1d1a39;
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
Expand All @@ -393,7 +397,7 @@ transform: scaleY(0.45);
.socialContainer {
width: 52px;
height: 52px;
background-color: rgb(22, 37, 113);
background-color: #e91e63;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -453,7 +457,7 @@ transform: scaleY(0.45);
left:0;
top:0;
height:100vh;
background-color: #152b4a;
background-color: rgb(248, 117, 117);
z-index:-1;
opacity:0;
}
Expand All @@ -468,16 +472,14 @@ transform: scaleY(0.45);
}
.registrationFormContainer {
width: 500px;
border: solid 2px white;
border: solid 3px white;
border-radius: 2px;
z-index:11;
top: 50%;
left: 20%;
position: fixed;
background: linear-gradient(to right top, white,#1d1a39);
border-radius: 25px;
box-shadow:0px 0px 10px 3px white;
background: linear-gradient(to right top, rgb(255, 149, 149),rgb(252, 101, 101));
transform: translate(50%, -50%);
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
Expand All @@ -500,9 +502,9 @@ transform: scaleY(0.45);
}
.showButton{
border: none;
background-color:#1d1a39;
background-color:white;
font-size: 1em;
color: white;
color: red;
margin-top: 25px;
margin-left: 25px;
}
Expand Down
25 changes: 12 additions & 13 deletions views/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="/css/homePage.css">
<link rel="stylesheet" href="/public/css/homePage.css">

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
Expand Down Expand Up @@ -76,11 +76,7 @@ <h3>By CoffeeCollab</h3>
<form action="/create-user" method="POST" >

<h2 class="registerTitle">Register Now!</h2>
<input type="radio" class="btn-check" name="userType" id="manager" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="manager">Manager</label>

<input type="radio" class="btn-check" name="userType" id="employee" autocomplete="off">
<label class="btn btn-outline-primary" for="employee">Employee</label>


<div class="form-floating">
<input type="text" autocomplete="off" name="fullname" class="input" id="registrationFullName" placeholder="FullName" required>
Expand All @@ -91,7 +87,10 @@ <h2 class="registerTitle">Register Now!</h2>
<input type="email" autocomplete="off" name="email" class="input" id="registrationEmail" placeholder="email" required>

</div>
<div class="form-floating">
<input type="tel" autocomplete="off" name="sinNumber" class="input" id="sin" placeholder="sinNumber" required>

</div>
<div class="form-floating">
<input type="password" autocomplete="off" name="password" class="input" id="registrationPassword" placeholder="Password" required>

Expand Down Expand Up @@ -150,23 +149,23 @@ <h2 class="registerTitle">Register Now!</h2>
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/pictures/toronto.webp" class="d-block w-100" alt="...">
<img src="/public/pictures/toronto.webp" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block " id="text-context">
<h5 >Why did we decide to do a time sheet App? </h5>
<p>in back then we used to work in a restaurant where all the time sheet managed by paper sheets ,
and we would always think about how easy it'd be with an app so one day we came up with an idea of a time sheet app</p>
</div>
</div>
<div class="carousel-item">
<img src="/pictures/toronto2.jpg" class="d-block w-100" alt="...">
<img src="/public/pictures/toronto2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block " id="text-context">
<h5 >what Features did we use for this project?</h5>
<p>HTML,CSS,Bootstrap,JS,MongoDB</p>
</div>
</div>
<div class="carousel-item">

<img src="/pictures/toronto3.jpg" class="d-block w-100" alt="...">
<img src="/public/pictures/toronto3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block " id="text-context">
<h5 >Who's CoffeeCollab? </h5>
<p>Two friends who are trying to learn new things from each other and gain some experience by doing new projects. </p>
Expand All @@ -188,9 +187,9 @@ <h5 >Who's CoffeeCollab? </h5>
</div>
<div class="row row-col-1 row-flex">

<div class="col row-12 offset-2 gy-4 " id="footer">
<div class="left-footer col-3">
<img src="/pictures/CoffeeCollab.jpeg" >
<div class="col " id="footer">
<div class="left-footer ">
<img src="/public/pictures/CoffeeCollab.jpeg" >
<a href="mailto:[email protected]"> <h5>Contact us</h5></a>
<p>© 2023 CoffeeCollab, Inc</p>
</div>
Expand All @@ -216,6 +215,6 @@ <h5 >Who's CoffeeCollab? </h5>


</div>
<script src="/jsForPages/index.js"></script>
<script src="/public/jsForPages/index.js"></script>
</body>
</html>

0 comments on commit 110c40c

Please sign in to comment.