Skip to content

Commit

Permalink
Merge pull request #88 from singhcoder694/codepeak23/responsive_web
Browse files Browse the repository at this point in the history 
Made whole website responsive
  • Loading branch information
@Kritika30032002
Kritika30032002 authored Dec 10, 2023
2 parents 7ae2aec + 56c4545 commit 4f88000
Show file tree
Hide file tree
Showing 6 changed files with 274 additions and 102 deletions.
148 changes: 141 additions & 7 deletions public/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,104 @@ html {
padding-top: 200px;
text-align: center;
}
.about-title{
text-align: center;
letter-spacing: 0.01em;
padding:20px;
font: 8rem itc-bodoni-175, serif;
font-style: italic;
color: black;
}
@media (max-width:760px) {
.about-title{
font-size: 6rem;
}
}
@media (max-width:580px) {
.about-title{
font-size: 4rem;
}
}
@media (max-width:400px) {
.about-title{
font-size: 3rem;
}
}

/* .con */
.hamburger{
display: none;
}
@media screen and (max-width:400px) {
.hamburger{
display: block;
color:#343A40;
padding:3px 8px;
background-color: white;
border:1px solid black;
border-radius: 2px;
}
}
@media screen and (max-width:400px) {
.form-inline a{
display: none;
}
}
.side_nav{
display: none;
}
@media (max-width:400px){
.side_nav{
height: fit-content;
width:100vw;
position: fixed;
z-index: 12;
top: 56px;
}
.side_nav .content{
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.side_nav .content a{
color:white;
background-color: #343A40;
border-radius:0px;
border: 1px solid black;
}
@media (min-width:200px) and (max-width:400px){
.side_nav .content a{
margin:0px!important;
}
}
.side_nav .content a:hover{
background-color: black;
color: white;
}
.side_nav{
display: block;
right: 0px;
transition: right 0.3s ease-in-out;
}
}
.hide{
overflow: hidden;
height: 0;
max-height: 0;
right:-450px;
transition: right 0.3s ease-in-out;
}
.paragraph{
margin-left:11%;
}
@media screen and (max-width:992px){
.paragraph{
text-align: center;
margin:auto;
padding:10px;
}
}
#theme-toggle {
cursor: pointer;
border: none;
Expand All @@ -30,7 +128,6 @@ html {
font-size: x-large;
}
}

.form-inline a {
transition: 0.3s;
}
Expand Down Expand Up @@ -69,21 +166,40 @@ html {
.container-image {
min-width: 450px;
max-width: 500px;
margin-right: 1%;
margin: 20px!important;
}
@media (min-width:450px){
.container-image {
min-width:300px;
max-width:450px;
margin:20px!important;
}
}
@media (min-width:200px){
.container-image {
min-width:200px;
max-width:300px;
margin:20px!important;
}
}
@media (min-width:200px) and (max-width:400px){
.container-image img {
transform: scale(0.9);
}
}

#myBtn {
display: block;
position: fixed;
bottom: 20px;
right: 30px;
bottom: 10px;
right: 10px;
z-index: 99;
border: none;
border: 1px solid black;
border-radius: 50%;
outline: none;
background-color: white;
cursor: pointer;
padding: 10px;
border-radius: 45%;
transform: scale(0.6);
transition: 0.3s;
}
#myBtn:hover {
Expand Down Expand Up @@ -138,3 +254,21 @@ html {
text-decoration: none;
color:black;
}
.display-3{
font-size: 5rem;
}
@media (min-width:600px) and (max-width:850px){
.display-3{
font-size: 3rem;
}
}
@media (min-width:400px) and (max-width:600px){
.display-3{
font-size: 2.5rem;
}
}
@media (min-width:200px) and (max-width:400px){
.display-3{
font-size: 2rem;
}
}
31 changes: 3 additions & 28 deletions views/about.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,14 @@
<%- include('partials/header') %>

<h1
<p
class="about-title"
style="
text-align: center;
padding: -1%;
margin: 3%;
margin-left: -23%;
padding: 3% 30% -90% 3%;
font-size: 90px;
letter-spacing: 0.01em;
font: 129.395px itc-bodoni-175, serif;
font-style: italic;
color: black;
"
;background-size:107.395px
>
About Secrets
</h1>

<!-- <p style="font-size: 1.5rem; padding: 95px; margin-top: -60px;" class="paragraph">
Secrets is the place where everyone can add their secrets.<br/> It is created
with an idea of having a fun space where people <br/>could share their secrets,
without revealing their true identity.<br/> It makes more intresting to know that other dont want to share it <br/>but still are sharing. Thus, share your secrets and we will
store them for you, <br/>without revealing your identity, making things
interesting.
</p> -->

<!-- <div class="container-image"> -->
<!-- <img src="image/secrets.jpg" alt="" style="width: 18%; padding: 2% ;margin-left:900px; margin-bottom: -200px; " /> -->
<!-- </div> -->
</p>

<div class="container-about">
<div class="container-text" style="padding: -3% 6% 6% 20%">
<p style="font-size: 1.5rem; margin-left: 11%" class="paragraph">
<p style="font-size: 1.5rem;" class="paragraph">
Secrets is the place where everyone can add their secrets.It is created
with an idea of having a fun space where people could share their secrets,
without revealing their true identity. It makes more intresting to know
Expand Down
2 changes: 1 addition & 1 deletion views/home.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, F
</div>
<a href="#navbar" id="myBtn" title="Go to top">
<img src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"
style="width: 60%; height: 70%; color: white; position: relative; left: 7px" />
style="width: 80%; height: 70%; color: white; position: relative; left: 5px" />
</a>

<%- include('partials/footer') %>
137 changes: 80 additions & 57 deletions views/login.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,84 @@
<%- include('partials/header') %>
<div
class="container mt-5"
style="margin-bottom: 197px"
>
<h1>Login</h1>

<div class="container mt-5" style="margin-bottom: 197px">
<div class="container mt-5" style="margin-bottom: 197px">
<h1>Login</h1>
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<!-- Makes POST request to /login route -->
<form action="/login" method="POST">
<div class="form-group">
<label for="email">Email</label>
<input placeholder="Enter your email" type="email" class="form-control" name="username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input placeholder="minimum 8 length with atleast 1 special ,upper ,lower and a number" type="password" class="form-control" name="password" />
</div>
<button type="submit" class="btn btn-dark" role="button">Login</button>
</form>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<a
class="btn btn-block btn-social btn-google"
href="/auth/google"
role="button"
>
<i class="fab fa-google"></i>
Sign In with Google
</a>
</div>
</div>

<div class="card">
<div class="card-body">
<a
class="btn btn-block btn-social btn-facebook"
href="/auth/facebook"
role="button"
>
<i class="fab fa-facebook"></i>
Sign In with Facebook
</a>
</div>
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<!-- Makes POST request to /login route -->
<form
action="/login"
method="POST"
>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
class="form-control"
name="username"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
name="password"
/>
</div>
<button
type="submit"
class="button_all_black"
role="button"
>
Login
</button>
</form>
</div>
</div>
</div>

<div class="col-sm-4">
<div class="card social-block">
<div class="card-body">
<a
class="btn btn-block btn-social btn-google"
href="/auth/google"
role="button"
>
<i class="fab fa-google"></i>
Sign Up with Google
</a>
</div>
</div>

<div class="card social-block">
<div class="card-body">
<a
class="btn btn-block btn-social btn-facebook"
href="/auth/facebook"
role="button"
>
<i class="fab fa-facebook"></i>
Sign Up with Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#navbar" id="myBtn" title="Go to top">
<img
src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"
style="width: 70%; height: 70%; color: white; position: relative; left: 7px"
/>
</a>
<a
href="#navbar"
id="myBtn"
title="Go to top"
>
<img
src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"
style="width: 80%; height: 70%; color: white; position: relative; left: 5px"
/>
</a>
<%- include('partials/footer') %>
Loading

0 comments on commit 4f88000

Please sign in to comment.