The Resistance
Hoi, ik heb een site en ik wil graag 2 dingen die mij na 1,5 jaar gewoon nog niet gelukt zijn, hieronder staan ze.
1. Dat mijn site op #1 in google terecht komt en daarvoor moet de inhoud perfect zijn, codes moeten zo perfect mogelijk zijn etc.. Kunnen jullie eens even een kijkje nemen naar mijn index.php en deze pagina verbeteren que php, html, javascript of css. Ik ben namelijk maar een leek hierin, ik kopiër gewoon het een en ander onder elkaar. Oja, ik werk alleen met Notepad++ en zou graag willen dat als ik wijzingen hierin maak dat ik dit gewoon weer kan doen met dit programma. Ik ben jullie erg dankbaar hiervoor!
2. Het uiterlijk van de site is gewoon raar als je het scherm verkleint, en dit moet nu echt eens een keer klaar zijn zodat ik aan de inhoud (info) kan gaan werken ipv de layout. Dus check het volgende (de problemen:
1. browser verkleinen en dan resize van de website, wordt nu aan gewerkt samen met BRON.
http://theresistance.heliohost.org/
2. Onderaan de pagina staat de footer als je dus de pagina verkleint dan zul je zien dat de hele tekst en plaatjes buiten de footer treden hoe kan ik die gewoon daar in hun goede positie houden(zoals bij volledig scherm)?
3. Als je naar contact pagina gaat met een klein scherm dan zie je een horizontale balk in message, ook dat wil ik niet en ik wil dat het gewoon netjes in het midden blijft staan.
4. Dan wil ik graag dat het menu in het midden blijft staan, zodra ik iets toevoeg of het bijvoorbeeld FORUM verwijder dan blijft alles zo staan en is het niet meer gecentreerd, hoe doe je dit automatisch in css?
5. Voel je vrij als je in php of css oid. iets ziet staan dat fout is in de code of verbeterd kan worden om het te vertellen tegen mij zodat ik het zo volledig mogelijk kan optimaliseren, dat is namelijk het doel op dit moment!
Ik zou jullie zo ongelooflijk dankbaar zijn :thumb: als deze 5 dingen lukken, ik ben al zo onwijs lang (1,5 jaar) hiermee bezig.
Hieronder vind je al mijn documenten/code's: (eerst alle php's en daarna alle css pagina's, als laatste mijn menu balk)
Index.php:
Content.php: (die auto wordt geladen in index.php, standaard)
mail.php
index.css:
content.css:
contact.css
normal.css
ddsmoothmenu.css
ddsmoothmenu-v.css
Hoi, ik heb een site en ik wil graag 2 dingen die mij na 1,5 jaar gewoon nog niet gelukt zijn, hieronder staan ze.
1. Dat mijn site op #1 in google terecht komt en daarvoor moet de inhoud perfect zijn, codes moeten zo perfect mogelijk zijn etc.. Kunnen jullie eens even een kijkje nemen naar mijn index.php en deze pagina verbeteren que php, html, javascript of css. Ik ben namelijk maar een leek hierin, ik kopiër gewoon het een en ander onder elkaar. Oja, ik werk alleen met Notepad++ en zou graag willen dat als ik wijzingen hierin maak dat ik dit gewoon weer kan doen met dit programma. Ik ben jullie erg dankbaar hiervoor!
2. Het uiterlijk van de site is gewoon raar als je het scherm verkleint, en dit moet nu echt eens een keer klaar zijn zodat ik aan de inhoud (info) kan gaan werken ipv de layout. Dus check het volgende (de problemen:
1. browser verkleinen en dan resize van de website, wordt nu aan gewerkt samen met BRON.
http://theresistance.heliohost.org/
2. Onderaan de pagina staat de footer als je dus de pagina verkleint dan zul je zien dat de hele tekst en plaatjes buiten de footer treden hoe kan ik die gewoon daar in hun goede positie houden(zoals bij volledig scherm)?
3. Als je naar contact pagina gaat met een klein scherm dan zie je een horizontale balk in message, ook dat wil ik niet en ik wil dat het gewoon netjes in het midden blijft staan.
4. Dan wil ik graag dat het menu in het midden blijft staan, zodra ik iets toevoeg of het bijvoorbeeld FORUM verwijder dan blijft alles zo staan en is het niet meer gecentreerd, hoe doe je dit automatisch in css?
5. Voel je vrij als je in php of css oid. iets ziet staan dat fout is in de code of verbeterd kan worden om het te vertellen tegen mij zodat ik het zo volledig mogelijk kan optimaliseren, dat is namelijk het doel op dit moment!
Ik zou jullie zo ongelooflijk dankbaar zijn :thumb: als deze 5 dingen lukken, ik ben al zo onwijs lang (1,5 jaar) hiermee bezig.
Hieronder vind je al mijn documenten/code's: (eerst alle php's en daarna alle css pagina's, als laatste mijn menu balk)
Index.php:
PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="HandheldFriendly" content="True" />
<title>The Resistance - Free your mind with the ****h.</title>
<!-- <base href="http://www.the-resistance.tk/"> -->
<meta name="keywords" content="The Resistance, .tk, Illuminati, NWO, New World Order, Conspiracy, ****h, Health, Ayurveda, GMO, Death, Disease, Hoax, Freemasons, Elite, 911, False Flags, Lies, Spirituality, Cultivation, New Age Movement, World Trade Center, Twin Towers, History, Pease, Buddhism, Religion" />
<meta name="description" content="Test: Do you want to know the ****h about everything? How the elite/illuminati control you? How to become really healthy and at peace? Start reading this!" />
<meta name="revisit-after" content="1 day" />
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:site_name" content="..." />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu-v.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/contact.css" />
<link rel="stylesheet" type="text/css" href="css/normal.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="css/ddsmoothmenu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1",
orientation: 'h',
classname: 'ddsmoothmenu',
contentsource: "markup"
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2",
orientation: 'v',
classname: 'ddsmoothmenu-v',
method: 'hover', // set to 'hover' (default) or 'toggle'
arrowswap: true,
contentsource: "markup"
})
</script>
<script type="text/javascript">
$('button').click ->
# Increment the value
$counter = $('.updates')
val = parseInt $counter.text()
val++
# Animation
$counter
.css({opacity: 0})
.text(val)
.css({top: '-10px'})
.transition({top: '-2px', opacity: 1})
</script>
</head>
<body>
<div id="container">
<header id="header">
<div id="logo">
<img src="/images/header.gif" alt="" />
</div>
</header>
<nav id="menu">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php?page=about">Disclaimer</a></li>
<li><a href="index.php?page=****h1">The ****h!</a></li>
<li>
<a href="index.php?page=catagories">Categories</a>
<ul>
<li>
<a href="index.php?page=health">Health</a>
<ul>
<li><a href="index.php?page=ayurveda">Empty..</a></li>
</ul>
</li>
<li>
<a href="index.php?page=cultivation">Self cultivation</a>
<ul>
<li><a href="index.php?page=newage">Empty..</a></li>
</ul>
</li>
<li>
<a href="index.php?page=conspiracies">Conspiracies</a>
<ul>
<li><a href="index.php?page=****hmovement">Empty..</a></li>
</ul>
</li>
<li><a href="index.php?page=breatharianism">Philosophy & Society</a></li>
</ul>
</li>
<li><a href="index.php?page=forum">Forum</a></li>
<li><a href="index.php?page=mail">Contact</a></li>
</ul>
</div>
</nav>
<div id="content">
<?php
if (!isset($_GET['page'])) {
include('content.php');
}
else {
$page = 'page/'.$_GET['page'].'.php';
if (file_exists($page)) {
include($page);
}
else {
include ('404.php');
}
}
?>
</div> <!-- content -->
<footer id="footer">
<div id="footercontainer">
<div id="footleft">
<div id="logo">
<img src="/images/footer.gif" alt="" />
</div>
</div>
<div id="footcenter">
www.the-resistance.tk is designed by Rebel, 2014-2016.<br />
All information on this site may be quoted and shared.
</div>
<div id="footright">
<a href="index.php?page=mail"><img src="images/contact-alt.gif" alt="" /></a>
</div>
</div>
</footer>
</div> <!-- container -->
</body>
</html>Content.php: (die auto wordt geladen in index.php, standaard)
PHP:
<div id="intro">
<div id="intro_top">
What we do / Bio
</div>
<div id="intro_bot">
<img src="/images/eye.jpg" alt="" />
Right now i'm working on the layout of the website, it is a hard thing to do, i tell you that.<br />
<br />
<br />
<a href="index.php?page=intro" >Learn more..</a>
</div>
</div> <!-- intro -->
<section id="leftcontainer">
<div class="left_top">
<div>Work in progress</div>
<div class="left_top_date">
7 februari 2016
</div>
</div>
<div class="left_bot">
Hi people. It hase been a while sinds i worked on this website, progress is so verry slow, i am sorry for this.
There was a little problem that came on my path that i had to first figure out, this understanding is still being ponderd upon and could be a decision in closing this website.
For now i will proceed with this website, only some major changes will be made regarding what i would tell and how i would write it.
So i ask you to have a little more patience with me, i will be posting what i have learned in a short time!
I have made a start as you can see (The ****h!)<br />
<br/>
If you have any questions or would like to help me you can email me at rebel@the-resistance.tk. Or you could send me a email through the website, i have it finally working!
<br />
Edit: i am thinking of changing host so make sure that you bookmark: www.the-resistance.tk and not the link that it redirects you to!!!
</div>
<div class="left_top">
<div>UN Agenda 2030: Sustainable Development</div>
<div class="left_top_date">
8 november 2015
</div>
</div>
<div class="left_bot">
A blueprint to enslave humanity trough a ONE WORLD- government (UN), religion (spirituality), currency (digital chip) and army (NATO).
Also called the New World Order.
This is Agenda 21 on steroids! Which pope Francis announced to the world during his visit in America last September.<br />
<br />
Futher information will be coming.<br />
<br />
<br />
<a href="index.php?page=roids">Read more..</a><br />
</div>
<div class="left_top">
<div>Under construction..</div>
<div class="left_top_date">
1 may 2015
</div>
</div>
<div class="left_bot">
This website is still being developed, so come back every once in a while.
Don't forget to bookmark this page! (make sure your link is www.the-resistance.tk)<br />
<br />
The music below is what really motivates me about all of this stuff, just wanted to share this with you.<br />
<br />
<audio src="freedom.mp3" controls></audio>
</div>
<div class="left_top">
<div>Short introduction</div>
<div class="left_top_date">
15 april 2015
</div>
</div>
<div class="left_bot">
Hi, my name will be Rebel here and i live in Holland.
English is not my birth language also i'm kinda dyslectic, so if you notice some letters missing or entire words spelled wrong let me know and i will correct it right away.<br />
<br />
The reason for this site is that i have been studying some heavy material sinds 2008.
Everything started with a couple of life questions and all of those questions only let to more questions.
After 7 years of doing some obsessive research on allot of different topics almost all questions have been answerd.
The more i learned the more is saw what was really happening in the world.
The picture and message below says it all.<br />
<br />
There is a invisible war going on and you do not know anything about it!
It is a war that is right infront of your nose and you do not even see it.
The only thing that you can see is the world that hase been pulled over your ears.<br />
<br />
<img src="http://www.thesleuthjournal.com/wp-content/uploads/2014/11/plugged-in-to-television-tv-mind-control-brain-washing-unplug.jpg" alt="" /><br />
I have found some really important stuff that the world needs to know. I can no longer shut my mouth!
There is allot to tell to you and this can not be done in a few weeks. So please be patient with me.
I will tell you all that i know in great detail, even some things that i found out by myself that you can not find
anywhere on the web. These things must become public right away!
This information becomes more and more critical with every day passing, your own survival literally depends on it!
All will be explained and supported with real solid evidence.<br />
<br />
Before there will be any real import information placed upon this website, i first want to finish the design.
When that is finished i will introduce myself some more and explain my reasons for this website.
This is a must read before continuing with all the other stuff because you need to know the basics first in order to graduate to the higher levels of knowledge.<br />
<br />
A working contact form will be made a soon as possible, if you are seeing one right now it probably wont work yet.
When it is done i will place a message on this main page so you guys can send me stuff or just leave a message.<br />
<br />
I think it is really importent for us to work together to produce all the information on this site, because i alone can not research everything that is out there.
So i'm making this a shared project, of the people, by the people, for the people'.
If you think you have some valuable stuff dont hesitate to send it to me!
Don't worry, i will keep your privacy to myself!
I'm the only one who hase access to this site and nobody else is working for me, nor i for anyone else.
Together we can make this site the best, most effective and updated site that anyone can find on the web, with the most accurate and importent knowledge that we all need to know.
This can only be done by working as a team, united as one we can stand tall!<br />
<br />
~Rebel<br />
<div style="text-align:center">
<img src="images/fist.gif" alt="" /><br />
<b>Join the fist!</b>
</div>
</div>
<div class="left_top">
<div>Testing</div>
<div class="left_top_date">
4 march 2015
</div>
</div>
<div class="left_bot">
<div class="quote">
<div class="left_quote">
<b>Quote</b>:
</div>
<div class="right_quote">
<q>All ****h goes through three stages.
First it is ridiculed.
Then it is violently opposed.
Finally it is accepted as self-evident.</q><br />
<br />
~Schoepenhouer
</div>
</div>
</div>
</section> <!-- left container -->
<aside id="rightcontainer">
<div class="right_top">
Latest News / Updates
</div>
<div class="right_bot">
<b>26 februari 2016</b><br />
Fixing the broken menu that was caused by the new design.<br />
<br />
<b>24 februari 2016</b><br />
Fixing some css code for better viewing on smartphones and tablets. And redesigning the layout.
</div>
<div class="right_top">
Website statistics
</div>
<div class="right_bot">
Online viewers: <script type="text/javascript" src="stats/online.php"></script><br />
Total visitors: <?php $bestand = "stats/visits.php"; if(!is_file($bestand)) { $fp = fopen($bestand, 'a'); fwrite($fp, "<?\\n//"); fclose($fp); chmod($bestand, 0666); } $con = file_get_contents($bestand); $st = substr_count($con, ";"); if(strpos($con, $_SERVER['REMOTE_ADDR']) === FALSE) { $fp = fopen($bestand, 'a'); fwrite($fp, $_SERVER['REMOTE_ADDR'].";"); fclose($fp); $st++; } unset($con); echo "" . $st; ?><br />
<br />
<?php echo "Last modified: ".date( "j F Y", getlastmod() ); ?>
</div>
<div class="right_top">
Donate & Support
</div>
<div class="right_bot">
Please consider contributing to our cause. With your donation we can improve the size and development of this website.
Click the PayPal logo below to donate.<br />
<br />
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GF64WWQHWL39G" onclick="javascript:window.open('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GF64WWQHWL39G','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="/images/paypal.png" width="60px" alt="" /></a>
</div>
<div class="right_top">
Sponsors
</div>
<div class="right_bot">
None this far.
</div>
<div class="right_top">
Next vision: 2020
</div>
<div class="right_bot">
<script type="text/javascript"> today = new Date(); BigDay = new Date("January 1, 2020"); msPerDay = 24 * 5000000; timeLeft = (BigDay.getTime() - today.getTime()); e_daysLeft = timeLeft / msPerDay; daysLeft = Math.floor(e_daysLeft); e_hrsLeft = (e_daysLeft - daysLeft)*24; document.write("<b>" + daysLeft + " </b>days till ...");</script><br />
<br />
<br />
<a href="index.php?page=countdown">Read more..</a><br />
</div>
</aside> <!-- right container -->mail.php
PHP:
<head>
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" type="text/css" href="../css/normal.css" />
</head>
<header class="top">
Contact form
</header>
<div class="bottom">
<form id="form" action="index.php?page=send-mail" method="post">
<div class="row">
<div class="label">
Your name:
</div>
<div class="input">
<input type="text" class="name" name="name" placeholder="Full name please" />
</div>
</div>
<div class="row">
<div class="label">
Your email:
</div>
<div class="input">
<input type="text" class="email" name="email" placeholder="rebel@the-resistance.tk" />
</div>
</div>
<div class="row">
<div class="label">
Your message:
</div>
<div class="input">
<textarea name="message" placeholder="What is it that you want to talk about?"></textarea>
</div>
</div>
<div class="row">
<input type="submit" name="submit" value="Send message" />
</div>
</form>
</div>index.css:
Code:
/*** extra ***/
@font-face {
font-family: 'Segoe UI';
src: url('segoeui.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Segoe UI Light';
src: url('segoeuil.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Segoe UI Bold';
src: url('segoeuib.ttf');
font-weight: normal;
font-style: normal;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/*** normal ***/
html {
height: 100%;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
height: 100%;
margin: 0;
background-color: #213D65;
color: #213D65;
font-size: 13px;
font-family: 'Segoe UI';
}
/*** container ***/
#container {
min-height: 100%;
margin: 0 auto;
padding: 0 15px 0 15px;
overflow: hidden;
}
@media (min-width: 992px) {
#container {
width: 970px;
}
}
@media (min-width: 1150px) {
#container {
width: 1125px;
}
}
#container > *:before,
#container > *:after {
display: table;
content: " ";
clear: both;
}
/*** logo ***/
#header {
margin-bottom: 5px;
}
#logo {
width: 280px;
margin: 0 auto;
}
@media (min-width: 768px) {
#logo {
width: 395px;
}
}
#logo img {
display: block;
max-width: 100%;
height: auto;
bordeR: 0;
vertical-align: middle;
}
/*** menu ***/
#menu * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#menu {
width: 100%;
height: 38px;
background-color: #2F5388;
border: 1px solid #2B4A7B;
border-radius: 5px;
box-shadow: 2px 2px 5px #1D1E23;
font-family: "Segoe UI Bold";
font-size: 13px;
margin-bottom: 20px;
}
/*** footer ***/
#footer {
background-color: #2F5388;
width: 100%;
height: 60px;
margin-bottom: 20px;
border: 1px solid #2B4A7B;
border-radius: 5px;
box-shadow: 2px 2px 5px #1D1E23;
clear: both;
}
#footercontainer {
width: 70%;
margin-top: 4px;
}
#footleft {
background-image: url(../images/footer.gif);
background-repeat: no-repeat;
background-size: 37px 56px;
width: 10%;
height: 56px;
float: left;
margin-left:40px;
}
#footcenter {
float: left;
margin-top: 10px;
color: #A4CAF3;
font-size: 12px;
text-align: left;
}
#footright {
float: right;
width: 10%;
height: 25px;
margin-top: 15px;
margin-right: -180px;
}
#footer img {
display: block;
max-width: 100%;
height: auto;
}
#footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60); // IE
}content.css:
Code:
/*** links ***/
a:link, a:visited {
color: #2F5388;
text-decoration: none;
}
a:hover, a:active {
color: #A4CAF3;
text-decoration: none;
-moz-transition:color .2s ease-out;
-webkit-transition:color .2s ease-out;
transition:color .2s ease-out;
}
/*** intro ***/
#intro {
width: 100%;
padding: 28px 35px 28px 35px;
margin-bottom: 20px;
min-height: 30px;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
background-color: #FFF;
color: #2f5388;
}
#intro_top {
font-size: 15px;
font-family: "Segoe UI Bold";
}
#intro_bot {
margin: 28px 0 0 0;
}
#intro img {
float: right;
height: 150px;
width: 150px;
}
/*** left & right container ***/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#leftcontainer,
#rightcontainer {
position: relative;
float: left;
min-height: 1px;
width: 100%;
}
@media (min-width: 768px) {
#leftcontainer {
width: 59%;
margin-right: 1%;
}
#rightcontainer {
width: 39%;
margin-left: 1%;
}
}
@media (min-width: 992px) {
#leftcontainer {
width: 69%;
margin-right: 1%;
}
#rightcontainer {
width: 29%;
margin-left: 1%;
}
}
/*** left content ***/
.left_top:before,
.left_top:after {
display: table;
content: " ";
}
.left_top:after {
clear: both;
}
.left_top div {
float: left;
width: 100%;
text-align: left;
}
.left_top div:last-child {
padding-top: 1px;
font-size: 13px;
white-space: nowrap;
}
@media (min-width: 768px){
.left_top div {
width: 68%;
}
.left_top div:last-child {
width: 32%;
text-align: right;
}
}
.left_top {
width: 100%;
padding: 8px 35px 8px 35px;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 0 0;
box-shadow: 2px 2px 5px #1D1E23;
background-color: #2F5388;
color: #FFF;
font-size: 15px;
font-family: "Segoe UI Bold";
}
.left_top_date {
font-size: 11px;
font-family: "Segoe UI";
}
.left_bot {
width: 100%;
padding: 28px 35px 28px 35px;
margin-bottom: 20px;
min-height: 30px;
border: 1px solid #2B4A7B;
border-radius: 0 0 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
background-color: #FFF;
color: #2f5388;
}
#content img {
display: block;
max-width: 100%;
height: auto;
}
.quote {
width: 90%;
margin: 0 auto;
background: #FCFDFF;
color: #213D65;
padding: 10px 15px;
border: 1px dotted #A4CAF3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.left_quote {
float: left;
}
.right_quote {
float: right;
margin-left: 30px;
}
/*** right content ***/
.right_top {
width: 100%;
padding: 8px 25px 8px 25px;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 0 0;
box-shadow: 2px 2px 5px #1D1E23;
background-color: #2F5388;
color: #FFF;
font-size: 15px;
font-family: "Segoe UI Bold";
}
.right_bot {
width: 100%;
padding: 20px 25px 20px 25px;
margin-bottom: 20px;
min-height: 30px;
border: 1px solid #2B4A7B;
border-radius: 0 0 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
background-color: #FFF;
color: #2f5388;
}contact.css
Code:
.top {
float: left;
width: 95.5%;
padding: 13px 14px 13px 35px;
background-color: #2F5388;
color: #FFF;
font-size: 15px;
font-family: "Segoe UI Bold";
line-height: 10px;
text-align: center;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 0px 0px;
box-shadow: 2px 2px 5px #1D1E23;
}
.bottom {
float: left;
width: 95.5%;
background-color: #FFF;
padding: 30px 15px 30px 35px;
margin-bottom: 20px;
text-align: center;
border: 1px solid #2B4A7B;
border-radius: 0px 0px 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
}
#form {
width: 60%;
margin: 0 auto;
}
#form .row {
display: block;
overflow: auto;
margin-top: 10px;
}
#form .row .label {
float: left;
width: 100px;
text-align: right;
line-height: 28px;
padding-right: 10px;
margin-right: 10px;
}
.name, .email {
outline: none;
float: left;
color: #2B4A7B;
height: 20px;
width: 250px;
padding: 3px 10px 3px 10px;
background: #FFFFFF;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
textarea {
outline: none;
float: left;
color: #2B4A7B;
width: 400px;
max-width: 400px;
height: 150px;
max-height: 150px;
padding: 7px 10px 7px 10px;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#context {
float: left;
font-size: 10px;
font-family: 'Segoe UI Light';
line-height: 25px;
margin-left: 0px;
}
input:hover, textarea:hover {
border: 1px solid #A4CAF3;
}
input:focus, textarea:focus {
color: #A4CAF3;
background: #2F5388;
-webkit-box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
-moz-box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
}
::-webkit-input-placeholder {
color: #2F5388;
}
:-moz-placeholder { /* Firefox 18- */
color: #2F5388;
}
::-moz-placeholder { /* Firefox 19+ */
color: #2F5388;
}
:-ms-input-placeholder {
color: #2F5388;
}
input[type=submit] {
float: left;
outline: none;
font-family: 'Segoe UI Bold';
color: #2B4A7B;
background-color: #FFFFFF;
margin: 10px 0 0 120px;
padding: 6px 15px;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}
input[type=submit]:hover {
color: #A4CAF3;
background-color: #2B4A7B;
}normal.css
Code:
body {
color: #213D65;
font-size: 13px;
font-family: 'Segoe UI';
}
.link:link, .link:visited {
outline: none;
font-family: 'Segoe UI Bold';
color: #2F5388;
background-color: #FFFFFF;
padding: 5px 15px;
text-decoration: none;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.link:hover, .link:active {
outline: none;
font-family: 'Segoe UI Bold';
color: #A4CAF3;
background-color: #2B4A7B;
padding: 6px 15px;
text-decoration: none;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.quote {
background: #FCFDFF;
color: #213D65;
padding: 10px 15px 10px 15px;
border: 1px dotted #A4CAF3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.left_quote {
float: left;
}
.right_quote {
float: left;
margin-left: 30px;
}
.top {
float: left;
width: 95.5%;
padding: 13px 14px 13px 35px;
background-color: #2F5388;
color: #FFF;
font-size: 15px;
font-family: "Segoe UI Bold";
line-height: 10px;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 0px 0px;
box-shadow: 2px 2px 5px #1D1E23;
}
.bottom {
float: left;
width: 95.5%;
background-color: #FFF;
padding: 30px 15px 30px 35px;
margin-bottom: 20px;
border: 1px solid #2B4A7B;
border-radius: 0px 0px 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
}ddsmoothmenu.css
Code:
.ddsmoothmenu{
width: 100%;
height: 40px;
display: none;
}
.ddsmoothmenu ul{
z-index: 100;
margin: 0;
padding: 0;
list-style-type: none;
line-height: 20px;
height: 40px;
width: 500px;
margin: 0 auto;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
color: white;
padding: 8px 13px;
color: #2d2b2b;
text-decoration: none;
height: 21px;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: #2B4A7B !important;
color: #A4CAF3;
}
.ddsmoothmenu ul li a:hover{
background: #2B4A7B; /*background of menu items during onmouseover (hover state)*/
color: #A4CAF3;
}
/* sub menus */
.ddsmoothmenu ul li ul{
position: absolute;
left: -3000px;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
height: auto;
width: auto;
background-color: #2F5388;
box-shadow: 2px 2px 5px #1D1E23;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/*Sub level menu list items (alters style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
width: 160px; /*width of sub menus*/
padding: 7px;
margin: 0;
padding-left: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 15px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 10px;
right: 5px;
}
.leftarrowclass{
margin-right: 5px;
}
/* ######### Mobile menu container CSS ######### */
div.ddsmoothmobile{ /* main mobile menu container */
background: #414141;
color: white;
position: fixed;
top: 0;
left: 0;
width: 200px; /* width of mobile menu */
height: 300px;
overflow: hidden;
visibility: hidden;
border-radius: 0 0 10px 0;
box-shadow: 0 0 10px gray;
}
div.ddsmoothmobile a{
color: white;
text-decoration: none;
}
div.ddsmoothmobile div.topulsdiv{ /* Single DIV that surrounds all top level ULs before being flattened, or the ULs on the "frontpage" of the menu */
position: relative;
background: #414141;
overflow-y: auto;
width: 100%;
height: 100%;
}
div.ddsmoothmobile ul{ /* style for all ULs in general inside mobile menu */
list-style: none;
width: 100%;
top: 0;
left: 0;
background: #414141;
margin: 0;
padding: 0;
}
div.ddsmoothmobile div.topulsdiv ul.submenu{ /* top level ULs style */
}
div.ddsmoothmobile ul.submenu{ /* sub level ULs style */
position: absolute;
height: 100%;
overflow-y: auto;
}
div.ddsmoothmobile ul li{
border-bottom: 1px solid gray;
position: relative;
}
div.ddsmoothmobile ul li.breadcrumb{ /* breadcrumb LI that's added to the top of every sub level UL */
cursor: pointer;
padding: 10px;
background: #2B4A7B;
}
div.ddsmoothmobile ul li a{
display: block;
padding: 6px;
}
div.ddsmoothmobile ul li a:hover{
background: #2B4A7B;
}
/* ############# Animated Drawer icon (mobile menu toggler) CSS ############# */
.animateddrawer{
font-size: 10px; /* Base font size. Adjust this value to modify size of drawer icon */
width: 3em;
height: 2.8em;
outline: none;
position: fixed; /* BY default, make toggler fixed on screen */
display: none;
top: 10px; /* Position at upper right corner */
right: 10px;
background: white;
z-index: 1000;
}
.animateddrawer:before, .animateddrawer:after{
position: absolute;
content: '';
display: block;
width: 100%;
height: 0.6em; /* height of top and bottom drawer line */
background: #2B4A7B;
border-radius: 2px;
top: 0;
left: 0;
opacity: 1;
-webkit-transition: all 0.3s ease-in; /* set transition type and time */
transition: all 0.3s ease-in;
}
.animateddrawer:after{
top: auto;
bottom: 0;
}
.animateddrawer span{
width: 100%;
height: 0.6em; /* height of middle drawer line */
background: #2B4A7B;
position: absolute;
top: 50%;
margin-top: -0.3em; /* set this to - half of middle drawer line height */
border-radius: 2px;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */
transition: all 0.3s ease-in 0.3s;
}
.animateddrawer span::after{
content: '';
display: block;
width: 100%;
height: 0.6em; /* height of middle drawer line */
background: #2B4A7B;
border-radius: 2px;
position: absolute;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */
transition: all 0.3s ease-in 0.3s;
}
.animateddrawer.open{
}
.animateddrawer.open:before{ /* style when .open class is added to button */
top: 50%;
margin-top: -0.3em; /* set this to - half of top drawer line height */
opacity: 0;
}
.animateddrawer.open:after{ /* style when .open class is added to button */
bottom: 50%;
opacity: 0;
}
.animateddrawer.open span{ /* style when .open class is added to button */
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animateddrawer.open span:after{ /* style when .open class is added to button */
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}ddsmoothmenu-v.css
Code:
.ddsmoothmenu-v{
display: none;
}
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
}
.ddsmoothmenu-v ul li{
position: relative;
float: none;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px 23px 6px 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #1c5a80; /*background of menu items (default state)*/
color: white;
}
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: lightblue !important;
color: navy;
}
.ddsmoothmenu-v ul li a:hover{
background: lightblue; /*background of menu items during onmouseover (hover state)*/
color: navy;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
Laatst bewerkt:
