Skip to content

zekena / Unit-calculator

Go to a project
Commit 818c87e6 by zekena
Options

style

parent b082937c
Inline Side-by-side
Showing with 74 additions and 15 deletions
css/simp-area.css
......@@ -51,7 +51,64 @@ body{ background-image: url("../Area.jpg");
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{
background: #913fb7;
opacity: 0.9;
......
css/style.css
......@@ -60,8 +60,8 @@ body{
}
#banner p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.5em;
color: rgba(255, 255, 255, 0.4);
font-size: 24px;
font-weight: 300;
}
......@@ -85,15 +85,19 @@ body{
color: rgba(58, 28, 28, 0.75);
text-decoration: none;
border-bottom: 1px dotted;
font-family: 'Roboto slab', serif;
font-size: 30px;
}
#banner a:hover {
color: #FFF;
border: none;
border: none;
}
#banner .log p{display: none;}
#banner .log:hover p{display: block;}
#banner .log:hover {display:block;}
.navbar{
background-color:#1085c4;
background-color:#3b5998;
overflow:hidden;
height:63px;
}
......@@ -131,7 +135,6 @@ body{
.side-nav a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-family:'Roboto slab',serif;
font-size:22px;
color:#ccc;
display:block;
......
home.html
......@@ -57,7 +57,7 @@ Simple, Fancy and Currency conversion
document.documentElement.scrollTop = 0;
}
</script>
<nav class="navbar">
<a class="navbar">
<span class ="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
......@@ -79,11 +79,8 @@ Simple, Fancy and Currency conversion
<a href="categories/speed.php">Speed</a>
<a href="login">Log in</a>
<a href="login/signup.php">Sign up</a>
</div>
</div>
<script src="js/frontSide.js"></script>
<section id="banner">
<div class="inner">
<header>
......@@ -91,6 +88,8 @@ Simple, Fancy and Currency conversion
<p> An interactive Unit Calculator for all your needs. </p>
<a href="#main" class="more">Choose Conversion</a>
</header>
<a class="log" href="/login/index.html">login
<p>Restore your calculations</p></a>
</div>
</section>
<div id="main">
......@@ -105,7 +104,7 @@ Simple, Fancy and Currency conversion
</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>
<div class="inner">
<h2>Area</h2>
......@@ -113,14 +112,14 @@ Simple, Fancy and Currency conversion
</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>
<div class="inner">
<h2>Temperature</h2>
<a href="categories/temperature.php" class="button style3 fit">Select</a>
</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>
<div class="inner">
<h2>Volume</h2>
......@@ -128,7 +127,7 @@ Simple, Fancy and Currency conversion
</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>
<div class="inner">
<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