diff --git a/base.css b/base.css new file mode 100644 index 0000000..098c56e --- /dev/null +++ b/base.css @@ -0,0 +1,146 @@ +@font-face { + font-family: 'exo2'; + src:url('../fonts/exo2.ttf'); +} + +body { + font: 90%/160% exo2; + color: #666; + width: 900px; + max-width: 96%; + margin: 0 auto; +} +p { + margin: 0 0 20px; +} +a { + color: #69C; + text-decoration: none; +} +a:hover { + color: #F60; +} +h1, h2, h3 { + color: #000; + line-height: 120%; + margin: 30px 0 10px; +} +h1 { + font-size: 1.7em; + color: #000; +} +h2 { + font-size: 1.4em; + border-top: solid 1px #eee; + padding-top: 20px; +} +h3 { + font-size: 1.1em; +} + +/* nav */ +.nav { + margin: 20px 0; +} +.nav ul { + margin: 0; + padding: 0; +} +.nav li { + margin: 0 5px 10px 0; + padding: 0; + list-style: none; + display: inline-block; + *display:inline; /* ie7 */ +} +.nav a { + padding: 3px 12px; + text-decoration: none; + color: #999; + line-height: 100%; +} +.nav a:hover { + color: #000; +} +.nav .current a { + background: #999; + color: #fff; + border-radius: 5px; +} + +/* right nav */ +.nav.right ul { + text-align: right; +} + +/* center nav */ +.nav.center ul { + text-align: center; +} + +@media screen and (max-width: 600px) { + .nav { + position: relative; + min-height: 40px; + } + .nav ul { + width: 180px; + padding: 5px 0; + position: absolute; + top: 0; + left: 0; + border: solid 1px #aaa; + background: #fff url(images/icon-menu.png) no-repeat 10px 11px; + border-radius: 5px; + box-shadow: 0 1px 2px rgba(0,0,0,.3); + } + .nav li { + display: none; /* hide all
  • items */ + margin: 0; + } + .nav .current { + display: block; /* show only current
  • item */ + } + .nav a { + display: block; + padding: 5px 5px 5px 32px; + text-align: left; + } + .nav .current a { + background: none; + color: #666; + } + + /* on nav hover */ + .nav ul:hover { + background-image: none; + } + .nav ul:hover li { + display: block; + margin: 0 0 5px; + } + .nav ul:hover .current { + background: url(images/icon-check.png) no-repeat 10px 7px; + } + + /* right nav */ + .nav.right ul { + left: auto; + right: 0; + } + + /* center nav */ + .nav.center ul { + left: 50%; + margin-left: -90px; + } + + +h1, h2, h3 { + color: #000; + line-height: 120%; + margin: 30px 0 10px; + font-family: "exo2"; + } + + diff --git a/btn.css b/btn.css new file mode 100644 index 0000000..9510d0b --- /dev/null +++ b/btn.css @@ -0,0 +1,47 @@ +.Button { + box-shadow: 0px 10px 14px -7px #3e7327; + background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%); + background-color:#77b55a; + border-radius:4px; + border:1px solid #4b8f29; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-size:13px; + font-weight:bold; + padding:1% 2%; + text-decoration:none; + text-shadow:0px 1px 0px #5b8a3c; +} +.Button:hover { + background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%); + background-color:#72b352; +} +.Button:active { + position:relative; + top:1px; +} + +.Button2 { + box-shadow:inset 0px -3px 7px 0px #29bbff; + background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%); + background-color:#2dabf9; + border-radius:3px; + border:1px solid #0b0e07; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-size:15px; + padding:1% 2%; + text-decoration:none; + text-shadow:0px 1px 0px #263666; +} +.Button2:hover { + background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%); + background-color:#0688fa; +} +.Button2:active { + position:relative; + top:1px; +} + diff --git a/index.html b/index.html index 85cc422..52efd9f 100644 --- a/index.html +++ b/index.html @@ -6,23 +6,75 @@ У вас всегда есть выбор! - + + +
    +

    Где я? О чём речь?

    +

    + + Вы на официальной странице русского ответвления Fediverse — глобальной сети взаимосвязанных соцсетей. Мы предлагаем свободные + альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли. +
    + По сути, это — Сеть, как она была задумана
    + Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют + на равных и обладают равными правами. -

    +

    Зачем это мне?

    +

    + + В двух словах — Неподцензурность пользователя
    + Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют. + И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии + паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение + с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? У нас так можно. И даже больше + — никто не мешает самому стать полновластным админом (при наличии минимальной технической подготовки). +

    + +

    Чем вы лучше?

    +

    + + И снова два слова — абсолютная взаимосвязанность
    - - - - - + У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то — + сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера + вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие в удобном для них формате, + оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? У нас так можно. +

    -
    Use left and right keys to navigate
    -
    -
    - +

    Ну ладно. Что дальше?

    +

    +

    +
    +

    И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены. +

    + + + + + +