Imbus/OgSite
1
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

Compare commits

merge into: Imbus:legacy
Branches Tags
Imbus:master
Imbus:legacy
Imbus:untouched
...
pull from: Imbus:master
Branches Tags
Imbus:master
Imbus:legacy
Imbus:untouched

5 commits
legacy ... master

Author SHA1 Message Date
Imbus
9d3ee93fe4 Renamed index.htm to index.html 2023-11-18 12:16:19 +01:00
Imbus
5e5765e806 Fixed typo for the font Evogria in the css 2023-11-01 11:00:45 +01:00
Imbus
097a8db09c Move js out of html 2023-11-01 10:58:12 +01:00
Imbus
05050e07ea Move style out of html 2023-11-01 10:55:13 +01:00
Imbus
51120ac303 Formatting 2023-11-01 10:53:05 +01:00
4 changed files with 218 additions and 186 deletions
Show stats Expand all files Collapse all files

42
index.htm
View file

@ -1,42 +0,0 @@
<html><script>
function expand() {document.getElementById("bar").style.height = "100%";}
function collapse() {document.getElementById("bar").style.height = "0px"; }
function myFunction() {
if (document.getElementById('bar').clientHeight == 0) { expand();}
else { collapse();}
}
</script>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>TC Automotives</title><style>
#b1:hover { background-image:url("resources/car.png");}
#b2:hover { background-image:url("resources/sketch.png");}
#b3:hover { background-image:url("resources/cogs.png");}
#b4:hover { background-image:url("resources/track.png");}
</style>
<body>
<div id="menu"><div id="buttonholder">
<div id="b1" class="button" onclick="myFunction()">Models</div>
<div id="b2" class="button" onclick="myFunction()">Design</div>
<div id="b3" class="button" onclick="myFunction()">Details</div>
<div id="b4" class="button" onclick="myFunction()">Specifications</div>
</div>
<div id="eagle"></div>
<div id="senna"></div>
</div>
<!--div id="logo"></div-->
<div id="wrapper">
<!--div id="wrapper2"></div><div id="dropshadowbg"></div-->
<div id="bar">
<div class="bottombox">
<div class="bs">
ASDadsasddas
</div>
</div>
</div>
</div>
</body>
</html>

34
index.html Normal file
View file

@ -0,0 +1,34 @@
<html>
<script src="script.js"></script>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>TC Automotives</title>
<body>
<div id="menu">
<div id="buttonholder">
<div id="b1" class="button" onclick="myFunction()">Models</div>
<div id="b2" class="button" onclick="myFunction()">Design</div>
<div id="b3" class="button" onclick="myFunction()">Details</div>
<div id="b4" class="button" onclick="myFunction()">Specifications</div>
</div>
<div id="eagle"></div>
<div id="senna"></div>
</div>
<!--div id="logo"></div-->
<div id="wrapper">
<!--div id="wrapper2"></div><div id="dropshadowbg"></div-->
<div id="bar">
<div class="bottombox">
<div class="bs">
ASDadsasddas
</div>
</div>
</div>
</div>
</body>
</html>

6
script.js Normal file
View file

@ -0,0 +1,6 @@
function expand() { document.getElementById("bar").style.height = "100%"; }
function collapse() { document.getElementById("bar").style.height = "0px"; }
function myFunction() {
if (document.getElementById('bar').clientHeight == 0) { expand(); }
else { collapse(); }
}

322
style.css
View file

@ -1,212 +1,246 @@
body{ body {
background-color:#000000; background-color: #000000;
margin:0; margin: 0;
background-image:url("resources/carcbonbg.jpg"); background-image: url("resources/carcbonbg.jpg");
} }
@font-face { @font-face {
font-family: race; font-family: race;
src: url(resources/evogria.otf); src: url(resources/Evogria.otf);
} }
#menu { #menu {
position:fixed; position: fixed;
height:100%; height: 100%;
vertical-align:center; vertical-align: center;
width:15%;--300px; width: 15%;
left:0; /* --300px; */
border-right:1px solid black; left: 0;
background: rgb(160,0,0); border-right: 1px solid black;
background: -moz-linear-gradient(left, rgba(160,0,0,1) 0%, rgba(181,0,0,1) 63%, rgba(160,0,0,1) 100%); background: rgb(160, 0, 0);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(160,0,0,1)), color-stop(63%,rgba(181,0,0,1)), color-stop(100%,rgba(160,0,0,1))); background: -moz-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
background: -webkit-linear-gradient(left, rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(160, 0, 0, 1)), color-stop(63%, rgba(181, 0, 0, 1)), color-stop(100%, rgba(160, 0, 0, 1)));
background: -o-linear-gradient(left, rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%); background: -webkit-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
background: -ms-linear-gradient(left, rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%); background: -o-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
background: linear-gradient(to right, rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%); background: -ms-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a00000', endColorstr='#a00000',GradientType=1 ); background: linear-gradient(to right, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a00000', endColorstr='#a00000', GradientType=1);
} }
#buttonholder { #buttonholder {
position: relative; position: relative;
top: 45%; top: 45%;
transform: translateY(-40%); transform: translateY(-40%);
height:auto; height: auto;
width:auto; width: auto;
} }
.button { .button {
width:100%; width: 100%;
height:5%; height: 5%;
text-align:center; text-align: center;
background: #353535; background: #353535;
background: -moz-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%); background: -moz-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(1%,#383838), color-stop(36%,#363636), color-stop(73%,#363636), color-stop(99%,#343434), color-stop(99%,#353535), color-stop(100%,#353535)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(1%, #383838), color-stop(36%, #363636), color-stop(73%, #363636), color-stop(99%, #343434), color-stop(99%, #353535), color-stop(100%, #353535));
background: -webkit-linear-gradient(top, #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%); background: -webkit-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
background: -o-linear-gradient(top, #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%); background: -o-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
background: -ms-linear-gradient(top, #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%); background: -ms-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
background: linear-gradient(to bottom, #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%); background: linear-gradient(to bottom, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#353535',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#353535', GradientType=0);
-webkit-transition: all 500ms ease-out; -webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out; -o-transition: all 500ms ease-out;
transition: all 500ms ease-out; transition: all 500ms ease-out;
transition-delay: all 500ms; transition-delay: all 500ms;
border-top:2px solid #363636; border-top: 2px solid #363636;
border-bottom:2px solid #363636; border-bottom: 2px solid #363636;
font-color:000000; font-color: 000000;
font-family:race; font-family: race;
font-size:250%; font-size: 250%;
text-shadow: 1px 1px #606060; text-shadow: 1px 1px #606060;
-box-shadow:inset 0 0 100px #000000; -box-shadow: inset 0 0 100px #000000;
cursor: pointer; cursor: hand; cursor: pointer;
-webkit-user-select: none; /* Chrome/Safari */ cursor: hand;
-moz-user-select: none; /* Firefox */ -webkit-user-select: none;
-ms-user-select: none; /* IE10+ */ /* Chrome/Safari */
background-repeat:no-repeat; -moz-user-select: none;
background-size:100%; /* Firefox */
margin-bottom:-2; -ms-user-select: none;
overflow: hidden; /* IE10+ */
background-repeat: no-repeat;
background-size: 100%;
margin-bottom: -2;
overflow: hidden;
} }
.button:hover { .button:hover {
height:20%; height: 20%;
box-shadow:inset 0 0 100px #000000; box-shadow: inset 0 0 100px #000000;
text-shadow: none; text-shadow: none;
font-color:f2f2f2; font-color: f2f2f2;
-background-image:url("resources/linkbg.png"); -background-image: url("resources/linkbg.png");
} }
#eagle { #eagle {
position:absolute; position: absolute;
top:3%; top: 3%;
left:0%; left: 0%;
width:100%; width: 100%;
height:18%; height: 18%;
background-image:url("resources/eagle2.png"); background-image: url("resources/eagle2.png");
background-repeat: no-repeat; background-repeat: no-repeat;
-background-attachment: fixed; -background-attachment: fixed;
background-size:50%; background-size: 50%;
background-position:45% 30%; background-position: 45% 30%;
-webkit-transition: all 1s ease-out; -webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out; -o-transition: all 1s ease-out;
transition: all 1s ease-out; transition: all 1s ease-out;
cursor: pointer; cursor: hand; cursor: pointer;
cursor: hand;
} }
#eagle:hover { #eagle:hover {
background-image:url('resources/eagleover.png'); background-image: url('resources/eagleover.png');
} }
#senna { #senna {
position:absolute; position: absolute;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
width:100%; width: 100%;
height:18%; height: 18%;
background-image:url("resources/senna.png"); background-image: url("resources/senna.png");
background-repeat: no-repeat; background-repeat: no-repeat;
-background-attachment: fixed; -background-attachment: fixed;
background-size:80%; background-size: 80%;
background-position:50% 70%; background-position: 50% 70%;
} }
.bottombox { .bottombox {
position:absolute; position: absolute;
bottom:0px; bottom: 0px;
width:100%; width: 100%;
height:100%; height: 100%;
} }
.bs { .bs {
position:absolute; position: absolute;
bottom:0px; bottom: 0px;
} }
#bar { #bar {
position:absolute; position: absolute;
height:0px; height: 0px;
background:#ffffff; background: #ffffff;
width:100%; width: 100%;
top:0px; top: 0px;
-webkit-transition: all 1s ease-out; -webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out; -o-transition: all 1s ease-out;
transition: all 1s ease-out; transition: all 1s ease-out;
opacity:50%; opacity: 50%;
} }
#bar:hover { #bar:hover {
-height:100%; -height: 100%;
} }
#bar2 { #bar2 {
position:absolute; position: absolute;
width:0px; width: 0px;
height:100%; height: 100%;
background:#ffffff; background: #ffffff;
left:0px; left: 0px;
-webkit-transition: all 2s ease-out; -webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out; -moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out; -o-transition: all 2s ease-out;
transition: all 2s ease-out; transition: all 2s ease-out;
opacity:50%; opacity: 50%;
} }
#bar2:hover { #bar2:hover {
width:100%; width: 100%;
} }
#wrapper2 { #wrapper2 {
position:fixed; position: fixed;
width: -moz-calc(100% - 300px); width: -moz-calc(100% - 300px);
width: -webkit-calc(100% - 300px); width: -webkit-calc(100% - 300px);
width: -o-calc(100% - 300px); width: -o-calc(100% - 300px);
width: calc(100% - 300px); width: calc(100% - 300px);
height:100%; height: 100%;
left:300; left: 300;
background:url("resources/flag.png"); background: url("resources/flag.png");
background-size:50%; background-size: 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
background-position:right bottom; background-position: right bottom;
} }
#wrapper { #wrapper {
position:absolute; position: absolute;
width:85%; width: 85%;
height:100%; height: 100%;
left:15%; left: 15%;
background:url("resources/lambobg.png"); background: url("resources/lambobg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
background-size:50%; background-size: 50%;
background-position:right -30%; background-position: right -30%;
opacity: 1; opacity: 1;
-webkit-transition: all 1s ease-out; -webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out; -o-transition: all 1s ease-out;
transition: all 1s ease-out; transition: all 1s ease-out;
} }
#swrapper:hover { #swrapper:hover {
opacity: 0.5; opacity: 0.5;
background-size:55%; background-size: 55%;
}
#panel {
position:absolute;
margin:auto;
bottom:10;
right:10;
height: 500px;
width:200px;
background:black;
} }
#dropshadowbg {position:absolute;width:100%;height:100%;box-shadow: inset 0 0 200px #000000;} #panel {
position: absolute;
margin: auto;
bottom: 10;
right: 10;
height: 500px;
width: 200px;
background: black;
}
#dropshadowbg {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 200px #000000;
}
#logo { #logo {
position:absolute; position: absolute;
right:50; right: 50;
top:50; top: 50;
width:300; width: 300;
height:300; height: 300;
background-image:url("resources/logo.png"); background-image: url("resources/logo.png");
background-repeat:no-repeat; background-repeat: no-repeat;
}
#b1:hover {
background-image: url("resources/car.png");
}
#b2:hover {
background-image: url("resources/sketch.png");
}
#b3:hover {
background-image: url("resources/cogs.png");
}
#b4:hover {
background-image: url("resources/track.png");
} }