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