Commit 41971077 authored by Andrey Cherepanov's avatar Andrey Cherepanov

New design of indexhtml

parent b3384106
components/indexhtml/images/bullet.png

169 Bytes | W: | H:

components/indexhtml/images/bullet.png

173 Bytes | W: | H:

components/indexhtml/images/bullet.png
components/indexhtml/images/bullet.png
components/indexhtml/images/bullet.png
components/indexhtml/images/bullet.png
  • 2-up
  • Swipe
  • Onion skin
components/indexhtml/images/twitter.png

2.26 KB | W: | H:

components/indexhtml/images/twitter.png

1.58 KB | W: | H:

components/indexhtml/images/twitter.png
components/indexhtml/images/twitter.png
components/indexhtml/images/twitter.png
components/indexhtml/images/twitter.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -5,6 +5,7 @@
<title>@NAME@ @VERSION@ @STATUS@</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link href="images/product.png" rel="shortcut icon" type="image/png" />
</head>
<body>
......@@ -16,30 +17,43 @@
</div>
<!-- Disto name -->
<div id="title">@NAME@ @VERSION@ @STATUS@</div>
<table border="0" width="100%" id="header">
<tr>
<td><img src="images/product-logo.png" alt="@NAME@ @VERSION@ @STATUS@" id="product-logo"></td>
<td id="search">
<!-- Search pane -->
<form action="http://www.google.com/search" method="get">
<input type="hidden" name="cx" value="009267546552065786736:rwjixpf6cv8">
<input id="search_string" type="text" name="q" placeholder="Search in Internet">
</form>
</td>
</tr></table>
<div id="main">
<!-- Links columns -->
<table border="0" width="100%">
<table border="0" width="100%" cellspacing="0">
<tr>
<th width="33%"><img src="images/documentation.png" alt="Documentation"></th>
<th width="33%"><img src="images/altlinux-logo.png" alt="Company" class="icon_big"></th>
<th width="34%"><img src="images/community.png" alt="Community" class="icon"></th>
<th width="33%"><img src="images/altlinux-logo.png" alt="Company"></th>
<th width="34%"><img src="images/community.png" alt="Community"></th>
</tr>
<tr>
<td width="33%" class="column"> <!-- First column: documentation -->
<td width="33%" class="column" id="left-pane"> <!-- First column: documentation -->
<ul>
<li><a href="file:///usr/share/doc/documentation/index.html">User Manual</a></li>
<li><a href="file:///usr/share/doc/alt-docs/modules/index.html">Local Documentation</a></li>
<li><a href="documentation/index.html">User Manual</a></li>
<li><a href="http://docs.altlinux.org">Online Documentation</a></li>
<li><a href="http://shop.altlinux.ru/index.php?categoryID=559">Books</a></li>
<li><a href="http://altlinux.org/">Wiki</a></li>
<li><a href="http://altlinux.org/FAQ">FAQ</a></li>
<li><a href="http://altlinux.org/Features">ALT Linux Features</a></li>
</ul>
</td>
<td width="33%" id="central_pane"> <!-- Second column: Company -->
<td width="33%" class="column" id="central_pane"> <!-- Second column: Company -->
<ul>
<li><a href="http://www.altlinux.com">ALT Linux Website</a></li>
<li><a href="http://shop.altlinux.ru">Internet Shop</a></li>
......@@ -50,7 +64,7 @@
</ul>
</td>
<td width="34%" class="column"> <!-- Third column: community -->
<td width="34%" class="column" id="right-pane"> <!-- Third column: community -->
<ul>
<li><a href="http://lists.altlinux.org">Mailing Lists</a></li>
<li><a href="http://forum.altlinux.org">User Forum</a></li>
......@@ -63,23 +77,14 @@
</tr>
<tr><td colspan="3" id="search">
<!-- Search pane -->
<form action="http://www.google.com/search" method="get">
<img src="images/magnifier.png" alt="Search on online resources">
<input type="hidden" name="cx" value="009267546552065786736:rwjixpf6cv8">
<input id="search_string" type="text" name="q" size="35">
<input id="search_button" type="submit" name="sa" value="Search in Internet">
</form>
</td></tr>
<!-- Social networks -->
<tr><td colspan="3" id="social">We will be glade to meet you on the following social networks:</td></tr>
<tr>
<th><a href="http://twitter.com/#!/altlinuxru" class="image"><img src="images/twitter.png" alt="Twitter" class="banner"></a></th>
<th><a href="https://www.facebook.com/group.php?gid=136328550579" class="image"><img src="images/facebook.png" alt="Facebook" class="banner"></a></th>
<th><a href="http://vkontakte.ru/club667081" class="image"><img src="images/vkontakte.png" alt="VKontakte" class="banner"></a></th>
</tr>
<tr><td colspan="3" id="social-pane">
<div id="social">We will be glade to meet you on the following social networks:</div>
<div id="social-icons">
<a href="http://twitter.com/#!/altlinuxru" class="image"><img src="images/twitter.png" alt="Twitter" class="banner"></a>
<a href="https://www.facebook.com/group.php?gid=136328550579" class="image"><img src="images/facebook.png" alt="Facebook" class="banner"></a>
<a href="http://vkontakte.ru/club667081" class="image"><img src="images/vkontakte.png" alt="VKontakte" class="banner"></a>
</div></td></tr>
</table>
......@@ -87,7 +92,7 @@
<div id="footer">
<table border="0" width="100%">
<tr>
<td id="left_footer">&copy; 2011 ALT Linux. All rights reserved.</td>
<td id="left_footer">&copy; 2012 ALT Linux. All rights reserved.</td>
<td id="right_footer">
Tel/fax: +7 (495) 662-3883<br>
119334, Russian Federation, Moscow, 5-th Donskoy proezd, 15, build 6.
......
......@@ -2,9 +2,10 @@
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Disto name in title -->
<title>Альт Линукс 6.0 Кентавр</title>
<title>Альт Линукс 7.0 Кентавр</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link href="images/product.png" rel="shortcut icon" type="image/png" />
</head>
<body>
......@@ -16,30 +17,43 @@
</div>
<!-- Disto name -->
<div id="title">Альт Линукс 6.0 Кентавр</div>
<table border="0" width="100%" id="header">
<tr>
<td><img src="images/product-logo.png" alt="Альт Линукс 7.0 Кентавр" id="product-logo"></td>
<td id="search">
<!-- Search pane -->
<form action="http://www.google.com/search" method="get">
<input type="hidden" name="cx" value="009267546552065786736:rwjixpf6cv8">
<input id="search_string" type="text" name="q" placeholder="Поиск в Интернете">
</form>
</td>
</tr></table>
<div id="main">
<!-- Links columns -->
<table border="0" width="100%">
<table border="0" width="100%" cellspacing="0">
<tr>
<th width="33%"><img src="images/documentation.png" alt="Документация"></th>
<th width="33%"><img src="images/altlinux-logo.png" alt="Компания" class="icon_big"></th>
<th width="34%"><img src="images/community.png" alt="Сообщество" class="icon"></th>
<th width="33%"><img src="images/altlinux-logo.png" alt="Компания"></th>
<th width="34%"><img src="images/community.png" alt="Сообщество"></th>
</tr>
<tr>
<td width="33%" class="column"> <!-- First column: documentation -->
<td width="33%" class="column" id="left-pane"> <!-- First column: documentation -->
<ul>
<li><a href="file:///usr/share/doc/documentation/index.html">Руководство пользователя</a></li>
<li><a href="file:///usr/share/doc/alt-docs/modules/index.html">Локальная документация</a></li>
<li><a href="documentation/index.html">Руководство пользователя</a></li>
<li><a href="http://docs.altlinux.org">Онлайновая документация</a></li>
<li><a href="http://shop.altlinux.ru/index.php?categoryID=559">Книги</a></li>
<li><a href="http://altlinux.org/">Wiki</a></li>
<li><a href="http://altlinux.org/FAQ">FAQ</a></li>
<li><a href="http://altlinux.org/Features">Особенности ALT Linux</a></li>
</ul>
</td>
<td width="33%" id="central_pane"> <!-- Second column: Company -->
<td width="33%" class="column" id="central-pane"> <!-- Second column: Company -->
<ul>
<li><a href="http://www.altlinux.ru">Сайт компании</a></li>
<li><a href="http://shop.altlinux.ru">Интернет-магазин</a></li>
......@@ -50,7 +64,7 @@
</ul>
</td>
<td width="34%" class="column"> <!-- Third column: community -->
<td width="34%" class="column" id="right-pane"> <!-- Third column: community -->
<ul>
<li><a href="http://lists.altlinux.org">Списки рассылки</a></li>
<li><a href="http://forum.altlinux.org">Форум пользователей</a></li>
......@@ -63,23 +77,14 @@
</tr>
<tr><td colspan="3" id="search">
<!-- Search pane -->
<form action="http://www.google.com/search" method="get">
<img src="images/magnifier.png" alt="Поиск по ресурсам ALT Linux">
<input type="hidden" name="cx" value="009267546552065786736:rwjixpf6cv8">
<input id="search_string" type="text" name="q" size="35">
<input id="search_button" type="submit" name="sa" value="Поиск в Интернете">
</form>
</td></tr>
<!-- Social networks -->
<tr><td colspan="3" id="social">Мы рады встретиться с вами в социальных сетях:</td></tr>
<tr>
<th><a href="http://twitter.com/#!/altlinuxru" class="image"><img src="images/twitter.png" alt="Twitter" class="banner"></a></th>
<th><a href="https://www.facebook.com/group.php?gid=136328550579" class="image"><img src="images/facebook.png" alt="Facebook" class="banner"></a></th>
<th><a href="http://vkontakte.ru/club667081" class="image"><img src="images/vkontakte.png" alt="ВКонтакте" class="banner"></a></th>
</tr>
<tr><td colspan="3" id="social-pane">
<div id="social">Мы рады встретиться с вами в социальных сетях:</div>
<div id="social-icons">
<a href="http://twitter.com/#!/altlinuxru" class="image"><img src="images/twitter.png" alt="Twitter" class="banner"></a>
<a href="https://www.facebook.com/group.php?gid=136328550579" class="image"><img src="images/facebook.png" alt="Facebook" class="banner"></a>
<a href="http://vkontakte.ru/club667081" class="image"><img src="images/vkontakte.png" alt="ВКонтакте" class="banner"></a>
</div></td></tr>
</table>
......@@ -87,7 +92,7 @@
<div id="footer">
<table border="0" width="100%">
<tr>
<td id="left_footer">&copy; ALT Linux, 2011. Все права защищены.</td>
<td id="left_footer">&copy; ALT Linux, 2012. Все права защищены.</td>
<td id="right_footer">
Телефон/факс: +7 (495) 662-3883<br>
Москва, 5-й Донской проезд, д. 15, стр. 6
......
......@@ -8,11 +8,11 @@ body {
}
div#content {
background: white;
border: solid 6px #d0d0d0;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 7px;
-khtml-border-radius: 12px;
border: solid 10px #e6e6e6;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-khtml-border-radius: 16px;
padding: 0;
position: relative;
width: 780px;
......@@ -44,12 +44,38 @@ div#top-site {
padding: 4px;
}
div#main {
padding: 12px;
padding: 10px 0px 20px 0px;
}
table#header {
padding-left: 12px;
padding-right: 12px;
}
td#search {
width: 99%;
text-align: right;
}
input#search_string {
position: relative;
vertical-align: middle;
background: white;
padding: 4px;
padding-right: 24px;
border: solid 1px #aeaeae;
width: 350px;
background: url('images/search.png') no-repeat 357px 2px;
}
input#search_button {
margin-top: 12px;
vertical-align: top;
font-size: 130%;
}
th {
vertical-align: bottom;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
img.icon {
width: 48px;
......@@ -60,64 +86,61 @@ img.icon_big {
height: 60px;
}
img.banner {
width: 130px;
height: 30px;
margin: 6px;
width: 32px;
height: 32px;
margin: 5px;
}
li {
line-height: 1.35em;
}
td#central_pane {
border-left: dotted 1px #ccc;
border-right: dotted 1px #ccc;
text-align: center;
td#left-pane {
background-color: #dbeef6;
}
.column {
text-align: center;
td#central-pane {
background-color: #ffe57e;
}
td#search {
text-align: center;
padding: 12px;
td#right-pane {
background-color: #f2f2f2;
}
input#search_string {
position: relative;
vertical-align: top;
margin-top: 12px;
font-size: 130%;
background: white;
border: solid 1px #657fbe;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
.column {
text-align: center;
border-top: 2px solid #0088bf;
background: url('images/section.png') no-repeat 112px 0px;
padding: 9px 0 5px 0;
}
input#search_button {
margin-top: 12px;
vertical-align: top;
font-size: 130%;
td#social-pane {
padding: 14px 12px 2px 12px;
}
td#social {
text-align: center;
div#social {
text-align: left;
border-bottom: dotted 1px #ccc;
font-size: xx-small;
padding-bottom: 10px;
color: #999;
}
div#social-icons {
text-align: left;
padding-top: 10px;
}
td#left_footer, td#right_footer {
font-size: xx-small;
color: #999;
vertical-align: bottom;
padding-top: 15px;
padding: 2px 12px 0px 12px;
}
td#right_footer {
text-align: right;
}
ul li {
text-align: left;
list-style: square url('bullet.png');
list-style: square url('images/bullet.png');
}
a:link, a:visited {
text-decoration: none;
color: #2e7194;
color: black;
}
a:hover {
text-decoration: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment