Update index.html

This commit is contained in:
mathias 2015-12-11 23:14:18 +02:00
parent 922ab07b58
commit 0d90f92232

View file

@ -139,24 +139,24 @@
font-weight: normal; font-weight: normal;
} }
h1 { h1 {
font-size: 12px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
font-family: montserratregular,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: montserratregular,"Helvetica Neue",Helvetica,Arial,sans-serif;
margin-top: 0; margin-top: 0;
padding: 0 0 22px 0; padding: 0 0 15px 0;
line-height: 6px; line-height: 6px;
} }
h2 { h2 {
font-size: 19px; font-size: 28px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
font-family: montserratbold,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: montserratbold,"Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0 0 15px; margin: 0 0 25px;
letter-spacing: 1px; letter-spacing: 1px;
} }
p { p {
text-align: center; text-align: center;
margin: 0 0 15px; margin: 0 0 20px;
line-height: 1.5; line-height: 1.5;
} }
a { a {
@ -183,15 +183,15 @@
padding: 30px 0 30px 0; padding: 30px 0 30px 0;
} }
#icon { #icon {
font-size: 285px; font-size: 380px;
line-height: 262px; line-height: 350px;
margin: 0 0 0 10px; margin: 0 0 0 15px;
} }
#icon:before { #icon:before {
content: "\f0d2"; content: "\f0d2";
} }
#logo { #logo {
font-size: 35px; font-size: 47px;
text-transform: uppercase; text-transform: uppercase;
font-family: montserratbold,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: montserratbold,"Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
@ -214,17 +214,17 @@
#about-body, #news-body, #contact-body { #about-body, #news-body, #contact-body {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding: 30px 10px 30px 10px; padding: 40px 90px 40px 90px;
font-size: 12px; font-size: 16px;
text-align: center; text-align: center;
} }
input, textarea { input, textarea {
font-family: montserratlight,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: montserratlight,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px; font-size: 16px;
border: none; border: none;
color: #000; color: #000;
background: #fff; background: #fff;
padding: 6px 8px 6px 9px; padding: 7px 9px 7px 10px;
border-radius: 4px; border-radius: 4px;
transition: background .3s ease-in-out; transition: background .3s ease-in-out;
resize: none; resize: none;
@ -237,9 +237,9 @@
border: #fff solid 1px; border: #fff solid 1px;
background: none; background: none;
color: #fff; color: #fff;
width: 53px; width: 70px;
margin: 10px 0 0 0; margin: 18px 0 0 0;
border-radius: 0px 5px 5px 0px; border-radius: 0px 6px 6px 0px;
} }
#ipinput:hover, #ipinput:focus { #ipinput:hover, #ipinput:focus {
background: rgba(255,255,255,.1); background: rgba(255,255,255,.1);
@ -247,11 +247,11 @@
} }
button { button {
font-family: montserratlight,"Helvetica Neue",Helvetica,Arial,sans-serif; font-family: montserratlight,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px; font-size: 16px;
color: #fff; color: #fff;
background: none; background: none;
border: #fff solid 1px; border: #fff solid 1px;
padding: 6px 8px 6px 9px; padding: 7px 9px 7px 10px;
border-radius: 5px; border-radius: 5px;
transition: background .3s ease-in-out; transition: background .3s ease-in-out;
cursor: pointer; cursor: pointer;
@ -263,16 +263,16 @@
border: #fff solid 1px; border: #fff solid 1px;
color: #000; color: #000;
background: #fff; background: #fff;
padding: 6px 6px 6px 9px; padding: 7px 7px 7px 10px;
margin: 10px 0 0 0; margin: 18px 0 0 0;
font-size: 12px; font-size: 16px;
border-radius: 5px 0px 0px 5px; border-radius: 6px 0px 0px 6px;
} }
#facebook:before, #twitter:before { #facebook:before, #twitter:before {
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
padding: 8px; padding: 10px;
font-size: 15px; font-size: 20px;
color: #fff; color: #fff;
} }
#facebook { #facebook {
@ -292,22 +292,22 @@
#intro a { #intro a {
background: #fff; background: #fff;
color: #aa0000; color: #aa0000;
font-size: 14px; font-size: 19px;
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
border-left: 1px solid #aa0000; border-left: 1px solid #aa0000;
padding: 6px 10px 6px 10px; padding: 7px 15px 7px 15px;
} }
input:focus, textarea:focus, button:hover, button:focus, #intro a:hover, #intro a:focus { input:focus, textarea:focus, button:hover, button:focus, #intro a:hover, #intro a:focus {
outline: 0; outline: 0;
} }
#intro a:first-of-type { #intro a:first-of-type {
border-radius: 21px 0px 0px 21px; border-radius: 21px 0px 0px 21px;
padding: 6px 10px 6px 12px; padding: 7px 15px 7px 18px;
} }
#intro a:last-of-type { #intro a:last-of-type {
border-radius: 0px 21px 21px 0px; border-radius: 0px 21px 21px 0px;
border-left: 1px solid #aa0000; border-left: 1px solid #aa0000;
padding: 6px 13px 6px 10px; padding: 7px 18px 7px 15px;
} }
#facebook:before, h2:before, #icon, #intro a:before, #twitter:before { #facebook:before, h2:before, #icon, #intro a:before, #twitter:before {
font-family: 'icons'; font-family: 'icons';
@ -326,7 +326,7 @@
position: relative; position: relative;
} }
#intro a:before { #intro a:before {
top: 1px; top: 2px;
position: relative; position: relative;
} }
#intro a:last-of-type:before { #intro a:last-of-type:before {
@ -338,22 +338,22 @@
position: relative; position: relative;
} }
#news h2:before { #news h2:before {
margin: 0 12px 0 0; margin: 0 16px 0 0;
top: 2px; top: 2px;
} }
#about h2:before { #about h2:before {
margin: 0 8px 0 0; margin: 0 13px 0 0;
top: 2px; top: 2px;
} }
#contact h2:before { #contact h2:before {
margin: 0 12px 0 0; margin: 0 16px 0 0;
top: 3px; top: 3px;
} }
#newsbox { #newsbox {
height: 290px; height: 300px;
overflow: scroll; overflow: scroll;
overflow-x: hidden; overflow-x: hidden;
margin: 0 0 15px 0; margin: 0 0 25px 0;
} }
#newsbox ul { #newsbox ul {
text-align: left; text-align: left;
@ -361,10 +361,10 @@
padding: 0 10px 0 0; padding: 0 10px 0 0;
} }
#newsbox li { #newsbox li {
margin: 0 0 15px 0; margin: 0 0 20px 0;
} }
.date { .date {
font-size: 9px; font-size: 11px;
color: rgba(255,255,255,.4); color: rgba(255,255,255,.4);
} }
label { label {
@ -372,131 +372,20 @@
} }
label span { label span {
display: block; display: block;
margin: 0 0 7px 0; margin: 0 0 10px 0;
font-size: 11px; font-size: 14px;
} }
label input, label textarea { label input, label textarea {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
#second { label:last-child {
margin-top: 18px; margin-top: 24px;
display: block; display: block;
} }
button { button {
margin: 15px 0 0 0; margin: 25px 0 0 0;
} }
@media (min-width:767px){
h1{
padding-bottom: 15px;
}
h2{
margin:0 0 25px;
font-size:28px;
}
p{
margin:0 0 20px;
line-height:1.5/;
}
#intro,#news{
background-position: left;
}
#icon {
font-size: 380px;
line-height: 350px;
margin-top: 0px;
margin-left: 15px;
}
#about-body,#news-body{
padding-left:90px;
padding-right:90px;
padding-top:40px;
padding-bottom:40px;
font-size:16px;
}
#contact-body{
padding-left:230px;
padding-right:230px;
padding-top:40px;
padding-bottom:40px;
font-size:16px;
}
input,textarea,button{
font-size:16px;
padding: 7px 9px 7px 10px;
}
#ipinput{
margin:18px 0 0 0;
width:70px;
-moz-border-radius: 0px 6px 6px 0px;
-webkit-border-radius: 0px 6px 6px 0px;
border-radius: 0px 6px 6px 0px;
}
#ip{
font-size:16px;
margin:18px 0 0 0;
-moz-border-radius: 6px 0px 0px 6px;
-webkit-border-radius: 6px 0px 0px 6px;
border-radius: 6px 0px 0px 6px;
padding: 7px 7px 7px 10px;
}
#logo{
font-size:47px;
}
h1{
font-size:16px;
margin-bottom:27px;
}
#facebook:before, #twitter:before{
padding: 10px;
font-size: 20px;
}
#aboutbutton, #newsbutton, #contactbutton{
font-size: 19px;
}
#newsbutton{
padding: 7px 15px 7px 15px;
}
#aboutbutton{
padding: 7px 15px 7px 18px;
}
#contactbutton{
padding: 7px 18px 7px 15px;
}
#newsbutton:before{
top: 2px;
}
#news-title:before{
margin-right: 16px;
}
#about-title:before{
margin-right: 13px;
}
#contact-title:before{
margin-right: 16px;
}
#news-box{
margin-bottom: 25px;
height: 300px;
}
#news-list li{
margin-bottom: 20px;
}
.date{
font-size: 11px;
color: rgba(255,255,255,.4);
}
#second{
margin-top: 24px;
}
label span{
font-size: 14px;
margin-bottom: 10px;
}
button{
margin: 25px 0 0 0;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -585,7 +474,7 @@ margin: 25px 0 0 0;
<span>Email</span> <span>Email</span>
<input type="email" name="_replyto" placeholder="Please enter your email" required> <input type="email" name="_replyto" placeholder="Please enter your email" required>
</label> </label>
<label id="second"> <label>
<span>Message</span> <span>Message</span>
<textarea name="body" rows="10" placeholder="Please enter your message" required></textarea> <textarea name="body" rows="10" placeholder="Please enter your message" required></textarea>
</label> </label>