Bymas | Оцените просто дизайн

Зделано на андроид устройстве.
Цены и сам проект просто выдуманные.
Делал 2 часа.
Использовано 4 программы.

Изображение

------

69201_IMG_20191229_060318.jpg (156.4 Kb)
Скачиваний: 102

________
посл. ред. 29.12.2019 в 07:10; всего 3 раз(а); by serwer1

Хотелось бы по более что-то увидеть

Я такое и нафотожопить смогу

Первое – надпись "Вход" зелёного цвета, чтобы её прочесть, нужно поднапрячь глаза.
Второе – сплошной Lobster, имеется ввиду использование одного семейства шрифтов, когда можно взять одно семейство шрифтов для заголовков, второе для текста и подсказок внутри текстовых полей, третье для основного текста на странице.
Третье – аббревиатура валюты UAH (Hryvnia).
Четвёртое – иконки, расположенные внизу второго скриншота, ну уж слишком тусклые.

nefakt, суть в том что я делал на телефоне.

Severus, спасибо за подсказки.

Шляпа

Уж больно все просто. Три блока, а занимают 100% экрана.

И как написали выше - этого мало. Есть другие сверстаные страницы?)

serwer1 (29.12.2019 в 08:04)
nefakt, суть в том что я делал на телефоне.

Конеш не 100% но

Делал с планшета (так что не важно с чего)

Изображение

------

69203_Screenshot_20191229143904.png (688.2 Kb)
Скачиваний: 99

serwer1, Так не проще ли



 <style>

 #tstTable{

   margin-left:-12px;

   position:relative;

   height:290px;

   width:800px;

 }

 #tstTable td{border:none 0 transparent!important;}

 #tstTable #First + td{

   width:593px;

   height:290px;

   background:url(http://s3.uploads.ru/eCu5t.png  );

 }

 #tstTable #First,#tstTable #First + td{

   padding:0!important;

 }

 #tstTable table[id]{

   width:100%;

   position:absolute;

   display:none;

 }

 #tstTable .navbuttons td{

   padding: 10px;

   cursor:pointer;

   text-align:center;

   font-weight:700;

   font-size:1.1em;

   border:none 0 transparent !important;

 } 

 .tabindex {

   height: 240px;

   width: 100%;

   position: relative;

 }

 .tabindex p {

   font-weight: 700;

 }

 #tstTable #First a {

   display: block;

   width: 206px;

   background: url(http://s7.uploads.ru/5tOku.png  );

   color: #fff;

   text-align: center;

   padding: 12px 0;

   font-weight: 700;

   font-size: 14px;

 }

 #tstTable #First a:hover{

   background:url(http://s7.uploads.ru/u5cqo.png  );

 }

 </style>

  

 <table id="tstTable" cellspacing=0 cellpadding=0>

 <tr>

 <td style="width:206px;" id="First">

   <a href="адрес_ссылки">Ссылка</a>

   <a href="адрес_ссылки">Ссылка</a>

   <a href="адрес_ссылки">Ссылка</a>

   <a href="адрес_ссылки">Ссылка</a>

   <a href="адрес_ссылки">Ссылка</a>

   <a href="адрес_ссылки">Ссылка</a>

   <a href="адрес_ссылки">Ссылка</a>

 </td>

 <td  align=center>

  

 <table class="navbuttons"><tr>

   <td id="btn1">Важное</td>

   <td id="btn2">Администрация</td>

   <td id="btn3">Квесты</td>

   <td id="btn4">Объявления</td>

 </tr></table>

  

 <div class="tabindex">

  

 <table id="tbl1"><!-- Важное --><tr>

   <td>

     <center>

     Первая вкладкa, Текст...

  

     </center>

   </td>

 </tr></table>

  

 <table id="tbl2"><!-- Администрация --><tr>

   <td>

     2-я Вкладка 

   </td>

 </tr></table>

  

 <table id="tbl3"><!-- Лучшее --><tr>

   <td>

     3-я Вкладка

   </td>

 </tr></table>

  

 <table id="tbl4"><!-- Объявления --><tr>

   <td>

     4-Я вкладка

   </td>

 </tr></table>

  

 </td></tr>

 </table>

  

  

 <script type="text/javascript">

 $(function(){

   $("#tstTable #tbl1").fadeIn(200);

   $(".navbuttons td#btn1").addClass("active");

   $(".navbuttons td").click(function(){

     var num=$(this).attr("id");

     if(num)num=num.split("btn")[1];

     $(".navbuttons td").removeClass("active");

     $(this).addClass("active");

     $("#tstTable table[id]").fadeOut(200);

     $("#tstTable table[id='tbl"+num+"']").fadeIn(200);

   });

 })

 </script>

Изображение

------

69204_kxsPf2PaHgbH.png (107.0 Kb)
Скачиваний: 104