Skip to content

Major UI/UX Update in the form #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PrerakMathur20 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Major UI/UX Update in the form #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7986548
Major UI/UX Update in form
PrerakMathur20 Oct 1, 2021
4145e52
Form Updated
PrerakMathur20 Oct 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 86 additions & 28 deletions hacktoberfest/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet">

<!-- Stylesheet -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="styles.css">
<title>Document</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Abhi's Gym!</title>
</head>

<body>
<div class="header">
<div class="left">
Expand All @@ -25,29 +28,84 @@ <h4>ABHI's GYM</h4>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact Us</a></li>
</div>
<div class="right">
<button class="btn">Sign Up</button>
<button class="btn">Login</button>
<div class="right" style="margin: 10px;">
<button class="btn" style="background-color: white;">Sign Up</button>
<button class="btn" style="background-color: white;">Login</button>
</div>
</div>
<div class="cont1">
<h1>40% off </h1>
<h2>Join the best GYM of SILIGURI</h2>
<h4>Please enter your details to get yourself registered</h4>
<div><input type="text" class="inp" id="" placeholder="Name"></div>
<div><input type="number" class="inp" id="" placeholder="Age"></div>
<div>
<select class="selt" >
<option value="" >Male</option>
<option value="">Female</option>
<option value="">others</option>
</select>

<div class="container">

<div class="row">
<div class="col-12">
<form class="box">
<div class="col-12">
<div class="row">
<div class="col-12 text-center">
<h2>40% Off</h2>
<h3>Join the best GYM of SILIGURI</h3>
<h4>Please enter your details to get yourself registered</h4>
</div>
</div>
</div>
<div class="form-group">
<label for="#">Name</label>
<input type="text" class="form-control" id="#" aria-describedby="#" placeholder="Enter Name">
</div>

<div class="form-group">
<label for="#">Date Of Birth</label>
<input type="date" class="form-control" id="#" aria-describedby="#"
placeholder="Enter DOB (dd/mm/yyyy)">
</div>

<div class="form-group">
<label for="#">Sex</label>
<select class="form-control">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>


<div class="form-group">
<label for="#">Contact Number</label>
<input type="number" class="form-control" id="#" aria-describedby="#"
placeholder="Enter Phone Number">
</div>

<div class="form-group">
<label for="#">Email address</label>
<input type="email" class="form-control" id="#" aria-describedby="#" placeholder="Enter email">
</div>

<div class="form-group">
<label for="#">Locality</label>
<input type="text" class="form-control" id="#" aria-describedby="#"
placeholder="Enter your Locality">
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>

</div>
</div>
<div><input type="number" class="inp" id="" placeholder="Phone No."></div>
<div><input type="text" class="inp" id="" placeholder="Email Id"></div>
<div><input type="text" name="" id=""placeholder="Locality"></textarea></div>
<button class="Submit">Submit</button>
</div>



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>

</html>
</html>
136 changes: 74 additions & 62 deletions hacktoberfest/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,106 @@
@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap");

body {
font-family: 'Bitter', serif;
color: white;
margin: 0px;
padding: 0px;
background: url("images/gym.jpg") no-repeat center center / cover;
font-family: "Bitter", serif !important;
margin: 0px;
padding: 0px;
background: url("images/gym.jpg") no-repeat center center / cover;
background-color: rgba(0, 0, 0, 0.918) !important;
}

.header {
background-color: black;
height: 45px;
background-color: black;
height: 72px;
}

.header h4 {
font-size: large;
color: white;
}

.left {
text-align: center;
position: absolute;
line-height: 30px;
top: 0px;
left: 10px;
text-align: center;
position: absolute;
line-height: 30px;
top: 0px;
left: 10px;
}

.mid {
text-align: center;
line-height: 46.5px;
display: block;
width: 40%;
margin: 0px auto;
text-align: center;
line-height: 46.5px;
display: block;
width: 40%;
margin: 0px auto;
}

.mid li {
display: inline-block;
display: inline-block;
}

.mid li a {
text-decoration: none;
color: white;
padding: 8px;
text-decoration: none;
color: white;
padding: 8px;
}

.active,
.mid li a:hover {
text-decoration: underline;
background-color: rgb(170, 164, 164);
text-decoration: underline;
background-color: rgb(170, 164, 164);
}

.right {
text-align: center;
line-height: 40px;
position: absolute;
top: 0px;
right: 10px;
text-align: center;
line-height: 40px;
position: absolute;
top: 0px;
right: 10px;
}

.img {
width: 40px;
height: 26px;
filter: invert(100%);
width: 50px;
height: auto;
filter: invert(100%);
margin: 10px;
}

.left h4 {
line-height: 0px;
margin: 0;
padding: 0px;
}
.btn{
padding: 5px;
margin: 1px;
cursor: pointer;
line-height: 0px;
margin: 0;
padding: 0px;
}
.btn {
padding: 5px;
margin: 1px;
cursor: pointer;
}
.cont1 {
border: 2px solid black;
display: block;
width: 33%;
margin: 100px 145px;
text-align: center;
color: black;
background-color: #a2a2a473;
}

.box {
border: 2px solid black;
display: block;
margin: 2%;
background-color: #a2a2a473;
}
.cont1{
border: 2px solid black;
display: block;
width: 33%;
margin: 100px 145px;
text-align: center;
color: black;
background-color: #a2a2a473;
}
input{
padding:2px;
margin:3px;
width:70%;
}
.selt{
width: 72%;
}
.Submit{
width:72%;
color:white;
background-color: black;
cursor: pointer;
margin-bottom: 15px;

.form-group {
padding: 2%;
}

.btn-primary {
margin-left: 50%;
margin-bottom: 5%;
}

.form-group label {
font-weight: 700;
}