diff --git a/index.htm b/index.htm
deleted file mode 100644
index 1eb2df8..0000000
--- a/index.htm
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-TC Automotives
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..850e572
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+
+
+
+TC Automotives
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ba486e1
--- /dev/null
+++ b/script.js
@@ -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(); }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index a6da2c2..6956901 100644
--- a/style.css
+++ b/style.css
@@ -1,212 +1,246 @@
-body{
-background-color:#000000;
-margin:0;
-background-image:url("resources/carcbonbg.jpg");
+body {
+ background-color: #000000;
+ margin: 0;
+ background-image: url("resources/carcbonbg.jpg");
}
@font-face {
font-family: race;
- src: url(resources/evogria.otf);
-}
+ src: url(resources/Evogria.otf);
+}
#menu {
-position:fixed;
-height:100%;
-vertical-align:center;
-width:15%;--300px;
-left:0;
-border-right:1px solid black;
-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: -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: -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: 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 );
+ position: fixed;
+ height: 100%;
+ vertical-align: center;
+ width: 15%;
+ /* --300px; */
+ left: 0;
+ border-right: 1px solid black;
+ 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: -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: -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: 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 {
- position: relative;
- top: 45%;
- transform: translateY(-40%);
- height:auto;
- width:auto;
+ position: relative;
+ top: 45%;
+ transform: translateY(-40%);
+ height: auto;
+ width: auto;
}
+
.button {
-width:100%;
-height:5%;
-text-align:center;
-background: #353535;
-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-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: 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 );
+ width: 100%;
+ height: 5%;
+ text-align: center;
+ background: #353535;
+ 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-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: 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);
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
- transition-delay: all 500ms;
- border-top:2px solid #363636;
- border-bottom:2px solid #363636;
-font-color:000000;
-font-family:race;
-font-size:250%;
-text-shadow: 1px 1px #606060;
--box-shadow:inset 0 0 100px #000000;
-cursor: pointer; cursor: hand;
--webkit-user-select: none; /* Chrome/Safari */
--moz-user-select: none; /* Firefox */
--ms-user-select: none; /* IE10+ */
-background-repeat:no-repeat;
-background-size:100%;
-margin-bottom:-2;
-overflow: hidden;
+ transition-delay: all 500ms;
+ border-top: 2px solid #363636;
+ border-bottom: 2px solid #363636;
+ font-color: 000000;
+ font-family: race;
+ font-size: 250%;
+ text-shadow: 1px 1px #606060;
+ -box-shadow: inset 0 0 100px #000000;
+ cursor: pointer;
+ cursor: hand;
+ -webkit-user-select: none;
+ /* Chrome/Safari */
+ -moz-user-select: none;
+ /* Firefox */
+ -ms-user-select: none;
+ /* IE10+ */
+ background-repeat: no-repeat;
+ background-size: 100%;
+ margin-bottom: -2;
+ overflow: hidden;
}
+
.button:hover {
-height:20%;
-box-shadow:inset 0 0 100px #000000;
-text-shadow: none;
-font-color:f2f2f2;
--background-image:url("resources/linkbg.png");
+ height: 20%;
+ box-shadow: inset 0 0 100px #000000;
+ text-shadow: none;
+ font-color: f2f2f2;
+ -background-image: url("resources/linkbg.png");
}
#eagle {
-position:absolute;
-top:3%;
-left:0%;
-width:100%;
-height:18%;
-background-image:url("resources/eagle2.png");
-background-repeat: no-repeat;
--background-attachment: fixed;
-background-size:50%;
-background-position:45% 30%;
- -webkit-transition: all 1s ease-out;
+ position: absolute;
+ top: 3%;
+ left: 0%;
+ width: 100%;
+ height: 18%;
+ background-image: url("resources/eagle2.png");
+ background-repeat: no-repeat;
+ -background-attachment: fixed;
+ background-size: 50%;
+ background-position: 45% 30%;
+ -webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
- cursor: pointer; cursor: hand;
+ cursor: pointer;
+ cursor: hand;
}
+
#eagle:hover {
-background-image:url('resources/eagleover.png');
+ background-image: url('resources/eagleover.png');
}
#senna {
-position:absolute;
-bottom:0px;
-left:0px;
-width:100%;
-height:18%;
-background-image:url("resources/senna.png");
-background-repeat: no-repeat;
--background-attachment: fixed;
-background-size:80%;
-background-position:50% 70%;
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ height: 18%;
+ background-image: url("resources/senna.png");
+ background-repeat: no-repeat;
+ -background-attachment: fixed;
+ background-size: 80%;
+ background-position: 50% 70%;
}
.bottombox {
-position:absolute;
-bottom:0px;
-width:100%;
-height:100%;
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ height: 100%;
}
.bs {
-position:absolute;
-bottom:0px;
+ position: absolute;
+ bottom: 0px;
}
#bar {
-position:absolute;
-height:0px;
-background:#ffffff;
-width:100%;
-top:0px;
- -webkit-transition: all 1s ease-out;
+ position: absolute;
+ height: 0px;
+ background: #ffffff;
+ width: 100%;
+ top: 0px;
+ -webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-opacity:50%;
+ opacity: 50%;
}
+
#bar:hover {
--height:100%;
+ -height: 100%;
}
#bar2 {
-position:absolute;
-width:0px;
-height:100%;
-background:#ffffff;
-left:0px;
--webkit-transition: all 2s ease-out;
+ position: absolute;
+ width: 0px;
+ height: 100%;
+ background: #ffffff;
+ left: 0px;
+ -webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-opacity:50%;
+ opacity: 50%;
}
+
#bar2:hover {
-width:100%;
+ width: 100%;
}
#wrapper2 {
-position:fixed;
-width: -moz-calc(100% - 300px);
-width: -webkit-calc(100% - 300px);
-width: -o-calc(100% - 300px);
-width: calc(100% - 300px);
-height:100%;
-left:300;
-background:url("resources/flag.png");
-background-size:50%;
-background-repeat: no-repeat;
-background-attachment: fixed;
-background-position:right bottom;
+ position: fixed;
+ width: -moz-calc(100% - 300px);
+ width: -webkit-calc(100% - 300px);
+ width: -o-calc(100% - 300px);
+ width: calc(100% - 300px);
+ height: 100%;
+ left: 300;
+ background: url("resources/flag.png");
+ background-size: 50%;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-position: right bottom;
}
#wrapper {
-position:absolute;
-width:85%;
-height:100%;
-left:15%;
-background:url("resources/lambobg.png");
-background-repeat: no-repeat;
-background-attachment: fixed;
-background-size:50%;
-background-position:right -30%;
-opacity: 1;
--webkit-transition: all 1s ease-out;
+ position: absolute;
+ width: 85%;
+ height: 100%;
+ left: 15%;
+ background: url("resources/lambobg.png");
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-size: 50%;
+ background-position: right -30%;
+ opacity: 1;
+ -webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
+
#swrapper:hover {
-opacity: 0.5;
-background-size:55%;
-}
-#panel {
-position:absolute;
-margin:auto;
-bottom:10;
-right:10;
-height: 500px;
-width:200px;
-background:black;
+ opacity: 0.5;
+ background-size: 55%;
}
-#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 {
-position:absolute;
-right:50;
-top:50;
-width:300;
-height:300;
-background-image:url("resources/logo.png");
-background-repeat:no-repeat;
+ position: absolute;
+ right: 50;
+ top: 50;
+ width: 300;
+ height: 300;
+ background-image: url("resources/logo.png");
+ 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");
}
\ No newline at end of file