Ajax Loader
×

Untitled

HTML 
 
1
 
2
<!DOCTYPE html>
3
<head>
4
  <title>Hunta</title>
5
  <meta charset="utf-8">
6
  <link rel="stylesheet" href="css/main.css">
7
</head>
8
<body>
9
<div class="page">
10
<div class="top">
11
  <div class="logo"><a href="#"><img src="img/logo.png"></a></div>
12
 
13
  <div class="button"><a href="#" class="button1">Запилить</a></div>
14
 
15
  <ul class="topMenu">
16
    <li><a href="#">Полезная инфа</li>
17
    <li><a href="#">Бложики</li>
18
    <li><a href="#">Почитат</li>
19
    <li><a href="#">Фичи</li>
20
  </ul>
21
  </div>
22
 
23
<div class="left">
24
<ul class="leftMenu">
25
  <li><a href="#">Хтмле</li>
26
  <li><a href="#">Фишечки</li>
27
  <li><a href="#">Ховеры</li>
28
  <li><a href="#">Полезности</li>
29
  <li><a href="#">Туториалы</li>
30
</ul>
31
</div>
32
 
33
 
34
<div class="right">
35
  <div class="block">
36
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
37
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
38
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
39
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
40
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
41
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
42
  </div>
43
</div>
44
</div>
45
</body>
 
CSS 
* {
1
* {
2
  margin: 0;
3
  padding: 0;
4
  outline: none;
5
}
6
 
7
body{
8
  background: url("../img/bg.png") #fafafa;
9
  font: 12px Arial, Tahoma, sans-serif;
10
}
11
 
12
 
13
.top{
14
width: 996px;
15
height:50px;
16
background-color: #2d3e52;
17
position: absolute;
18
}
19
 
20
 
21
.topMenu li{
22
float: right;
23
list-style-type: none;
24
padding: 0px 18px;
25
line-height: 49px;
26
}
27
 
28
.button {
29
  float: right;
30
   position: absolute;
31
     top: 17px;
32
     right: 10px;
33
}
34
 
35
.button1 {
36
  color: #fff;
37
  text-decoration: none;
38
  font-weight: bold;
39
  user-select: none;
40
  background: #f39c12;
41
  padding: 10px;
42
}
43
 
44
.button1:hover {
45
  color: #fff;
46
  background: #ffa61a;
47
}
48
 
49
.logo{
50
height: 100px;
51
width: 200px;
52
margin-left: 15px;
53
float: left;
54
}
55
 
56
.left{
57
width: 150px;
58
min-height:720px;
59
float: left;
60
background-color: #213140;
61
border-right: solid 3px #e3f1f1;
62
}
63
 
64
.leftMenu {
65
float: left;
66
list-style-type: none;
67
margin-top: 30px;
68
}
69
 
70
.right{
71
width: 849px;
72
min-height:720px;
73
float: right;
74
}
75
 
76
 
77
 
78
.page{
79
  width: 996px;
80
  margin: 35px auto;
81
  background: #fff;
82
  box-shadow: 0px 1px 3px #ddd;
83
  overflow: hidden;
84
}
85
 
86
a {
87
  text-decoration: none;
88
  color: #fff;
89
}
90
 
91
a:hover {
92
  text-decoration: none;
93
  color: #f39c12;
94
}
95
 
96
 
97
.block {
98
  color: #2C3E50;
99
  padding: 10px;
100
}
 

Untitled

CSSDeck G+