weblab/stylesheet.html at master · NewEchelon/weblab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>

        <html>
<head>
    <title>Layout Demo</title>
    <style>


       body{
           background-color:lightblue;
           padding:0;
           margin:0;
       }
.clearfix{
    clear:both;

}

#wrapper{
    background-color:lightblue;
    z-index:1;
}

#header{
    opacity:1;
    position:relative;
    height:30px;
    background-color:powderblue;
    margin:0;
    padding:0;
    text-align:center;

}

       #header:hover {
           opacity:.3;

           -webkit-transition: all .75s ease-in-out;
           -moz-transition: all .75s ease-in-out;
           -o-transition: all .75s ease-in-out;
           transition: all .75s ease-in-out;
       }


        #footer{
            position:absolute;

            background-color:powderblue;
            bottom:0;
            margin:0;
            padding:0;
            text-align:center;
            width:100%;
            height:20px;

        }

        #nav{
            background-color: #e0e6db;
            float:left;
            width:100px;


        }


        #content{

            background-color:whitesmoke;
            color:#333;
            margin-left:100px;
            padding:.5% 0 0 .5%;
            border:3px solid;
          overflow:auto;
            border-radius:20px;

            -moz-box-shadow: 5px 5px 5px 5px #9EB8E6;
            -webkit-box-shadow: 5px 5px 5px #9EB8E6;
            box-shadow: 5px 5px 5px #9EB8E6;

        }

       a{
       text-decoration:none;
       }

       a:hover{
           color:#666;
       }

       a:visited{
        text-decoration:none;

       }
    </style>


</head>

<body>


    <div id="header"> HEADER
    </div>
<div id="wrapper">
    <div id="nav">
        <ul>
            <li> <a href="">item1</a></li>
            <li> <a href="">item2</a></li>
            <li> <a href="">item3</a></li>
            <li> <a href="">item4</a></li>
            <li> <a href="">item5</a></li>
            <li> <a href="">item6</a></li>


        </ul>
    </div>

    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur consequuntur, corporis earum error
            fugiat illum ipsum, laboriosam maxime molestias nam, nisi nulla omnis saepe sed soluta suscipit unde
            velit.</p>

        <p>Architecto distinctio eaque, eligendi explicabo impedit iusto minima modi nihil nisi perspiciatis quidem
            sapiente tempora tempore vel veniam vitae voluptate. Accusamus adipisci aliquam assumenda fuga laborum
            maxime nisi tempore voluptatum!</p>

        <p>Ab accusamus alias cumque distinctio dolores eaque est fuga impedit inventore ipsam maiores neque pariatur
            quibusdam repellat, ullam! Ad delectus illum incidunt iste non praesentium, quo voluptas! Aliquam,
            molestias, quod.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi, asperiores debitis deleniti distinctio
            expedita explicabo fugit nam nulla, perferendis praesentium provident quaerat sed ullam voluptatum? Aliquid
            fugit quasi tenetur.</p>

        <p>Dolorum non, perspiciatis. Architecto dignissimos dolor ea fugit itaque iusto obcaecati, odit perferendis,
            provident quam qui rem totam vitae. Aspernatur dolorem, doloremque incidunt minima mollitia vero voluptate.
            Assumenda, consectetur, eligendi.</p>

        <p>Autem blanditiis est exercitationem harum minima numquam. Aliquam consequatur dolores dolorum et fuga magnam
            maxime nisi non perspiciatis porro quo reiciendis repellendus reprehenderit sint, tempore unde vero.
            Architecto possimus, sed!</p>


        <div class="clearfix"> </div>
    </div>
</div>

    <div id="footer">
        FOOTER
    </div>
</body>


</html>