my personal web page

assets/css/1_giftAnimation.css

@@ -0,0 +1,34 @@
+.preloader-area {
+    background: #fff;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+}
+
+.preload1 {
+    background-image: url(../images/tamu.png);
+    background-position: top;
+    background-repeat: no-repeat;
+    height: 200px;
+    left: 50%;
+    margin: -100px 0 0 -100px;
+    position: absolute;
+    top: 50%;
+    width: 200px;
+}
+
+.preload {
+    background-image: url(../images/cat.gif);
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 200px;
+    left: 50%;
+    margin: -100px 0 0 -100px;
+    position: absolute;
+    top: 50%;
+    width: 150px;
+    padding: 10px 10px 300px 10px;
+}

assets/css/2_NavBar.css

@@ -0,0 +1,49 @@
+/*!
+ * Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
+ * Copyright 2013-2016 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
+ */
+
+.menu-area {
+    background: #333;
+    background-color: Gray ;
+    background-color: LightGray ;
+    position: relative;
+    padding: 5px 0px;
+    z-index: 999;
+}
+
+.is-sticky {
+    width: 100%;
+    z-index: 9999;
+    position: absolute;
+}
+
+.navbar-nav {
+    float: right;
+    position: relative;
+}
+
+.navbar-nav > li > a {
+    text-transform: uppercase;
+    font-size: 12px;
+    color: #fff;
+    font-weight: 600;
+    color:black; 
+}
+
+.navbar-nav li:hover:before {
+    position: absolute;
+    content: "";
+    left: 50%;
+    top: 70%;
+    height: 1px;
+    width: 30px;
+    margin-left: -15px;
+    background: #fff;
+    -webkit-transition: .5s;
+    transition: .5s;
+}
+
+
+

assets/css/3_headerAndStuff.css

@@ -0,0 +1,100 @@
+
+.header-area {
+
+
+    background-image: url(../images/portada.JPG);
+
+    background-size: cover;
+    background-position: center center;
+    height: 100%;
+    filter: grayscale();
+}
+
+.header-area-tablecell {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+
+.header-text > div> h1 {
+
+    width: 25%;
+    margin: 0;
+    font-weight: 700;
+    margin-bottom: 20px;
+
+    font-size: 5em;
+
+}
+
+#headerH1{
+
+    float:left;
+    box-sizing:border-box;
+    /**border-style: solid;
+    border-color: black;*/
+    height:5em;
+
+}
+.header-text > h3 {
+    /**border-style: solid;
+    border-color: black;*/
+    width: 50%;
+    margin: 10px 10px;
+    font-size: 30px;
+    font-weight: 200;
+    letter-spacing: 7px;
+    float:left;
+}
+
+.header-text {
+    color: #fff;
+    box-sizing:border-box
+
+}
+
+.header-area-table {
+    display: table;
+    width: 100%;
+    height: 100%;
+}
+#byJoseT{
+    word-spacing: 0.5em;
+    font-size: 1em;
+    text-transform: uppercase;
+    float:right;
+    position: relative;
+    left: 7em;
+}
+
+@media only screen and (max-device-width: 480px)
+{
+    .header-text > div> h1 {
+
+        width: 25%;
+        margin: 0;
+        font-weight: 700;
+
+        font-size: 40px;
+
+
+
+    }
+
+    #headerH1{
+
+        float:left;
+        box-sizing:border-box;
+
+        height:10em;
+
+    }
+    #byJoseT{
+    display: none;
+}
+
+}
+
+
+
+}

assets/css/4_1_aboutMeGame.css

@@ -0,0 +1,65 @@
+.buttonsN{
+    width: 50px;
+    height: 50px;
+
+    margin:5px;
+    text-align: center;
+    background-color: #D3D3D3;
+
+    visibility: hidden;
+
+    border-style: solid;
+
+}
+.buttons{
+    width: 50px;
+    height: 50px;
+
+    margin:5px;
+    text-align: center;
+
+    border-style: solid;
+
+
+}
+
+.gameContainer{
+  display: flex;
+  text-align: center;
+}
+.toFill{
+  visibility: hidden;
+    width: 50px;
+    height: 50px;
+}
+
+#startButton{
+  background-color: green;
+}
+
+
+#difficult{
+  background-color: yellow;
+}
+
+
+#gamePanel{
+  display: flex;
+  box-sizing: border-box;
+  width: 85%;
+  height:10em;
+}
+#controlPanel{
+  width: 40%;
+  height:20em;
+  box-sizing: border-box;
+}
+
+.col-md-1{
+  margin:0.5em;
+  box-sizing: border-box;
+  width: 3em;
+}
+
+
+}

assets/css/4_aboutMe.css

@@ -0,0 +1,75 @@
+
+#imageContainer{
+    text-align: center;
+    border-style: solid;
+    box-sizing: border-box;
+    background-image: url(../images/me1.JPG);
+    background-size: cover;
+    width: 25em;
+    height: 38.38em;
+}
+
+.about-me-area {
+    background: #fff;
+}
+
+.about-me-text p {
+    margin-bottom: 20px;
+    margin-left: 20px;
+}
+
+.about-me-text p {
+    font-size: 14px;
+    margin-top: 10px;
+    text-align: justify;
+}
+
+a.about-button {
+    display: inline-block;
+    padding: 10px;
+    background: #334;
+    color: #fff;
+    text-transform: uppercase;
+    border-radius: 10px;
+    width: 180px;
+    text-align: center;
+    font-size: 12px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    margin-right: 20px;
+    -webkit-transition: .4s;
+    transition: .4s;
+      cursor: pointer;
+}
+a.about-button:hover {
+  background: #06D85F;
+  color:black;
+}
+
+#rowOfAboutMeContent,#rowOfAboutMeContentSmall{
+    /*order-style: solid;*/
+}
+
+
+#firstP, #secondP{
+
+    display: block;
+}
+
+
+
+@media only screen and (max-device-width: 480px)
+{
+    #imageContainer{
+    text-align: center;
+    border-style: solid;
+    box-sizing: border-box;
+    background-image: url(../images/me1LowR.jpg);
+    background-size: cover;
+    width: 25em;
+    height: 38.38em;
+}
+
+
+}
+