Skip to content

zekena / Unit-calculator

Go to a project
Commit 818c87e6 by zekena
Options

style

parent b082937c
Inline Side-by-side
Showing with 72 additions and 13 deletions
css/simp-area.css
...@@ -51,7 +51,64 @@ body{ background-image: url("../Area.jpg"); ...@@ -51,7 +51,64 @@ body{ background-image: url("../Area.jpg");
text-align: center; text-align: center;
} }
.navbar{
overflow:hidden;
}
.navbar a{
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}
.navbar a:hover{
background-color:rgb(78, 188, 92);
/* color:#000; */
}
.side-nav{
height:120%;
width:0;
position:absolute;
z-index:1;
top:0;
left:0;
background-color:rgb(108, 94, 133);
opacity:0.9;
overflow-x:hidden;
padding-top:60px;
transition:0.5s;
}
.side-nav a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-family:'Roboto slab',serif;
font-size:22px;
color:#ccc;
display:block;
transition:0.3s;
}
.side-nav a:hover{
color:#fff;
}
.side-nav .btn-close{
position:absolute;
top:0;
right:22px;
font-size:36px;
margin-left:50px;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
#title{ #title{
background: #913fb7; background: #913fb7;
opacity: 0.9; opacity: 0.9;
......
css/style.css
...@@ -60,8 +60,8 @@ body{ ...@@ -60,8 +60,8 @@ body{
} }
#banner p { #banner p {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.4);
font-size: 1.5em; font-size: 24px;
font-weight: 300; font-weight: 300;
} }
...@@ -85,15 +85,19 @@ body{ ...@@ -85,15 +85,19 @@ body{
color: rgba(58, 28, 28, 0.75); color: rgba(58, 28, 28, 0.75);
text-decoration: none; text-decoration: none;
border-bottom: 1px dotted; border-bottom: 1px dotted;
font-family: 'Roboto slab', serif;
font-size: 30px;
} }
#banner a:hover { #banner a:hover {
color: #FFF; color: #FFF;
border: none; border: none;
} }
#banner .log p{display: none;}
#banner .log:hover p{display: block;}
#banner .log:hover {display:block;}
.navbar{ .navbar{
background-color:#1085c4; background-color:#3b5998;
overflow:hidden; overflow:hidden;
height:63px; height:63px;
} }
...@@ -131,7 +135,6 @@ body{ ...@@ -131,7 +135,6 @@ 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;
......
home.html
...@@ -57,7 +57,7 @@ Simple, Fancy and Currency conversion ...@@ -57,7 +57,7 @@ Simple, Fancy and Currency conversion
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
} }
</script> </script>
<nav class="navbar"> <a class="navbar">
<span class ="open-slide"> <span class ="open-slide">
<a href="#" onclick="openSlideMenu()"> <a href="#" onclick="openSlideMenu()">
<svg width="30" height="30"> <svg width="30" height="30">
...@@ -79,11 +79,8 @@ Simple, Fancy and Currency conversion ...@@ -79,11 +79,8 @@ Simple, Fancy and Currency conversion
<a href="categories/speed.php">Speed</a> <a href="categories/speed.php">Speed</a>
<a href="login">Log in</a> <a href="login">Log in</a>
<a href="login/signup.php">Sign up</a> <a href="login/signup.php">Sign up</a>
</div> </div>
<script src="js/frontSide.js"></script> <script src="js/frontSide.js"></script>
<section id="banner"> <section id="banner">
<div class="inner"> <div class="inner">
<header> <header>
...@@ -91,6 +88,8 @@ Simple, Fancy and Currency conversion ...@@ -91,6 +88,8 @@ Simple, Fancy and Currency conversion
<p> An interactive Unit Calculator for all your needs. </p> <p> An interactive Unit Calculator for all your needs. </p>
<a href="#main" class="more">Choose Conversion</a> <a href="#main" class="more">Choose Conversion</a>
</header> </header>
<a class="log" href="/login/index.html">login
<p>Restore your calculations</p></a>
</div> </div>
</section> </section>
<div id="main"> <div id="main">
...@@ -105,7 +104,7 @@ Simple, Fancy and Currency conversion ...@@ -105,7 +104,7 @@ Simple, Fancy and Currency conversion
</div> </div>
</div> </div>
<div class="box"> <div class="box2">
<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>
...@@ -113,14 +112,14 @@ Simple, Fancy and Currency conversion ...@@ -113,14 +112,14 @@ Simple, Fancy and Currency conversion
</div> </div>
</div> </div>
<div class="box"> <div class="box3">
<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="box"> <div class="box4">
<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>
...@@ -128,7 +127,7 @@ Simple, Fancy and Currency conversion ...@@ -128,7 +127,7 @@ Simple, Fancy and Currency conversion
</div> </div>
</div> </div>
<div class="box"> <div class="box5">
<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>
......
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