Compare commits
No commits in common. "master" and "legacy" have entirely different histories.
4 changed files with 184 additions and 216 deletions
42
index.htm
Normal file
42
index.htm
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<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
34
index.html
|
|
@ -1,34 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
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(); }
|
|
||||||
}
|
|
||||||
304
style.css
304
style.css
|
|
@ -1,30 +1,29 @@
|
||||||
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%;
|
width:15%;--300px;
|
||||||
/* --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);
|
background: -moz-linear-gradient(left, rgba(160,0,0,1) 0%, rgba(181,0,0,1) 63%, rgba(160,0,0,1) 100%);
|
||||||
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-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: -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: -webkit-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: -o-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: -ms-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: linear-gradient(to right, 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%);
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a00000', endColorstr='#a00000',GradientType=1 );
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a00000', endColorstr='#a00000', GradientType=1);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -32,215 +31,182 @@ body {
|
||||||
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: pointer; cursor: hand;
|
||||||
cursor: hand;
|
-webkit-user-select: none; /* Chrome/Safari */
|
||||||
-webkit-user-select: none;
|
-moz-user-select: none; /* Firefox */
|
||||||
/* Chrome/Safari */
|
-ms-user-select: none; /* IE10+ */
|
||||||
-moz-user-select: none;
|
background-repeat:no-repeat;
|
||||||
/* Firefox */
|
background-size:100%;
|
||||||
-ms-user-select: none;
|
margin-bottom:-2;
|
||||||
/* IE10+ */
|
overflow: hidden;
|
||||||
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: pointer; cursor: hand;
|
||||||
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 {
|
#panel {
|
||||||
position: absolute;
|
position:absolute;
|
||||||
margin: auto;
|
margin:auto;
|
||||||
bottom: 10;
|
bottom:10;
|
||||||
right: 10;
|
right:10;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
width: 200px;
|
width:200px;
|
||||||
background: black;
|
background:black;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropshadowbg {
|
#dropshadowbg {position:absolute;width:100%;height:100%;box-shadow: inset 0 0 200px #000000;}
|
||||||
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");
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue