Skip to content

Commit

Permalink
Merge pull request #16 from sanyam-15/sanyam
Browse files Browse the repository at this point in the history 
Applied CSS to volume.html and made it responsive
  • Loading branch information
@Prayas248
Prayas248 authored Apr 3, 2024
2 parents 9eafadb + 3085919 commit 7b470b8
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 38 deletions.
107 changes: 104 additions & 3 deletions Unit Converter/CSS/volume.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,104 @@
.vol{
background-color: grey;
}

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Dancing+Script:wght@400..700&family=El+Messiri:wght@400..700&display=swap');

* {
margin: 0px;
padding: 0px;
}

body {
display: flex;
flex-direction: column;
background-image: url("https://img.pikbest.com/wp/202346/test-tube-liquid-filled-tubes-in-3d-render_9621425.jpg!sw800");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}

button {
background: #fff;
color: #000;
font-weight: 600;
padding: 12px 20px;
cursor: pointer;
border-radius: 4px;
font-size: 18px;
border: 2px solid black;
margin-top: 30px;
}

h1 {
color: #fff;
text-decoration: underline;
text-align: center;
font-family: El Messiri;
}

select option{
background-color: #82caff;
color: black;
}

.innerbox {
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(7px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 15px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
#desc{
text-align: center;
margin: 0 0 20px;
}

p {
font-size: 25px;
color: #fff;
}

#optionfr {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
gap: 8px;
}


.form-select, .form-control {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 50%;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.form-select:hover, .form-control:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
transform: scale(1.02);
}

#value {
gap: 8px;
display: flex;
align-items: center;
justify-content: center;
}

img {
width: 50px;
border-radius: 50px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
74 changes: 39 additions & 35 deletions Unit Converter/HTML/volume.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volume</title>
<link rel="stylesheet" href="../styles.css">

<link rel="stylesheet" href="../CSS/volume.css">
<link rel="stylesheet" href="../styles.css">
</head>
<body>
<nav>
Expand All @@ -27,45 +28,48 @@
<li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
</ul>
</nav>


<p id="desc">This is a simple unit converter.</p>

<p>You can also convert from one unit to another unit.</p>


<div class="container-fluid ">
<div class="row justify-content-evenly">
<select id="selectfr" name="slfrom" class="form-select slfr" aria-label="Default select example">
<option value="0">Select unit you are converting from</option>
<option value="1">Litre (L)</option>
<option value="2">Cubic Meter (&#13221;)</option>
<option value="3">Cubic centimeter (&#13220;)</option>
<option value="4">Milliliter (ml)</option>
</select>
<select id="selectto" name="slto" class="form-select slto" aria-label="Default select example">
<option value="0">Select unit you are converting to</option>
<option value="1">Litre (L)</option>
<option value="2">Cubic Meter (&#13221;)</option>
<option value="3">Cubic centimeter (&#13220;)</option>
<option value="4">Milliliter (ml)</option>
</div>
</div>
</select>
<form>
<div class="container-fluid">
<div class="row justify-content-evenly">
<form>
<input id="select1fr" name="etfrom" class="form-control" type="number" placeholder="Enter value to be changed" value="" aria-label="default input example">
<input id="select1to" name="etto" class="form-control" type="number" placeholder="Result" value="" aria-label="default input example">

</form>
<div class="inner box">
<i><p id="desc">Switch between units seamlessly with ease.</p></i>
<h1>Volume</h1>
<div class="box">
<div class="container-fluid">
<div id="optionfr">
<select id="selectfr" name="slfrom" class="form-select slfr" aria-label="Default select example">
<option value="0">From</option>
<option value="1">Litre (L)</option>
<option value="2">Cubic Meter (&#13221;)</option>
<option value="3">Cubic centimeter (&#13220;)</option>
<option value="4">Milliliter (ml)</option>
</select>
<img id="conversion" src="../volume.png" alt="">
<select id="selectto" name="slto" class="form-select slto" aria-label="Default select example">
<option value="0">To</option>
<option value="1">Litre (L)</option>
<option value="2">Cubic Meter (&#13221;)</option>
<option value="3">Cubic centimeter (&#13220;)</option>
<option value="4">Milliliter (ml)</option>
</select>
</div>
</div>
<form>
<div class="container-fluid" id="value">
<form>
<input id="select1fr" name="etfrom" class="form-control" type="number" placeholder="Enter value" value="" aria-label="default input example">
<input id="select1to" name="etto" class="form-control" type="number" placeholder="Result" value="" aria-label="default input example">
</form>
</div>
</form>
</div>
<!-- added button -->
<button class="calculate">Calculate</button>
</div>
</div>



</form>


<script src="../script.js"></script>

</body>
</html>
1 change: 1 addition & 0 deletions capacity_volume_conversion.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7b470b8

Please sign in to comment.