left.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>/Users/bryan/Downloads/mini-projects</title>
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <title>Stable</title>
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"
        type="text/css" />
    <!-- Latest compiled and minified JavaScript -->
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"
        type="text/javascript"></script>-->
    <style type="text/css">
        /*<![CDATA[*/
        /* Basic */
        @-ms-viewport {
            width: device-width;
        }
        body {
  background: linear-gradient(-45deg, #da0000, #0008ffe5, #23d5a2d8, #2f2fbce5);
  background-size: 400% 400%;
  -webkit-animation: gradient 15s ease infinite;
  animation: gradient 15s ease infinite;
            -ms-overflow-style: scrollbar;
		zoom:0.73;
        }
@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
        html {
            box-sizing: border-box;
        }
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }
        body {
            background-color: whitesmoke;
        }
        body.is-preload *,
        body.is-preload *:before,
        body.is-preload *:after {
            -moz-animation: none !important;
            -webkit-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
            -moz-transition: none !important;
            -webkit-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
        }
        /* Type */
        html {
            font-size: 11pt;
        }
       
        body {
            color: whitesmoke;
        }
        body,
        input,
        select,
        textarea {
            font-family: "Merriweather", Georgia, serif;
            font-weight: 200;
            font-size: 0.8rem;
          
        }
        a {
            -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            border-bottom: dotted 1px;
            text-decoration: none;
        }
        a:hover {
            border-bottom-color: transparent;
        }
        @charset "UTF-8";
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
        HTML {
            font-size: medium;
            font-family: Garamond
        }
        BODY {
            background: black font-family: 'Open Sans', sans-serif;
            font-weight: 150;
         
            color: #A7A1AE;
            background-color: #1F2739;
        }
        h1 {
            font-size: 2em;
            font-weight: 300;
         
            text-align: left;
            color: #4DC3FA;
        }
        p {
            color: grey;
        }
        A {
            text-decoration: none color:black;
            overflow-wrap: break-word;
        }
        A:hover {
            color: red;
            background: whitesmoke;
            border-radius: 8px;
            padding-left: 3px;
            padding-right: 3px;
        }
        TABLE.fancy {
            background: #fffefe;
            border-left: 3px solid;
            border-collapse: collapse;
            margin: 15px 0;
            font-size: 0.8em;
            font-family: sans-serif;
            min-width: 250px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
            border-top: 1px solid;
            border-bottom: 0px solid;
            border-color: #FFF;
            overflow-y: scroll;
            width: 80%;
            display: table;
            padding: 0 0 8em 0;
overflow-wrap: break-word;
        }
        TABLE.fancy TD {
            border-right: 1px solid;
            border-bottom: 1px solid;
            border-color: #FFF;
            text-align: left;
            padding-right: 2%px;
            padding-bottom: 2%;
            padding-top: 2%;
            padding-left: 2%;
            border: 4px solid gold !important;
            font-size: 16px;
            letter-spacing: 1px;
            font-weight: 570;
            line-height: 18px;
            text-decoration: none !important;
            text-transform: uppercase;
            background: #07122daf !important;
            color: black !important;
            cursor: pointer;
            justify-content: center;
            padding: 30px 50px;
            height: 55px;
            text-align: center;
            white-space: normal;
            border-radius: 10px;
            min-width: 10em;
            padding: .9em .9em 0;
            box-shadow: 0 0 5px;
            margin: 1em;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 20px;
overflow-wrap: break-word;
        }
        TABLE.fancy tr:nth-child(odd) {
            background-color: #323C50;
        }
        TABLE.fancy tr:nth-child(even) {
            background-color: #2C3446;
        }
        TABLE.fancy th {
            background-color: #1F2739;
        }
        TABLE.fancy td,
        TABLE.fancy th {
            padding-bottom: 2%;
            padding-top: 2%;
            padding-left: 2%;
        }
        TABLE.fancy tr:hover {
            background-color: #464A52;
            -webkit-box-shadow: 0 6px 6px -6px #0E1119;
            -moz-box-shadow: 0 6px 6px -6px #0E1119;
            box-shadow: 0 6px 6px -6px #0E1119;
        }
        TABLE.fancy td:hover {
            background-color: #FFF842;
            color: #403E10;
            font-weight: bold;
            box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
            transform: translate3d(6px, -6px, 0);
            transition-delay: 0s;
            transition-duration: 0.4s;
            transition-property: all;
            transition-timing-function: line;
        }
        @media (max-width: 800px) {
            TABLE.fancy td:nth-child(4),
            TABLE.fancy th:nth-child(4) {
                display: none;
            }
        }
        TABLE.fancy TD.no-right {
            border-right: 0px
        }
        TABLE.fancy TD.right {
            text-align: left
        }
        TABLE.fancy TD.left {
            text-align: center
        }
        TABLE.fancy a {
            color: yellow;
        }
        TABLE.fancy TH {
            border-right: 1px solid;
            border-bottom: 1px solid;
            text-align: left;
            background: black;
            color: #FFF;
            border-color: #FFF;
            font-weight: bold;
            padding: 12px 15px;
        }
        .anchor {
            font-weight: bold;
            border-top: 0px solid;
            text-align: left;
            border-bottom: 1px solid;
            background: black;
            color: #FFF
        }
        .dark-blue {
            font-weight: bold;
            border-top: 0px solid;
            text-align: left;
            border-bottom: 1px solid;
            background: black;
            color: #FFF
        }
        .no-top-border {
            border-top: 0px
        }
        .centered {
            margin: auto
        }
        .rZ {
            text-align: right
        }
        .row2 {
            background: #D3D3E1
        }
@import url(//fonts.googleapis.com/css?family=PT+Sans);
body {
    margin: 0px;
    font-family: 'PT Sans', Helvetica, 'Helvetica Neuve', Arial, Tahoma, sans-serif;
    font-size: 17px;
    color: #333;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222;
    margin: 0 0 20px;
}
p,
ul,
ol,
table,
pre,
dl {
    margin: 0 0 20px;
}
h1,
h2,
h3 {
    line-height: 1.1;
}
h1 {
    font-size: 28px;
}
h2 {
    color: #393939;
}
h3,
h4,
h5,
h6 {
    color: #494949;
}
a {
    color: #39c;
    font-weight: 400;
    text-decoration: none;
}
a small {
    font-size: 11px;
    color: #777;
    margin-top: -0.6em;
    display: block;
}
.wrapper {
    width: 860px;
    margin: 0 auto;
}
blockquote {
    border-left: 1px solid #e5e5e5;
    margin: 0;
    padding: 0 0 0 20px;
    font-style: italic;
}
code,
pre {
    color: #333;
    font-size: 12px;
}
pre {
    padding: 8px 15px;
    background: #f8f8f8;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th,
td {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid #e5e5e5;
}
dt {
    color: #444;
    font-weight: 700;
}
th {
    color: #444;
}
img {
    max-width: 100%;
}
header {
    width: 270px;
    float: left;
    position: fixed;
}
header ul {
    list-style: none;
    height: 40px;
    padding: 0;
    background: #eee;
    background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd));
    background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    border-radius: 5px;
    border: 1px solid #d2d2d2;
    box-shadow: inset #fff 0 1px 0,
    inset rgba(0, 0, 0, 0.03) 0 -1px 0;
    width: 270px;
}
header li {
    width: 89px;
    float: left;
    border-right: 1px solid #d2d2d2;
    height: 40px;
}
header ul a {
    line-height: 1;
    font-size: 11px;
    color: #999;
    display: block;
    text-align: center;
    padding-top: 6px;
    height: 40px;
}
strong {
    color: #222;
    font-weight: 700;
}
header ul li+li {
    width: 88px;
    border-left: 1px solid #fff;
}
header ul li+li+li {
    border-right: none;
    width: 89px;
}
header ul a strong {
    font-size: 14px;
    display: block;
    color: #222;
}
section {
    width: 500px;
    float: right;
    padding-bottom: 50px;
}
small {
    font-size: 11px;
}
hr {
    border: 0;
    background: #e5e5e5;
    height: 1px;
    margin: 0 0 20px;
}
footer {
    width: 270px;
    float: left;
    position: fixed;
    bottom: 50px;
}
@media print,
screen and (max-width: 960px) {
    div.wrapper {
        width: auto;
        margin: 0;
    }
    header,
    section,
    footer {
        float: none;
        position: static;
        width: auto;
    }
    header {
        padding-right: 320px;
    }
    section {
        border: 1px solid #e5e5e5;
        border-width: 1px 0;
        padding: 20px 0;
        margin: 0 0 20px;
    }
    header a small {
        display: inline;
    }
    header ul {
        position: absolute;
        right: 50px;
        top: 52px;
    }
}
@media print,
screen and (max-width: 720px) {
    body {
        word-wrap: break-word;
    }
    header {
        padding: 0;
    }
    header ul,
    header p.view {
        position: static;
    }
    pre,
    code {
        word-wrap: normal;
    }
}
@media print,
screen and (max-width: 480px) {
    body {
        padding: 15px;
    }
    header ul {
        display: none;
    }
}
@media print {
    body {
        padding: 0.4in;
        font-size: 12pt;
        color: #444;
    }
}
#wrapper {
    padding: 1em;
}
.ca-menu {
    list-style: none;
    padding: 0;
    margin: 20px auto;
}
.nav-list {
    height: 50%;
    margin: auto 0;
}
div.clear {
    clear: both;
}
        /*]]>*/
    </style>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="3" summary="file table" class="fancy centered">
<tr><td colspan="1" class="dark-blue" style="text-align: center"><b>Folders</b></td></tr>
<tr><td class="left"><a href="./right.html" target="rframe">&lt;RETURN TO NAVIGATION&gt;</a></td></tr>
<tr class="row2"><td class="left"><a href="3D%20Box/right.html" target="rframe">3D Box</a></td></tr>
<tr><td class="left"><a href="3D%20Hover%20Effect%20-%20Alita%20Card/right.html" target="rframe">3D Hover... Card</a></td></tr>
<tr class="row2"><td class="left"><a href="Accordion%20Menu%202/right.html" target="rframe">Accordion Menu 2</a></td></tr>
<tr><td class="left"><a href="Accordion%20Menu%204/right.html" target="rframe">Accordion Menu 4</a></td></tr>
<tr class="row2"><td class="left"><a href="Accordion%20Menu%205/right.html" target="rframe">Accordion Menu 5</a></td></tr>
<tr><td class="left"><a href="Accordion%20Menu%206/right.html" target="rframe">Accordion Menu 6</a></td></tr>
<tr class="row2"><td class="left"><a href="Animation%20-%20Nice%20Weather/right.html" target="rframe">Animatio...ather</a></td></tr>
<tr><td class="left"><a href="Animation%20Button/right.html" target="rframe">Animation Button</a></td></tr>
<tr class="row2"><td class="left"><a href="Animation%20Button%202/right.html" target="rframe">Animatio...ton 2</a></td></tr>
<tr><td class="left"><a href="Animation%20Check/right.html" target="rframe">Animation Check</a></td></tr>
<tr class="row2"><td class="left"><a href="Array%20Accordion/right.html" target="rframe">Array Accordion</a></td></tr>
<tr><td class="left"><a href="Array%20Card%20Flip/right.html" target="rframe">Array Card Flip</a></td></tr>
<tr class="row2"><td class="left"><a href="Array%20Slice%20Animation/right.html" target="rframe">Array Sl...ation</a></td></tr>
<tr><td class="left"><a href="Array.from%20Animation/right.html" target="rframe">Array.fr...ation</a></td></tr>
<tr class="row2"><td class="left"><a href="Before%20&amp;%20After%20Comparison/right.html" target="rframe">Before &amp;...rison</a></td></tr>
<tr><td class="left"><a href="Bootstrap%20Sidebar%20Menu/right.html" target="rframe">Bootstra... Menu</a></td></tr>
<tr class="row2"><td class="left"><a href="Calculator/right.html" target="rframe">Calculator</a></td></tr>
<tr><td class="left"><a href="Card%20Flip%201/right.html" target="rframe">Card Flip 1</a></td></tr>
<tr class="row2"><td class="left"><a href="Card%20Slide%20In%20Hover/right.html" target="rframe">Card Sli...Hover</a></td></tr>
<tr><td class="left"><a href="Dark%20Light%20Menu/right.html" target="rframe">Dark Light Menu</a></td></tr>
<tr class="row2"><td class="left"><a href="Diffirent%20Animation/right.html" target="rframe">Diffiren...ation</a></td></tr>
<tr><td class="left"><a href="Dna%20Animation/right.html" target="rframe">Dna Animation</a></td></tr>
<tr class="row2"><td class="left"><a href="Eyes%20Animation/right.html" target="rframe">Eyes Animation</a></td></tr>
<tr><td class="left"><a href="factorial%20calculation/right.html" target="rframe">factoria...ation</a></td></tr>
<tr class="row2"><td class="left"><a href="Find%20The%20Largest%20And%20Smallest%20Number/right.html" target="rframe">Find The...umber</a></td></tr>
<tr><td class="left"><a href="Growing%20Card%20Flip/right.html" target="rframe">Growing ... Flip</a></td></tr>
<tr class="row2"><td class="left"><a href="Hover%20Effect/right.html" target="rframe">Hover Effect</a></td></tr>
<tr><td class="left"><a href="Hover%20Effect%202/right.html" target="rframe">Hover Effect 2</a></td></tr>
<tr class="row2"><td class="left"><a href="Hypotenuse%20calculation/right.html" target="rframe">Hypotenu...ation</a></td></tr>
<tr><td class="left"><a href="Image%20Slider/right.html" target="rframe">Image Slider</a></td></tr>
<tr class="row2"><td class="left"><a href="Information%20Card%20Slider/right.html" target="rframe">Informat...lider</a></td></tr>
<tr><td class="left"><a href="JavaScript%20To%20Do%20List/right.html" target="rframe">JavaScri... List</a></td></tr>
<tr class="row2"><td class="left"><a href="JS%20CLASS%20-%20Login%20System/right.html" target="rframe">JS CLASS...ystem</a></td></tr>
<tr><td class="left"><a href="JS%20Promise%20Login%20System/right.html" target="rframe">JS Promi...ystem</a></td></tr>
<tr class="row2"><td class="left"><a href="Library%20System/right.html" target="rframe">Library System</a></td></tr>
<tr><td class="left"><a href="Line%20Menu%20Animation/right.html" target="rframe">Line Men...ation</a></td></tr>
<tr class="row2"><td class="left"><a href="Loding%20Animation/right.html" target="rframe">Loding Animation</a></td></tr>
<tr><td class="left"><a href="Marvel%20Tabs/right.html" target="rframe">Marvel Tabs</a></td></tr>
<tr class="row2"><td class="left"><a href="Mouse%20Scroll/right.html" target="rframe">Mouse Scroll</a></td></tr>
<tr><td class="left"><a href="Name%20Animation/right.html" target="rframe">Name Animation</a></td></tr>
<tr class="row2"><td class="left"><a href="Only%20Css%20Menu/right.html" target="rframe">Only Css Menu</a></td></tr>
<tr><td class="left"><a href="Pomodora%20Timer/right.html" target="rframe">Pomodora Timer</a></td></tr>
<tr class="row2"><td class="left"><a href="Prime%20Number/right.html" target="rframe">Prime Number</a></td></tr>
<tr><td class="left"><a href="Quick%20Autocomplete/right.html" target="rframe">Quick Au...plete</a></td></tr>
<tr class="row2"><td class="left"><a href="Radar/right.html" target="rframe">Radar</a></td></tr>
<tr><td class="left"><a href="Rectangle%20Area%20and%20Circumference%20Calculation/right.html" target="rframe">Rectangl...ation</a></td></tr>
<tr class="row2"><td class="left"><a href="Responsive%20Accordion%20Slider/right.html" target="rframe">Responsi...lider</a></td></tr>
<tr><td class="left"><a href="Rock%20Paper%20Scissors/right.html" target="rframe">Rock Pap...ssors</a></td></tr>
<tr class="row2"><td class="left"><a href="SCSS%20and%20JS%20Tabs/right.html" target="rframe">SCSS and JS Tabs</a></td></tr>
<tr><td class="left"><a href="spam%20find/right.html" target="rframe">spam find</a></td></tr>
<tr class="row2"><td class="left"><a href="Tab%20-%20Tesla%20Car%20Models/right.html" target="rframe">Tab - Te...odels</a></td></tr>
<tr><td class="left"><a href="Tabs%20Styled%201/right.html" target="rframe">Tabs Styled 1</a></td></tr>
<tr class="row2"><td class="left"><a href="Tabs%20Styled%202/right.html" target="rframe">Tabs Styled 2</a></td></tr>
<tr><td class="left"><a href="TEAM%20CARDS/right.html" target="rframe">TEAM CARDS</a></td></tr>
<tr class="row2"><td class="left"><a href="Text%20Animation/right.html" target="rframe">Text Animation</a></td></tr>
<tr><td class="left"><a href="To%20Do%20List/right.html" target="rframe">To Do List</a></td></tr>
<tr class="row2"><td class="left"><a href="Tooltip/right.html" target="rframe">Tooltip</a></td></tr>
<tr><td class="left"><a href="Users%20(Modal%20Box)/right.html" target="rframe">Users (M... Box)</a></td></tr>
</table>
<br>


</body>
</html>