init commit
This commit is contained in:
Yehuda Eisenberg
416
css/style.css
Normal file
416
css/style.css
Normal file
@@ -0,0 +1,416 @@
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
word-wrap:break-word;
|
||||
background: #231f20;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
max-width: 80%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: #231f20;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.topnav .selected {
|
||||
background-color: #f2f2f2;
|
||||
color: #0085c9;
|
||||
box-shadow: 0px -2px 0px #0085c9 inset;
|
||||
box-shadow: 0px 2px 0px #0085c9 inset;
|
||||
}
|
||||
|
||||
.topnav .home {
|
||||
background-color: #0085c9;
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.topnav .home:hover {
|
||||
background-color: #0085c9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.topnav .icon {
|
||||
display: none;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
@media (min-width: 181px) and (max-width: 868px) {
|
||||
.topnav a:not(:first-child) {display: none;}
|
||||
.topnav a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 181px) and (max-width: 868px) {
|
||||
.topnav.responsive {position: relative;}
|
||||
.topnav.responsive .icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.topnav.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
max-width: 80%;
|
||||
margin: 1em auto;
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.pages {
|
||||
padding: 1.3em;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.8em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pages h2 {
|
||||
padding-bottom: 1em;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pages ul{
|
||||
padding: 1em 2em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
font-size:2em;
|
||||
color:#0085c9;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2px;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:1em;
|
||||
color:#0085c9;
|
||||
letter-spacing: 2px;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:1em;
|
||||
color:#0085c9;
|
||||
letter-spacing: 2px;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
h3 span{
|
||||
font-size:0.8em;
|
||||
color:#333;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2px;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.intro {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
font-size:1em;
|
||||
letter-spacing: 2px;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
.outro {
|
||||
display: grid;
|
||||
grid-template-columns: 29% auto;
|
||||
grid-gap: 10px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #c6c6c6;
|
||||
padding-top: 1em;
|
||||
color: #444;
|
||||
margin-top:1em;
|
||||
margin-bottom:1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 868 */
|
||||
@media (min-width: 181px) and (max-width: 868px) {
|
||||
|
||||
.outro {
|
||||
display: grid;
|
||||
grid-template-columns: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.partone img{
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.outro p {
|
||||
font-size:1em;
|
||||
letter-spacing: 2px;
|
||||
padding:1em;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
#startStopBtn{
|
||||
background-color: #0085c9;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#startStopBtn:hover{
|
||||
background-color: #0576af;
|
||||
}
|
||||
#startStopBtn.running{
|
||||
background-color:#c63b1f;
|
||||
border-color:#c63b1f;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
#startStopBtn:before{
|
||||
content:"Start Test Now | התחל בדיקה";
|
||||
}
|
||||
#startStopBtn.running:before{
|
||||
content:"Cancel Test | ביטול";
|
||||
}
|
||||
|
||||
#test{
|
||||
margin-top:6em;
|
||||
margin-bottom:2em;
|
||||
text-align: center;
|
||||
}
|
||||
div.testArea{
|
||||
display:inline-block;
|
||||
width:16em;
|
||||
height:12.5em;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
div.testName{
|
||||
position:absolute;
|
||||
top:-5em; left:0;
|
||||
width:100%;
|
||||
font-size:1em;
|
||||
background:#eeeeee;
|
||||
border-radius:0.3em;
|
||||
padding: 0.3em;
|
||||
letter-spacing: 2px;
|
||||
color: #666;
|
||||
z-index:9;
|
||||
}
|
||||
div.icontest {
|
||||
position:absolute;
|
||||
top:-0.7em; left:0;
|
||||
width:100%;
|
||||
font-size:3em;
|
||||
color:#eeeeee;
|
||||
z-index:9;
|
||||
}
|
||||
div.meterText{
|
||||
position:absolute;
|
||||
bottom:4em; left:30%;
|
||||
width:40%;
|
||||
font-size:1em;
|
||||
z-index:9;
|
||||
color:#fff;
|
||||
background-color: #55be00;
|
||||
border-radius:0.3em;
|
||||
padding:0.2em;
|
||||
}
|
||||
div.meterText:empty:before{
|
||||
content:"0.00";
|
||||
}
|
||||
div.unit{
|
||||
position:absolute;
|
||||
bottom:2em; left:0;
|
||||
width:100%;
|
||||
z-index:9;
|
||||
}
|
||||
div.testArea canvas{
|
||||
position:absolute;
|
||||
top:0; left:0; width:100%; height:100%;
|
||||
z-index:1;
|
||||
}
|
||||
div.testGroup{
|
||||
display:inline-block;
|
||||
height:12.5em;
|
||||
}
|
||||
|
||||
@media (min-width: 560px) and (max-width: 1224px) {
|
||||
body{
|
||||
font-size:0.8em;
|
||||
}
|
||||
#test{
|
||||
margin-top:6em;
|
||||
margin-bottom:1em;
|
||||
text-align: center;
|
||||
}
|
||||
div.testArea {
|
||||
width:16em;
|
||||
height:12.5em;
|
||||
}
|
||||
div.testGroup{
|
||||
display:inline-block;
|
||||
height:12.5em;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
margin-bottom:6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 10px) and (max-width: 560px) {
|
||||
body{
|
||||
font-size:0.8em;
|
||||
}
|
||||
|
||||
#test{
|
||||
margin-top:6em;
|
||||
margin-bottom:1em;
|
||||
text-align: center;
|
||||
}
|
||||
div.testArea {
|
||||
width:16em;
|
||||
height:12.5em;
|
||||
margin-bottom:8em;
|
||||
}
|
||||
div.testGroup{
|
||||
display:inline-block;
|
||||
height:32em;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
#nomob{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.fbdiv a {
|
||||
background-color: rgb(60, 90, 153);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.fbdiv .fblink:hover {
|
||||
background:rgb(43, 68, 121);
|
||||
color: #fff;
|
||||
}
|
||||
.fa-facebook-square{
|
||||
font-size: 1.3em;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
width:100%;
|
||||
text-align:center;
|
||||
padding:1em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
text-decoration: none;
|
||||
padding:0 1em;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
text-decoration: none;
|
||||
padding:1em 0em;
|
||||
}
|
||||
|
||||
.footer p a {
|
||||
color: #fff;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
.footer p span {
|
||||
color: #2d0100;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #0f75bc;
|
||||
font-size: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#counter-area {
|
||||
padding: 2px;
|
||||
background-color: rgba(205, 204, 204, 0.19);
|
||||
border-radius: 2px;
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#counter-winkey {
|
||||
color: white;
|
||||
background-color: #db8002;
|
||||
padding: 3px 9px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user