Skip to content

zekena / Unit-calculator

Go to a project
Commit 3ab4db56 by zekena
Options

speed

parent 818c87e6
Inline Side-by-side
Showing with 37 additions and 14 deletions
css/style.css
...@@ -61,8 +61,9 @@ body{ ...@@ -61,8 +61,9 @@ body{
#banner p { #banner p {
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
font-size: 24px; font-size: 1.5em;
font-weight: 300; font-weight: 300;
font-family:'Roboto slab',serif;
} }
@media screen and (max-width: 980px) { @media screen and (max-width: 980px) {
...@@ -84,20 +85,22 @@ body{ ...@@ -84,20 +85,22 @@ body{
#banner a { #banner a {
color: rgba(58, 28, 28, 0.75); color: rgba(58, 28, 28, 0.75);
text-decoration: none; text-decoration: none;
font-size:30px;
border-bottom: 1px dotted; border-bottom: 1px dotted;
font-family: 'Roboto slab', serif; font-family:'passion one',cursive;
font-size: 30px;
} }
#banner a:hover { #banner a:hover {
color: #FFF; color: #FFF;
border: none; border: none;
} }
#banner .log p{display: none;} #banner .log p{display: none;}
#banner .log:hover p{display: block;} #banner .log:hover p{display: block;}
#banner .log:hover {display:block;} #banner .log:hover {display:block;}
.navbar{ .navbar{
background-color:#3b5998; background-color:#1085c4;
overflow:hidden; overflow:hidden;
height:63px; height:63px;
} }
...@@ -135,6 +138,7 @@ body{ ...@@ -135,6 +138,7 @@ body{
.side-nav a{ .side-nav a{
padding:10px 10px 10px 30px; padding:10px 10px 10px 30px;
text-decoration:none; text-decoration:none;
font-family:'Roboto slab',serif;
font-size:22px; font-size:22px;
color:#ccc; color:#ccc;
display:block; display:block;
...@@ -184,6 +188,7 @@ body{ ...@@ -184,6 +188,7 @@ body{
width: 90%; width: 90%;
max-width: 80em; max-width: 80em;
margin: 0 auto; margin: 0 auto;
align-items:flex-end;
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
...@@ -193,6 +198,16 @@ body{ ...@@ -193,6 +198,16 @@ body{
} }
} }
#main .items{align-items:baseline;
}
#items{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows:minmax(150px,auto);
max-width: 960px;
}
.button { .button {
-moz-appearance: none; -moz-appearance: none;
......
home.html
...@@ -94,32 +94,32 @@ Simple, Fancy and Currency conversion ...@@ -94,32 +94,32 @@ Simple, Fancy and Currency conversion
</section> </section>
<div id="main"> <div id="main">
<div class="inner"> <div class="inner">
<div class ="categories"> <div id="items" class ="box">
<div class="box"> <div class="box">
<a href="" class="image fit"><img src="icons/length.png" width="400" height="355" alt="Length" /></a> <a href="" class="image fit"><img src="icons/length.png" width="400" height="355" alt="Length" /></a>
<div class="inner"> <div class="inner">
<h2>Length</h2> <h2>Length</h2>
<a href="categories/length.php" class="button fit" style="cursor: pointer;outline: 0px;background-color: #271010;color: black;">Select</a> <a href="categories/length.php" class="button style3 fit" >Select</a>
</div> </div>
</div> </div>
<div class="box2"> <div class="box">
<a href="" class="image fit"><img src="icons/area.png" width="400" height="355" alt="Area" /></a> <a href="" class="image fit"><img src="icons/area.png" width="400" height="355" alt="Area" /></a>
<div class="inner"> <div class="inner">
<h2>Area</h2> <h2>Area</h2>
<a href="categories/area.php" class="button style2 fit">Select</a> <a href="categories/area.php" class="button style3 fit">Select</a>
</div> </div>
</div> </div>
<div class="box3"> <div class="box">
<a href="" class="image fit"><img src="icons/temperature.png" width="400" height="355" alt="Temperature" /></a> <a href="" class="image fit"><img src="icons/temperature.png" width="400" height="355" alt="Temperature" /></a>
<div class="inner"> <div class="inner">
<h2>Temperature</h2> <h2>Temperature</h2>
<a href="categories/temperature.php" class="button style3 fit">Select</a> <a href="categories/temperature.php" class="button style3 fit">Select</a>
</div> </div>
</div> </div>
<div class="box4"> <div class="box">
<a href="" class="image fit"><img src="icons/volume.png" width="400" height="355" alt="Volume" /></a> <a href="" class="image fit"><img src="icons/volume.png" width="400" height="355" alt="Volume" /></a>
<div class="inner"> <div class="inner">
<h2>Volume</h2> <h2>Volume</h2>
...@@ -127,13 +127,21 @@ Simple, Fancy and Currency conversion ...@@ -127,13 +127,21 @@ Simple, Fancy and Currency conversion
</div> </div>
</div> </div>
<div class="box5"> <div class="box">
<a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a> <a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
<div class="inner"> <div class="inner">
<h2>Weight</h2> <h2>Weight</h2>
<a href="categories/weight.php" class="button style3 fit">Select</a> <a href="categories/weight.php" class="button style3 fit">Select</a>
</div> </div>
</div> </div>
<div class="box">
<a href="" class="image fit"><img src="icons/speed.png" width="400" height="355" alt="speed" /></a>
<div class="inner">
<h2>Speed</h2>
<a href="categories/speed.php" class="button style3 fit">Select</a>
</div>
</div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment