Table of Contents

XXI век - век информации,а потому очень важно уметь её искать и изучать. В этом нам помогают веб обозреватели, они же браузеры. И как только пользователь запускает заветный ярлычок, сразу же попадает на стартовую страницу. Как правило там расположены самые читаемые сайты, закладки и поисковая строка. В разных браузерах это выглядит по разному. К примеру в mozilla firefox это выглядит вот так:

firefox60-768x480.png

Safari: macos-mojave-safari-favicons-100762161-large.jpg

А вот так у меня выглядит chromium(chrome) ![Снимок экрана_2019-10-18_17-07-06.png](./assets/Снимок экрана_2019-10-18_17-07-06.png)

Как правило внешний вид стартовой страницы можно поменять в настройках или же поискать темы в магазине расширений, в тех же chrome web store и mozilla addons их хоть отбавляй.

Однако на мой взгляд всё это выглядит слишком перегружено,а потому хотелось бы чего-нибудь более минималистичного. Но ничего не мешает написать свою собственную.К тому же, стартовая страница браузера - это всего-лишь web страничка, а значит состоит всего лишь из html файла и заданых стилей в css А потому открывайте свой любимый текстовый редактор или IDE, и начинайте писать.

Капитан Очевидность подсказывает,что надо указать стандартные теги,задать title,прописать линки на css файл и задать кодировку.


<!DOCTYPE html>
<html>
   <head>
     <title>Startpage</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../css/style.css" />
   </head>
   <body>

Далее создаём контейнеры со страницами. Каждый контейнер тематический,со своим содержимым.Для примера пропишем контейнер с социальными сетями,при этом не забудь заменить стандартные ссылки на те ,которые необходимы лично тебе.



     <div class="container">
        <div class="table1">
    <!--Social Table-->
          <h3>Social</h3>
            <div class="tcontent">
<!--- You can add your personal pages to this templates-->
              <a href="https://vk.com/feed" target="_blank">vk</a>
              <a href="https://reddit.com" target="_blank">reddit</a>
              <a href="https://www.instagram.com" target="_blank">instagram</a>
              <a href="https://www.linux.org.ru/" target="_blank">LOR</a>
              <a href="https://www.opennet.ru/" target="_blank">opennet</a>

            </div>
        </div>

Аналогично прописываем другие контейнеры.Также мне захотелось добавить красивую картинку и подпись.

Картинка:

./assets/1.png

Вот этот кусочек кода запишем в самом начале в header.


<div class="img">
       <img src="../1.png" />
     </div>
     <!--Message --->
     <header id="main_header">
      Welcome to your <span id="startpage">startpage</span>  </header>

Пока это выглядит вот так: ![Снимок экрана_2019-10-18_17-35-21.png](./assets/Снимок экрана_2019-10-18_17-35-21.png)

Осталось дело за малым,будем прописывать стили.


.img {
  display: flex;
  justify-content: center;
}
img {
  height: 250px;
}
#main_header {
  text-transform: capitalize;
  text-align: center;
}
html{
  background-color: #14161B;
  color: #D5D5D5
ca}
body {
  font-family: 'Luculent', sans-serif;
  font-weight: 300;
  margin: 0px;
}

h3 {
  display: flex;
  justify-content: center;
  margin: 0px 0px 10px 0px;
  color:#E8A64F;

}

a {
  margin: auto;
  text-decoration: none;
  color: inherit;
}

a:hover {
  color:#E8A64F;
}

.tcontent {
  display: flex;
  flex-direction: column;
}

#startpage {
  color: #E8A64F;
}

#name {
  color: #93386B;
}

.table1 {
  flex:1;
}

.table2 {
  flex:1;
}
.table3 {
  flex:1;
}
.table4 {
  flex:1;
}

.container {
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin-top: 80px;
}

![Снимок экрана_2019-10-18_17-43-18.png](./assets/Снимок экрана_2019-10-18_17-43-18.png)

Не думаю ,что стоит разбирать код построчно.Скажу лишь в кратце,для тектста использован шрифт Luculent и оранжевый цвет для заголовков в тон картинки, для контейнеров прописал центрирование и равное расположение относительно друг друга.На мой взгляд это выглядело бы ещё лучше в тайловых оконных меннеджерах, по типу i3wm или bspwm.

Чтобы при запуске браузера запускалась наша кастомная страница нужно указать это в настройках. В chromium/chrome это делается вот так:

![Снимок экрана_2019-10-18_17-47-22.png](./assets/Снимок экрана_2019-10-18_17-47-22.png)

А в mozilla firefox вот так: ![Снимок экрана_2019-10-18_17-44-45.png](./assets/Снимок экрана_2019-10-18_17-44-45.png)

Вроде получилось неплохо. Ссылочка на репозиторий со всем кодом и картиночками.