Skip to content

Instantly share code, notes, and snippets.

@Mortimer333

Mortimer333/contact.html

Created May 13, 2018 19:32
Show Gist options
  • Save Mortimer333/ed4fae0611ef785355b085477921cba6 to your computer and use it in GitHub Desktop.
Save Mortimer333/ed4fae0611ef785355b085477921cba6 to your computer and use it in GitHub Desktop.
Download ZIP
Simple web about game with changing background, clock and galery basied on js so it open in the same page //to make it work you will need to change directory in html and js files P.S. coded in iso-8859-2
Raw
contact.html
<html>
<head>
<title>
Moja Strona
</title>
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-2">
<meta http-equiv= "Content-Language" content="pl">
<link rel="stylesheet" type="text/css" href="../CSS/style_contact.css">
</head>
<body>
<div id="white_space"><br>Kontakt</div>
<div class="grid">
<div>
<table>
<thead>
<tr><th>Numbers to Headquarters</th></tr>
</thead>
<tbody>
<tr><th>
<ul><span>1 Miejscowość</span>
<li>698 567 456</li>
<span>2 Miejscowość</span>
<li>675 675 678</li><br>
</ul>
</th></tr>
</tbody>
</table>
</div>
<div><table>
<thead>
<tr><th>Places in Poland</th></tr>
</thead>
<tbody>
<tr><th>
<ol>
<span><li style="line-height:70px;">Miejscowość</li></span>
<ul><li>567 665 432</li></ul>
<span><li style="line-height:70px;">Miejscowość</li></span>
<ul><li>567 665 432</li></ul><br>
</ol>
</th></tr>
</tbody>
</table></div>
<div>
<table>
<thead>
<tr><th>Places in World</th></tr>
</thead>
<tbody>
<tr><th>
<ol>
<span><li style="line-height:70px;">Miejscowość</li></span>
<ul><li>456 676 564</li></ul>
<span><li style="line-height:70px;">Miejscowość</li></span>
<ul><li>567 665 432</li></ul>
<br>
</ol>
</th></tr>
</tbody>
</table></div>
</div>
</body>
</html>
Raw
galery.html
<html>
<head>
<title>
Moja Strona
</title
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-2">
<meta http-equiv= "Content-Language" content="pl">
<link rel="stylesheet" type="text/css" href="../CSS/style_galery.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="white_space"><h1>Gallery</h1></div>
<div class="white"><img id="zdj_galeri" src='../ZDJ/Main/3zdjgalerii.png'></div>
<div class='grid'>
<div id="zdj1"><img src='../ZDJ/Main/1karta.jpg'></div>
<div id="zdj2"><img src='../ZDJ/Main/2karta.jpg'></div>
<div id="zdj3"><img src='../ZDJ/Main/3karta.jpg'></div>
<div id="zdj4"><img src='../ZDJ/Main/4karta.jpg'></div>
<div id="zdj5"><img src='../ZDJ/Main/5karta.jpg'></div>
<div id="zdj6"><img src='../ZDJ/Main/6karta.jpg'></div>
<div class="white"></div>
<div id="zdj7"><img src='../ZDJ/Main/elementy.jpg'></div>
<div id='exit'></div>
<div id='left'></div>
<div id='right'></div>
<div>
<br><br>
<script type="text/javascript" src="../JS/galery.js"></script>
</body>
</html>
Raw
galery.js
var a = ["zdj1", "zdj2", "zdj3", "zdj4", "zdj5", "zdj6", "zdj7"];
var div = ["<div id='zdj1'><img src='../ZDJ/Main/1karta.jpg'>", "<div id='zdj2'><img src='../ZDJ/Main/2karta.jpg'></div>", "<div id='zdj3'><img src='../ZDJ/Main/3karta.jpg'></div>", "<div id='zdj4'><img src='../ZDJ/Main/4karta.jpg'></div>", "<div id='zdj5'><img src='../ZDJ/Main/5karta.jpg'></div>", "<div id='zdj6'><img src='../ZDJ/Main/6karta.jpg'></div>", "<div id='zdj7'><img src='../ZDJ/Main/elementy.jpg'></div>"]
var zdj = ["1karta.jpg","2karta.jpg", "3karta.jpg", "4karta.jpg", "5karta.jpg", "6karta.jpg", "elementy.jpg"]
class galery{
constructor(img)
{
this.img=img;
}
output (){
document.getElementById("left").innerHTML="<img class='left' src='../ZDJ/Logo/left.png'>";
document.getElementById("right").innerHTML="<img class='right' src='../ZDJ/Logo/right.png'>";
document.getElementById("exit").innerHTML="<img class='exit' src='../ZDJ/Logo/x.png'>";
document.getElementById(this.img).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x-1]+"'><img src='../ZDJ/Main/"+zdj[x+1]+"'></div>"};
first (){
document.getElementById("left").innerHTML="<img class='left' src='../ZDJ/Logo/left.png'>";
document.getElementById("right").innerHTML="<img class='right' src='../ZDJ/Logo/right.png'>";
document.getElementById("exit").innerHTML="<img class='exit' src='../ZDJ/Logo/x.png'>";
document.getElementById(this.img).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x+1]+"'></div>"};
last (){
document.getElementById("left").innerHTML="<img class='left' src='../ZDJ/Logo/left.png'>";
document.getElementById("right").innerHTML="<img class='right' src='../ZDJ/Logo/right.png'>";
document.getElementById("exit").innerHTML="<img class='exit' src='../ZDJ/Logo/x.png'>";
document.getElementById(this.img).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x-1]+"'><img src='../ZDJ/Main/"+zdj[x]+"'></div>"};
};
document.getElementById("exit").addEventListener('click', function(){document.getElementById(a[x]).innerHTML=div[x];document.getElementById("left").innerHTML="";document.getElementById("right").innerHTML=""; document.getElementById("exit").innerHTML="";});
document.getElementById("left").addEventListener('click', function(){
if(x<1){document.getElementById(a[x]).innerHTML=div[x];document.getElementById("left").innerHTML="";document.getElementById("right").innerHTML="";document.getElementById("exit").innerHTML="";}
else if(x>1 && x<5){
document.getElementById(a[x]).innerHTML=div[x]+"";
x--;
document.getElementById(a[x]).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x-1]+"'><img src='../ZDJ/Main/"+zdj[x+1]+"'></div>";console.log(x);
}
else if(x<=1) {
document.getElementById(a[x]).innerHTML=div[x]+"";
x--;
document.getElementById(a[x]).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x+1]+"'></div>";console.log(x);}
else if(x>=5) {
document.getElementById(a[x]).innerHTML=div[x]+"";
x--;
document.getElementById(a[x]).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x-1]+"'><img src='../ZDJ/Main/"+zdj[x+1]+"'></div>";console.log(x);};
});
document.getElementById("right").addEventListener('click', function(){
if(x>5){document.getElementById(a[x]).innerHTML=div[x];document.getElementById("left").innerHTML="";document.getElementById("right").innerHTML="";document.getElementById("exit").innerHTML="";};
if(x>=-1 && x<5){
document.getElementById(a[x]).innerHTML=div[x]+"";
x++;
document.getElementById(a[x]).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x-1]+"'><img src='../ZDJ/Main/"+zdj[x+1]+"'></div>";
;}
else if(x>=5) {
document.getElementById(a[x]).innerHTML=div[x]+"";
x++;
document.getElementById(a[x]).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x-1]+"'><img src='../ZDJ/Main/"+zdj[x]+"'></div>";}
else if(x<=0) {
document.getElementById(a[x]).innerHTML=div[x]+"";
x++;
document.getElementById(a[x]).innerHTML=div[x]+"<div class='mini_galery'><img id='big_zdj' src='../ZDJ/Main/"+zdj[x]+"'><img src='../ZDJ/Main/"+zdj[x-1]+"'><img src='../ZDJ/Main/"+zdj[x]+"'></div>";};;
});
document.getElementById("zdj1").addEventListener('click',function(){
x = 0;
var zdj1 = new galery ("zdj1");
zdj1.first();
});
document.getElementById("zdj2").addEventListener('click',function(){
x = 1;
var zdj1 = new galery ("zdj2");
zdj1.output();
});
document.getElementById("zdj3").addEventListener('click',function(){
x = 2;
var zdj1 = new galery ("zdj3");
zdj1.output();
});
document.getElementById("zdj4").addEventListener('click',function(){
x = 3;
var zdj1 = new galery ("zdj4");
zdj1.output();
});
document.getElementById("zdj5").addEventListener('click',function(){
x = 4;
var zdj1 = new galery ("zdj5");
zdj1.output();
});
document.getElementById("zdj6").addEventListener('click',function(){
x = 5;
var zdj1 = new galery ("zdj6");
zdj1.output();
});
document.getElementById("zdj7").addEventListener('click',function(){
x = 6;
var zdj1 = new galery ("zdj7");
zdj1.last();
});
Raw
gameplay.html
<html>
<head>
<title>
Moja Strona
</title>
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-2">
<meta http-equiv= "Content-Language" content="pl">
<link rel="stylesheet" type="text/css" href="../CSS/style_gameplay.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="white_space"><span>Gameplay</span></div>
<div class="tic-tac">Tutaj znajduję się filmik opisujący zasady gry i ukazujący kawałek rozgrywki.</div>
<video id="video" class="video" width="80%" height="80%" controls>
<source src="../ZDJ/Film/Zasady gry '7 Cudów świata'.mp4" type="video/mp4">
</video>
</body>
</html>
Raw
index.html
<html>
<head>
<title>
7 cudów świata
</title>
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-2">
<meta http-equiv= "Content-Language" content="pl">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="grid">
<div>
<!--clock-->
<div id="clock">
<div id="main_clock"></div>
</div>
<!--logo-->
<div id="logo"></div>
<!--logo img-->
<div id="logo_img"></div>
<!--content of web-->
</div>
<div class="flex">
<!--menu-->
<div class="menu">
<div class="main_menu">Menu 1</div>
<div class="elem_menu"><a href='../HTML/galery.html' target='content'>Gallery</a></div>
<div class="elem_menu"><a href='../HTML/thoughts.html' target='content'>Opinion</a></div>
<div class="elem_menu"><a href='../HTML/gameplay.html' target='content'>Gameplay</a></div>
<div class="elem_menu"><a href='../HTML/contact.html' target='content'>Contact</a></div>
<div class="main_menu">Menu 2</div>
<div class="elem_menu"><a href='https://www.youtube.com/watch?v=b2gkwZM27gA' target='_blank'>Recenzja</a></div>
<div class="elem_menu"><a href='http://www.swiatgierplanszowych.pl/gra/37/7-cudow-swiata' target='_blank'>Inforamcje o grze</a></div>
</div>
<!--content-->
<iframe src="../HTML/proba.html" name='content'></iframe>
</div>
<div class="stopka">Michał Dzierzbicki 2Tc</div>
</div>
<script type="text/javascript" src="../JS/menu_time.js"></script>
</body>
</html>
Raw
menu_time.js
//variables
var arrayMonth = ["Stycznia", "Lutego", "Marca", "Kwietnia", "Maja", "Czerwca", "Lipca", "Sierpnia", "Wrzesnia", "PaĹşdziernika", "Listopada", "Grudnia"];
var arrayDay = ["Poniedzialek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota", "Niedziela"];
var i =0;
var opacity = 0.2;
var opacity_logo = 0;
var arrayImg = ["japan2.jpg", "ny1.jpg", "alpy2.jpg", "green.jpg", "kosciol.jpg", "green2.jpg"];
//function that makes our clock
var Time = () => {
//variables of time
var d = new Date();
var month = d.getMonth();
var date = d.getDate();
var year = d.getFullYear();
var day = d.getDay();
var hour = d.getHours();
//function of nice effect of minutes
var minute = () => {if(d.getMinutes()<10){return "0"+d.getMinutes();}
else return d.getMinutes();}
//function of nice effect of seconds
var second = () => {if(d.getSeconds()<10){return "0"+d.getSeconds();}
else return d.getSeconds();}
document.getElementById("clock").innerHTML="<div class='date'>"+date+" "+arrayMonth[month]+" "+year+" "+arrayDay[day]+"</div><div class='time'>"+hour+":"+minute()+":"+second()+"</div>";}
//fucntion changing image
var img = () => {
i++;
}
//function which make blur efect
var img_opacity = () => {
document.getElementById("logo_img").innerHTML = "<img class='img_logo index-1' style='opacity:"+opacity+"' src='../ZDJ/Logo/"+arrayImg[i]+"'>";
document.getElementById("logo").innerHTML = "<span class='logo_name' style='opacity:"+opacity_logo+"'>7 cudów świata<span>";
opacity+=0.2;
opacity_logo+=0.2;
}
//function for loop efect of blur
var loopOpacity = () => {opacity=0.2; opacity_logo=0;};
//function for loop efect of images
var loop = () => {i=-1;}
//intervals of background with fading images
setInterval(loop, 30000);
setInterval(Time, 1);
setInterval(img_opacity, 100);
setInterval(loopOpacity, 5000);
setInterval(img, 5000);
Raw
proba.html
<html>
<head>
<title>
gra
</title>
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-2">
<meta http-equiv= "Content-Language" content="pl">
<link rel="stylesheet" type="text/css" href="../CSS/style_main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="white_space"><h1>7 cudów świata</h1></div>
<br><br>
<img src="../ZDJ/Main/7cudowswiata.png">
<br><br>
<span><div align="center" class="white_radius"><center><h1>Zostań <a>przywódcą </a>jednego z siedmiu wielkich miast świata antycznego.</h1></center> <h3>&emsp;Zbieraj surowce ze swoich ziem, weź udział w odwiecznym wyścigu cywilizacyjnym, nawiąż kontakty handlowe i stwórz militarną potęgę. Pozostaw ślad na kartach historii budując cud architektury, który przetrwa wieki! Gra w 7 cudów toczy się przez trzy wieki. W każdym wieku gracze otrzymują karty, które są głównym sposobem rozgrywki. Gracze pokazują swoje karty jednocześnie (płacąc lub uzyskując surowce albo wchodząc w interakcję z innymi graczami na różne sposoby). Gra idealna na spotkania towarzyskie i rodzinne.</h3><br>
<h2 id="zasady">7 cudów świata - zasady gry</h2><br>
<h3>&emsp;Każdy gracz otrzymuje Planszę Cudów Świata i 3 monety o wartości 1 dla każdej z 3 talii. Liczba kart zależy od ilości graczy - odłóż do pudełka nieużywane karty, nie będą one brały udziału w rozgrywce. Dla talii III Ery wybierz losowo gildię (karty fioletowe) i wtasuj je do talii obecnej. Gra trwa trzy Ery, od pierwszej po trzecią. Punkty zwycięstwa są liczone na końcu III ery. Na początku każdej Ery każdy z graczy otrzymuje 7 losowych kart (rozdaje się w ten sposób całą talię Ery). Każda Era trwa 6 tur, w których gracze wystawiają w tym samym momencie po jednej karcie.<br><br>
<h2>Koniec Ery:</h2> <br><h3>&emsp;Każda era kończy się po szóstej turze. Gracze muszą rozliczyć konflikty zbrojne. Każdy gracz porównuje ilość symboli tarcz na swoich kartach struktur wojskowych (w kolorze czerwonym) z ilością tarcz sąsiadujących miast. Jeśli gracz ma wyższą sumę niż sąsiednie miasto zabiera Żeton Wygranej odpowiadający Erze która się skończyła. Jeżeli gracz ma niższą sumę niż sąsiadujące miasto zabiera Żeton Przegranej. Jeżeli gracz ma sumę równą sumie dla sąsiadującego miasta nie bierze żadnego żetony. Na koniec III Ery gdy zostaną rozdane konflikty żetonów zbrojnych, gracze zliczają punkty.<br><br>
Grę można zakupić <a href='http://www.empik.com/7-cudow-swiata-gra-karciana-rebel,prod59230097,zabawki-p' target="_blank">tutaj</a>
<br>
<a href='galery.html' target='content'>Tutaj możesz obejrzeć zdjęcia z gry.</a>
</h3><br><br><br></h3></div></span>
</body>
</html>
Raw
style.css
*{
margin:0px;
padding:0px;
}
body{
overflow-y:none;
background-color:black;
}
/*Display of page*/
.grid{
display:grid;
width:100%;
height:100%;
grid-template-rows:74px 9fr 20px;
grid-template-columns:100%;
overflow:none;
}
/*Display of Conntent chunk*/
.flex{
display:flex;
flex-direction:row;
}
/* LOGO - background imge and actual logo*/
#logo_img{
background-color:black;
height:700px;
right:1%;
}
/*LOGO*/
#logo{
position:absolute;
/*top:7%;*/
z-index:2;
font-size:400%;
color:white;
position:in-line;
margin-left:10px;
}
.logo_name{
font-family:Courier;
}
/*Image behind logo*/
.img_logo{
position:absolute;
width:100%;
z-index:0;
z-index:1;
height:100%;
}
/* END of logo*/
/* Menu - left content in Flex display*/
/*Properties of manu box*/
.menu{
width:20%;
background-color:#595959;
z-index:3;
border-color:black;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:2px;
border-top-width:0px;
border-style:solid;
font-family:Courier;
font-weight:bold;
}
/*The menu name - the topest box of menu*/
.main_menu{
height:80px;
background-color:#333333;
text-align:center;
color:white;
font-size:60px;
}
a{
text-decoration:none;
color:white;
}
/*element of main menu*/
.elem_menu{
color:white;
font-size:24px;
display:grid;
height:38px;
border-color:white;
border-bottom-width:2px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
border-style:solid;
background-color:#666666;
padding-top:10px;
}
.elem_menu:hover{
background-color:#8c8c8c;
cursor:pointer;
}
/*clock properties*/
#clock{
position:absolute;
width:369px;
height:70px;
/*top:7%;*/
right:0px;
background-color:#333333;
z-index:4;
border-color:#595959;
border-bottom-width:0px;
border-left-width:4px;
border-right-width:0px;
border-top-width:4px;
border-style:solid;
/*box-shadow:20px 10px 30px grey;*/
}
/*properties of the day, month and year/their look and apperience*/
.date{
color:white;
text-align:center;
margin:5px;
}
/*properties of hours, minutes and seconds*/
.time{
color:white;
text-align:center;
font-size:40px;
}
/*the content/right side of flex*/
iframe{
width:80%;
height:100%;
border-color:black;
z-index:3;
background-color:none;
border-width:0;
}
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
.stopka{
background-color:black;
color:white;
z-index:10;
}
Raw
style_contact.css
*{
margin:0;
padding:0;
}
body{
overflow-y:scroll;
font-family:Courier;
}
span{
color:red;
font-size:20px;
line-height:70px;
}
#white_space{
background-color:white;
width:352px;
height:70px;
font-size:45px;
border-color:#d9d9d9;
border-bottom-width:4px;
border-left-width:4px;
border-right-width:0px;
border-top-width:0px;
border-style:solid;
text-align:center;
position:fixed;
right:0;
font-weight:bold;
line-height:25px;
}
.grid{
display:grid;
grid-template:90% 10%/ 1fr 1fr 1fr;
grid-column-gap:2%;
padding:5%;
padding-top:10%;
padding-bottom:4%;
height:500px;
}
th{
border:4px solid #595959;
padding:10%;
border-left-width:0px;
border-right-width:0px;
}
tbody{
border:4px solid black;
background-color:white;
}
thead{
font-size:18px;
background-color:#333333;
color:white;
}
table{
width:100%;
}
Raw
style_galery.css
*{
margin:0px;
padding:0px;
}
h1{
font-family:Courier;
}
body{
background-color:none;
overflow-x:hidden;
overflow-y:scroll;
font-family:Courier;
}
h1{
padding-top:2%;
padding-bottom:2.5%;
color:#333333;
}
#white_space{
background-color:white;
width:350px;
height:70px;
font-size:22px;
border-color:#d9d9d9;
border-bottom-width:4px;
border-left-width:4px;
border-right-width:0px;
border-top-width:0px;
border-style:solid;
text-align:center;
position:fixed;
right:0;
z-index:11;
}
.grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(3, 1fr);
grid-gap:10px;
padding-top:5%;
padding:5%;
margin:5%;
margin-top:0%;
background-color:#333333;
border:10px solid black;
border-radius: 0px 0px 350px 350px;
padding-bottom:30px;
border-right-width:0px;
border-top-width:0px;
}
#zdj_galeri{
position:relative;
height:70%;
width:71%;
padding-left:13%;
padding-right:5.25%;
padding-top:10%;
padding-bottom:0;
border-style:solid;
border-color:black;
border-bottom-width:0px;
border-right-width:0px;
border-left-width:10px;
border-radius: 1000px 1000px 0px 0px;
border-top-width:10px;
background-color:#333333;
margin-left:5%;
}
#zdj_galeri:hover{
cursor:default;
}
img{
height:100%;
width:100%;
}
img:hover{
cursor:pointer;
}
.mini_galery{
display:grid;
top:100%;
left:0;
grid-template-columns:1fr 1fr;
grid-template-rows:2fr 0.5fr;
position:absolute;
background-image:url("../ZDJ/Logo/mini_galery.png");
padding:20%;
padding-bottom:5%;
padding-top:10%;
z-index:11;
grid-column-gap:10%;
}
span{
color:#333333;
}
#big_zdj{
grid-column:1/3;
}
.exit{
position:absolute;
z-index:10;
width:170px;
height:120px;
bottom:-30%;
right:5%;
padding:12px;
opacity:0.8;
z-index:12;
}
.left{
position:absolute;
z-index:11;
width:170px;
height:120px;
bottom:-75%;
right:75%;
padding:12px;
opacity:0.8;
}
.right{
position:absolute;
z-index:11;
width:170px;
height:120px;
bottom:-75%;
right:8%;
padding:12px;
opacity:0.8;
}
.white{
background-color:none;
}
Raw
style_gameplay.css
*{
margin:0px;
padding:0;
}
body{
font-family:Courier;
}
.video{
margin:10%;
margin-bottom:0;
margin-top:3%;
}
.tic-tac{
padding-top:30px;
padding-bottom:30px;
padding-left:10px;
margin-left:23px;
font-weight:bold;
margin-right:394px;
color:white;
text-align:center;
font-size:24px;
border:10px solid white;
border-radius:100px 100px 100px 100px;
background-color:black;
border-top-width:0px;
border-bottom-width:0px;
}
span{
position:absolute;
top:10px;
right:60px;
}
#white_space{
background-color:white;
width:350px;
height:70px;
font-size:45px;
border-color:#d9d9d9;
border-bottom-width:4px;
border-left-width:4px;
border-right-width:0px;
border-top-width:0px;
border-style:solid;
position:fixed;
right:0;
top:0;
font-weight:bold;
z-index:11;
color:#333333;
}
Raw
style_main.css
*{
margin:0px;
padding:0px;
}
body{
overflow-x:hidden;
overflow-y:scroll;
}
span{
font-family:Courier;
}
.white_space{
background-color:white;
width:352px;
height:70px;
font-size:22px;
border-color:#d9d9d9;
border-bottom-width:4px;
border-left-width:4px;
border-right-width:0px;
border-top-width:0px;
border-style:solid;
text-align:center;
position:fixed;
right:0;
}
h1{
padding-top:2%;
padding-bottom:2.5%;
color:#333333;
}
img{
position:in-line;
margin-left:5%;
padding-right:5%;
float:left;
width:300px;
height:400px;
margin-right:10px;
margin-top:5%;
}
.white_radius{
border-radius:10px;
width:90%;
border:5px solid #333333;
background-color:white;
padding-left:5%;
margin-left:2.5%;
margin-bottom:20px;
margin-top:50px;
}
#zasady{
text-align:left;
margin-left:400px;
}
h2{
text-align:center;
}
h3{
padding-right:5%;
text-align:center;
color:black;
}
a{
text-decoration:none;
color:red;
}
Raw
style_thoughts.css
*{
margin:0;
padding:0;
}
body{
font-family:Courier;
font-size:24px;
color:white;
overflow-y:scroll;
}
.width{
width:100%;
margin-top:50px;
}
p{
text-align:center;
padding:3%;
padding-bottom:0%;
width:80%;
margin-left:6%;
padding-top:4%;
margin-bottom:0%;
margin-top:0;
border:10px double white;
background-color:black;
border-radius:100px 100px 0px 0px;
border-top-width:0px;
border-bottom-width:0px;
}
span{
line-height:25px;
}
#white_space{
background-color:white;
width:352px;
height:70px;
font-size:45px;
font-weight:bold;
border-color:#d9d9d9;
border-bottom-width:4px;
border-left-width:4px;
border-right-width:0px;
border-top-width:0px;
border-style:solid;
text-align:center;
position:fixed;
right:0;
top:0;
color:black;
}
.submit{
width:30%;
height:12%;
border-color:#333333;
border-width:5px;
border-radius:100px 100px 100px 100px;
font-size:160%;
}
.submit:active{
background-color:grey;
}
form{
border:10px double white;
margin-left:6%;
margin-right:6.45%;
padding-bottom:4%;
padding-left:5%;
padding-right:5%;
padding-top:3%;
border-radius:0px 0px 30% 30%;
background-color:black;
border-top-width:0px;
border-bottom-width:0px;
}
Raw
thoughts.html
<html>
<head>
<title>
Moja Strona
</title>
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-2">
<meta http-equiv= "Content-Language" content="pl">
<link rel="stylesheet" type="text/css" href="../CSS/style_thoughts.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="white_space"><span><br>Przemyślenia</span></div>
<div class="width"><p>Jeżeli nie grałeś w grę to nie masz po co tu siedzieć, leć do sklepu zagrać!</p></div>
<form>
Imie:<input type="text" name="name">
Nazwisko:<input type="text" name="lastname">
Wiek:<input type="text" name="age">
<br><br>
<input type="radio" name="gender" value="male"> Mężczyzna<br>
<input type="radio" name="gender" value="female"> Kobieta<br>
Czy grałeś w 7 cudów świata?<br>
<input type="radio" name="play" value="played"> Grałem<br>
<input type="radio" name="play" value="noplayed"> Nie grałem<br>
Czy dobrze się bawiłeś grając w 7 cudów świata?<br>
<input type="radio" name="fun" value="fun_yes"> Tak<br>
<input type="radio" name="fun" value="fun_unknow"> Nie wiem<br>
<input type="radio" name="fun" value="fun_no"> Nie<br>
<center><input class="submit" type="submit" value="Submit"><center>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment