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(); }
}

50
style.css
View file

@ -6,14 +6,15 @@ 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%;
/* --300px; */
left: 0; left: 0;
border-right: 1px solid black; border-right: 1px solid black;
background: rgb(160, 0, 0); background: rgb(160, 0, 0);
@ -34,6 +35,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a00000', end
height: auto; height: auto;
width: auto; width: auto;
} }
.button { .button {
width: 100%; width: 100%;
height: 5%; height: 5%;
@ -59,15 +61,20 @@ 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 */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
margin-bottom: -2; margin-bottom: -2;
overflow: hidden; overflow: hidden;
} }
.button:hover { .button:hover {
height: 20%; height: 20%;
box-shadow: inset 0 0 100px #000000; box-shadow: inset 0 0 100px #000000;
@ -91,8 +98,10 @@ background-position:45% 30%;
-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');
} }
@ -134,6 +143,7 @@ top:0px;
transition: all 1s ease-out; transition: all 1s ease-out;
opacity: 50%; opacity: 50%;
} }
#bar:hover { #bar:hover {
-height: 100%; -height: 100%;
} }
@ -150,6 +160,7 @@ left:0px;
transition: all 2s ease-out; transition: all 2s ease-out;
opacity: 50%; opacity: 50%;
} }
#bar2:hover { #bar2:hover {
width: 100%; width: 100%;
} }
@ -185,10 +196,12 @@ opacity: 1;
-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 { #panel {
position: absolute; position: absolute;
margin: auto; margin: auto;
@ -199,7 +212,12 @@ width:200px;
background: black; background: black;
} }
#dropshadowbg {position:absolute;width:100%;height:100%;box-shadow: inset 0 0 200px #000000;} #dropshadowbg {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 200px #000000;
}
#logo { #logo {
position: absolute; position: absolute;
@ -210,3 +228,19 @@ 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");
}