Untitled

------------------old load
<body>
<div class="container">
<div class="header" text-align="text-center" style="color:white; font-
size:31px;">
<div class="col-2">
<div class="user">
<i class="fa fa-reorder" style="margin-left: -1rem;"></i>
</div>
</div>
<div class="col-5">
<h5 style="font-size: 30px;" text-aligm="center" style="margin-
top:1rem;">Loading&Unloading</h5>
</div>
<div class="col-3">

<mat-icon>settings</mat-icon>




</div>
<div class="icon">
<div class="col-2">
<i class="material-icons" style="margin-left: 6rem; color:
red;">add_alert</i>
</div>
</div>
</div>
<div class="card">
<div class="wrapper">
<br><br>
<input type="radio" name="wrapper-btn" id="Loading" checked>
<label for="Loading">Loading</label>
<input type="radio" name="wrapper-btn" id="Transit">
<label for="Transit">Transit</label>
<input type="radio" name="wrapper-btn" id="UnLoading">
<label for="UnLoading">UnLoading</label><br><br><br>
<section>
<div class="content content-1">
<div class="row mb-3 mt-1">
<div class="col mb-2 mt-1">
<label>Pickup Location</label>
</div>
<div class="col-7">
<textarea type="text" id="pkl" class="form control"
placeholder="Prime meridien,meenakur"
style="width:190px" style="height:60px;" required></textarea>
</div>
</div>
<label>Current Location</label>
</div>
<div class="col-7"><i class='fas fa-map-marker-alt' style='font-
size:12px;color:red'></i>
<input type="text" name="locat" id="locat" class="form control"
style="width:88%" required>
</div>
</div>
<label>Pick up in Date</label>
</div>
<div class="col-7">
<input type="date" name="dt" id="dt" class="form control"
</div>
</div>
<label>Pick up out Date</label>
</div>
<div class="col-7">
</div>
</div>
<label>Duration</label>
</div>
<div class="col-7">
placeholder="7" style="width:88%"
required>
</div>
</div><br>
<div class="col-4">
<button class="button" style="width:80px">ADD </button>
</div>
</div>
<label>Start Date</label>
</div>
<div class="col-7">
</div>
</div>
<label>End Date</label>
</div>
<div class="col-7">
</div>
</div>
</div>
<div class="col-7">
required>
</div>
</div><br><br><br>
<div class="col-4">
</div>
</div>
<label>Drop Location</label>
</div>
<div class="col-7">
placeholder="Latur,Maharastra" style="width:190px"
style="height:60px;" required></textarea>
</div>
</div>
<label>Current Location</label>
</div>
<div class="col-7">
placeholder="Latur,Maharastra" style="width:190px"
style="height:60px;" required></textarea>
</div>
</div>
<label>Start Date</label>
</div>
<div class="col-7">
</div>
</div>
<label>End Date</label>
</div>
<div class="col-7">
</div>
</div>
</div>
<div class="col-7">
required>
</div>
</div>
<div class="col-4">
</div>
</div>
</section>
</div>
</div>
</div>
</body>
-------------------css
.container{
margin:auto;
display:black;
border-radius: 10px;
width:490px;
height: 580px;;
padding:30px 30px;
border: 1px solid #ffa280;
box-shadow: 0 0 10px 0 ;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.container .header {
position: fixed;
top: 0;
right: 0;
left:0;
width: 36vw;
height: 10vh;
background: green;
display:flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 25;
color:white;
font-size: 1;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow:absolute;
padding: 0 20px;
}
::selection{
background: rgba(23,142,154,0.2);
}
.wrapper{
max-width: 800px;
width: 100%;
margin: 200px auto;
padding: 25px 30px 30px 30px;
border-radius: 5px;
position: fixed;
top: -180px;
right: 0;
height:100px;
}
#Loading:checked ~ nav label.Loading,
#Transit:checked ~ nav label.Transit,
#UnLoading:checked ~ nav label.UnLoading
{
color: #fff;
}
section .content{
display: none;
background: #fff;
}
#Loading:checked ~ section .content-1,
#Transit:checked ~ section .content-2,
#UnLoading:checked ~ section .content-3{
display: block;
}
.wrapper>input[type="radio"]{
display: none;
}
.wrapper>div{
margin-top: 60px;
display: none;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}
#wrapper-Loading:checked~ section .content-1,
#wrapper-Transit:checked~ section .content-2,
#wrapper-UnLoading:checked~ section .content-3{
display: block;
}
.wrapper>label{
display: inline-block;
text-align: center;
vertical-align: middle;
background: rgb(248, 242, 242);
border-radius: 20px;
border-color: black;
padding: 18px 40px;
font-size: 1rem;
line-height:0.2;
transition: color 0.15s ease-in-out, background 0.2s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
}
.wrapper>input[type="radio"]:checked+label{
background: #17a2b8;
}

Untitled

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Untitled

Uploaded by

Copyright:

Available Formats

------------------old load

<i class="fa fa-reorder" style="margin-left: -1rem;"></i>

You might also like