LibreHacker/switching
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

no-js menu

Browse Source
This commit is contained in:
tolstoevsky 2020-03-11 12:53:35 +03:00
parent 6d0c85da0c
commit f7d2e1a460
No known key found for this signature in database
GPG Key ID: EDD59F3A654C596C
10 changed files with 285 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/.base.css.swp
View File

Binary file not shown.

234
css/menu.css
View File

@ -1,97 +1,173 @@
.topnav { * {
overflow: hidden; box-sizing: border-box;
background-color: #1f2833;
} }
.topnav a {
/* custom scrollbar */
::-webkit-scrollbar {
width: .95em;
}
/* dummy content */
.content {
float: left; float: left;
display: flex; margin: .75em 0 0 0;
text-align: center; transition: margin .3s ease-in-out;
padding: 14px 16px; }
text-decoration: none; .content > p {
font-size: 17px; margin: .25em 0 .75em 0;
border-radius: 2px;
} }
/* Advanced Checkbox Hack */
.topnav .icon { body {
display: none; -webkit-animation: bugfix infinite 1s;
} }
.dropdown { @-webkit-keyframes bugfix {
overflow: hidden; from {
display: flex; padding: 0;
} }
to {
.dropdown .dropbtn { padding: 0;
font-size: 17px;
border: 1px solid #888;
border-radius: 2px;
outline: none;
color: #c5c6c7;
background-color: #1e2832;
padding: 16px 16px;
font-family: inherit;
display: flex;
}
.dropdown-content {
display: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: #c5c6c7;
background-color: #1e2832;
border: 1px solid #888;
border-radius: 2px;
}
.dropdown-content a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: flex;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
@media screen and (max-width: 716px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: flex;
} }
} }
input[type=checkbox] {
@media screen and (max-width: 716px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute; position: absolute;
right: 0; top: -9999px;
top: 0; left: -9999px;
} }
.topnav.responsive a {
float: none; label {
display: inline-block; position: absolute;
text-align: left; left: 0;
display: none;
width: 2em;
height: .5em;
padding: .05em;
font-size: 1.1em;
color: #fff;
transition: color .3s ease-in-out;
cursor: pointer;
user-select: none;
margin: 0;
} }
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;} /* big screens */
.topnav.responsive .dropdown .dropbtn { nav[role="off-canvas"] {
display: inline-block; position: relative;
width: 50em;
margin: 0 auto;
transition-duration: .3s, .5s;
transition-timing-function: ease-in-out;
transition-property: left, opacity, box-shadow;
}
nav[role="off-canvas"] a {
color: #fff;
text-decoration: none;
transition: color .3s ease-in-out;
display: table-cell;
vertical-align: middle;
}
nav[role="off-canvas"] ul {
padding: 0;
margin: 0 auto;
width: 100%;
}
nav[role="off-canvas"] ul > li {
float: left;
padding: .55em .55em;
width: 8em;
margin: .5em;
opacity: .8;
text-transform: uppercase;
display: table;
cursor: pointer;
text-align: center;
transition-duration: .3s;
transition-timing-function: ease-in-out;
transition-property: box-shadow, color, opacity, padding-left;
cursor: pointer;
}
nav[role="off-canvas"] ul > li:hover {
color: #fff;
opacity: 1;
box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
}
nav[role="off-canvas"] ul > li
.active
{
color: #fff;
opacity: 1;
box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
}
/* small screens */
@media screen and (max-width: 44em) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.content {
margin: 2.5em .5em 0 .5em;
}
nav[role="off-canvas"] {
position: absolute;
top: 3em;
left: -20em;
width: 20em;
opacity: 0;
}
nav[role="off-canvas"] ul > li {
height: 100%;
width: 100%; width: 100%;
text-align: left; text-align: left;
margin: 0;
background: black;
}
nav[role="off-canvas"] ul > li:hover {
box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
}
label {
display: block;
}
label:after {
position: absolute;
right: .25em;
top: 0;
content: "\2261";
font-size: 1.8em;
}
label:hover,
input:checked ~ label {
color: #000;
}
input:checked ~ nav[role="off-canvas"] {
opacity: 1;
left: 0;
box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
}
input:checked ~ nav[role="off-canvas"] ul > li {
padding: .55em .55em .55em 1.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:hover {
padding-left: 3.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:after {
position: absolute;
right: .25em;
content: "\203A";
color: inherit;
}
input:checked ~ .content {
margin-left: 20.5em;
margin-right: -20.5em;
} }
} }
.active a {
color: #433;
}

130
css/popup.css
View File

@ -1,130 +0,0 @@
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

41
extra.html
View File

@ -8,28 +8,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css"> <link rel="stylesheet" href="css/btn.css">
<script src="js/menu.js"></script>
</head> </head>
<body> <body>
<div class="topnav" id="rtopnav"> <input type="checkbox" id="menu">
<a href="index.html">Главная</a> <label for="menu" onclick></label>
<a href="mail.html">Почта</a> <nav role="off-canvas">
<a href="im.html">Мессенджеры</a> <ul>
<a href="social.html">Соцсети</a> <li><a href="index.html">Главная</a></li>
<a href="search.html">Поисковики</a> <li><a href="mail.html">Почта</a></li>
<div class="dropdown"> <li><a href="im.html">Мессенджеры</a></li>
<button class="dropbtn">Ещё <li><a href="social.html">Соцсети</a></li>
<i class="fa fa-caret-down"></i> <li><a href="search.html">Поисковики</a></li>
</button> <li><a href="extra.html" class="active">Документы и агитматериалы</a></li>
<div class="dropdown-content"> <li><a href="info.html">Подробнее</a></li>
<a href="extra.html" class="active">Документы и агитматериалы</a> </ul>
<a href="info.html">Подробнее</a> </nav>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<div class="textblock"> <div class="textblock">
<h2>Устав сообщества</h2> <h2>Устав сообщества</h2>
@ -97,11 +94,11 @@
<p> <p>
<div class="imgblock"> <div class="imgblock">
<a href="images/thumb1.png" target=_blank> <a href="images/thumb1.png" >
<img src="images/thumb1.png" width=15% max-width=100% style="float:left;"></a> <img src="images/thumb1.png" width=15% max-width=100% style="float:left;"></a>
<a href="images/thumb2.png" target=_blank> <a href="images/thumb2.png" >
<img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;"></a> <img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;"></a>
<a href="images/transport.png" target=_blank> <a href="images/transport.png" >
<img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;" ></a> <img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;" ></a>
Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам, Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам,
дав ссылку на этот сайт, либо распечатав и распространив листовки дав ссылку на этот сайт, либо распечатав и распространив листовки

39
im.html
View File

@ -7,34 +7,31 @@
<title>У вас всегда есть выбор! — Мессенджеры</title> <title>У вас всегда есть выбор! — Мессенджеры</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/btn.css"> <link rel="stylesheet" href="css/btn.css">
<script src="js/menu.js"></script> <link rel="stylesheet" href="css/menu.css">
</head> </head>
<body> <body>
<div class="topnav" id="rtopnav"> <input type="checkbox" id="menu">
<a href="index.html">Главная</a> <label for="menu" onclick></label>
<a href="mail.html">Почта</a> <nav role="off-canvas">
<a href="im.html" class="active">Мессенджеры</a> <ul>
<a href="social.html">Соцсети</a> <li><a href="index.html">Главная</a></li>
<a href="search.html">Поисковики</a> <li><a href="mail.html">Почта</a></li>
<div class="dropdown"> <li><a href="im.html" class="active">Мессенджеры</a></li>
<button class="dropbtn">Ещё <li><a href="social.html">Соцсети</a></li>
<i class="fa fa-caret-down"></i> <li><a href="search.html">Поисковики</a></li>
</button> <li><a href="extra.html">Документы и агитматериалы</a></li>
<div class="dropdown-content"> <li><a href="info.html">Подробнее</a></li>
<a href="extra.html">Документы и агитматериалы</a> </ul>
<a href="info.html">Подробнее</a> </nav>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<div class="textblock"> <div class="textblock">
<h2>Децентрализованные мессенджеры</h2> <h2>Децентрализованные мессенджеры</h2>
<p>Способы быстро списаться и созвониться с нужным человеком</p> <p>Способы быстро списаться и созвониться с нужным человеком</p>
<div class="imgblock"> <div class="imgblock">
<a href="images/movim.png" target=_blank> <a href="images/movim.png" >
<picture> <picture>
<source srcset="images/conversations.png" media="(max-width: 700px)"> <source srcset="images/conversations.png" media="(max-width: 700px)">
<source srcset="images/movim.png"> <source srcset="images/movim.png">
@ -91,7 +88,7 @@
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/jitsi.png" target=_blank> <a href="images/jitsi.png" >
<picture> <picture>
<source srcset="images/jitsi2.png" media="(max-width: 700px)"> <source srcset="images/jitsi2.png" media="(max-width: 700px)">
<source srcset="images/jitsi.png"> <source srcset="images/jitsi.png">

37
index.html
View File

@ -9,26 +9,21 @@
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css"> <link rel="stylesheet" href="css/popup.css">
<script src="js/menu.js"></script>
</head> </head>
<body> <body>
<div class="topnav" id="rtopnav"> <input type="checkbox" id="menu">
<a href="index.html" class="active">Главная</a> <label for="menu" onclick></label>
<a href="mail.html">Почта</a> <nav role="off-canvas">
<a href="im.html">Мессенджеры</a> <ul>
<a href="social.html">Соцсети</a> <li><a href="index.html" class="active">Главная</a></li>
<a href="search.html">Поисковики</a> <li><a href="mail.html">Почта</a></li>
<div class="dropdown"> <li><a href="im.html">Мессенджеры</a></li>
<button class="dropbtn">Ещё <li><a href="social.html">Соцсети</a></li>
<i class="fa fa-caret-down"></i> <li><a href="search.html">Поисковики</a></li>
</button> <li><a href="extra.html">Документы и агитматериалы</a></li>
<div class="dropdown-content"> <li><a href="info.html">Подробнее</a></li>
<a href="extra.html">Документы и агитматериалы</a> </ul>
<a href="info.html">Подробнее</a> </nav>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<div class="textblock"> <div class="textblock">
<h2>Где я? О чём речь?</h2> <h2>Где я? О чём речь?</h2>
<p> <p>
@ -76,7 +71,7 @@
<h3>Просто попробуйте свободную альтернативу:</h3> <h3>Просто попробуйте свободную альтернативу:</h3>
<div class="imgblock"> <div class="imgblock">
<a href="images/mastodon2.png" target=_blank> <a href="images/mastodon2.png" >
<img src="images/mastodon2.png" width=45% style="float:left; margin:1%;"></a> <img src="images/mastodon2.png" width=45% style="float:left; margin:1%;"></a>
Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент
— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, — самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер,
@ -84,14 +79,14 @@
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/friendica.png" target=_blank> <a href="images/friendica.png" >
<img src="images/friendica.png" width=45% style= "float:left; margin:1%;"></a> <img src="images/friendica.png" width=45% style= "float:left; margin:1%;"></a>
Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон, Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон,
Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами". Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда. Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда.
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/pixelfed.png" target=_blank> <a href="images/pixelfed.png" >
<img src="images/pixelfed.png" width=45% style="float:left; margin:1%;"></a> <img src="images/pixelfed.png" width=45% style="float:left; margin:1%;"></a>
А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим. А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
</div> </div>

33
info.html
View File

@ -8,27 +8,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<script src="js/menu.js"></script> <script src="js/menu.js"></script>
</head> </head>
<body> <body>
<div class="topnav" id="rtopnav">
<a href="index.html">Главная</a> <input type="checkbox" id="menu">
<a href="mail.html">Почта</a> <label for="menu" onclick></label>
<a href="im.html">Мессенджеры</a> <nav role="off-canvas">
<a href="social.html">Соцсети</a> <ul>
<a href="search.html">Поисковики</a> <li><a href="index.html">Главная</a></li>
<div class="dropdown"> <li><a href="mail.html">Почта</a></li>
<button class="dropbtn">Ещё <li><a href="im.html">Мессенджеры</a></li>
<i class="fa fa-caret-down"></i> <li><a href="social.html">Соцсети</a></li>
</button> <li><a href="search.html">Поисковики</a></li>
<div class="dropdown-content"> <li><a href="extra.html">Документы и агитматериалы</a></li>
<a href="extra.html">Документы и агитматериалы</a> <li><a href="info.html" class="active">Подробнее</a></li>
<a class="active" href="info.html">Подробнее</a> </ul>
</div> </nav>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<div class="textblock" align="center"> <div class="textblock" align="center">

45
mail.html
View File

@ -8,35 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css"> <link rel="stylesheet" href="css/btn.css">
<script src="js/menu.js"></script>
</head> </head>
<body> <body>
<div class="topnav" id="rtopnav"> <input type="checkbox" id="menu">
<a href="index.html">Главная</a> <label for="menu" onclick></label>
<a href="mail.html" class="active">Почта</a> <nav role="off-canvas">
<a href="im.html" >Мессенджеры</a> <ul>
<a href="social.html">Соцсети</a> <li><a href="index.html">Главная</a></li>
<a href="search.html">Поисковики</a> <li><a href="mail.html" class="active">Почта</a></li>
<div class="dropdown"> <li><a href="im.html">Мессенджеры</a></li>
<button class="dropbtn">Ещё <li><a href="social.html">Соцсети</a></li>
<i class="fa fa-caret-down"></i> <li><a href="search.html">Поисковики</a></li>
</button> <li><a href="extra.html">Документы и агитматериалы</a></li>
<div class="dropdown-content"> <li><a href="info.html">Подробнее</a></li>
<a href="extra.html">Документы и агитматериалы</a> </ul>
<a href="info.html">Подробнее</a> </nav>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<div class="textblock"> <div class="textblock">
<h2>Электронная почта</h2> <h2>Электронная почта</h2>
<p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. </p> <p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. </p>
<div class="imgblock"> <div class="imgblock">
<a href="images/mailfence.png" target=_blank> <a href="images/mailfence.png" >
<img src="images/mailfence.png" width=43% max-width=100% style="float:left; margin:1%" alt="MailFence"></a> <img src="images/mailfence.png" width=43% max-width=100% style="float:left; margin:1%" alt="MailFence"></a>
<h3>MailFence</h3> <h3>MailFence</h3>
<span> <span>
@ -55,7 +52,7 @@
</div> </div>
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/tutanota_w.png" target=_blank> <a href="images/tutanota_w.png" >
<picture> <picture>
<source srcset="images/tutanota.png" media="(max-width: 600px)"> <source srcset="images/tutanota.png" media="(max-width: 600px)">
<source srcset="images/tutanota_w.png"> <source srcset="images/tutanota_w.png">
@ -79,7 +76,7 @@
</div> </div>
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/posteo.jpg" target=_blank> <a href="images/posteo.jpg" >
<img src="images/posteo.jpg" width=45% max-width="100%" style="float:left; margin:1%;" alt="Posteo"></a> <img src="images/posteo.jpg" width=45% max-width="100%" style="float:left; margin:1%;" alt="Posteo"></a>
<h3>Posteo</h3> <h3>Posteo</h3>
<span> <span>
@ -96,7 +93,7 @@
</div> </div>
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/cockmail.png" target=_blank> <a href="images/cockmail.png" >
<img src="images/cockmail.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="CockMail"></a> <img src="images/cockmail.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="CockMail"></a>
<h3>Cockmail</h3> <h3>Cockmail</h3>
@ -113,7 +110,7 @@
</div> </div>
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/thexyz.png" target=_blank> <a href="images/thexyz.png" >
<picture> <picture>
<source srcset="images/thexyz_m.png" media="(max-width: 600px)"> <source srcset="images/thexyz_m.png" media="(max-width: 600px)">
<source srcset="images/thexyz.png"> <source srcset="images/thexyz.png">

41
search.html
View File

@ -8,28 +8,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css"> <link rel="stylesheet" href="css/btn.css">
<script src="js/menu.js"></script>
</head> </head>
<body> <body>
<div class="topnav" id="rtopnav"> <input type="checkbox" id="menu">
<a href="index.html">Главная</a> <label for="menu" onclick></label>
<a href="mail.html">Почта</a> <nav role="off-canvas">
<a href="im.html">Мессенджеры</a> <ul>
<a href="social.html">Соцсети</a> <li><a href="index.html">Главная</a></li>
<a href="search.html" class="active">Поисковики</a> <li><a href="mail.html">Почта</a></li>
<div class="dropdown"> <li><a href="im.html">Мессенджеры</a></li>
<button class="dropbtn">Ещё <li><a href="social.html">Соцсети</a></li>
<i class="fa fa-caret-down"></i> <li><a href="search.html" class="active">Поисковики</a></li>
</button> <li><a href="extra.html">Документы и агитматериалы</a></li>
<div class="dropdown-content"> <li><a href="info.html">Подробнее</a></li>
<a href="extra.html">Документы и агитматериалы</a> </ul>
<a href="info.html">Подробнее</a> </nav>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<div class="textblock"> <div class="textblock">
<h2>Зачем вообще менять поисковик?</h2> <h2>Зачем вообще менять поисковик?</h2>
@ -67,7 +64,7 @@
Это не требует больших затрат вычислительных мощностей и позволяет обходиться пожертвованиями или нетаргетированной рекламой. Это не требует больших затрат вычислительных мощностей и позволяет обходиться пожертвованиями или нетаргетированной рекламой.
</p> </p>
<div class="imgblock"> <div class="imgblock">
<a href="images/searx.png" target=_blank> <a href="images/searx.png" >
<img src="images/searx.png" width=50% max-width=100% style="float:left; margin:1%;" alt="SearX"></a> <img src="images/searx.png" width=50% max-width=100% style="float:left; margin:1%;" alt="SearX"></a>
<h4>Searx</h4> <h4>Searx</h4>
<p> <p>
@ -92,7 +89,7 @@
грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе. грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе.
</p> </p>
<div class="imgblock"> <div class="imgblock">
<a href="images/ecosia.png" target=_blank> <a href="images/ecosia.png" >
<img src="images/ecosia.png" width=50% max-width=100% style="float:left; margin:1%;" alt="Ecosia"></a> <img src="images/ecosia.png" width=50% max-width=100% style="float:left; margin:1%;" alt="Ecosia"></a>
<h4>Яркий пример — Ecosia</h4> <h4>Яркий пример — Ecosia</h4>
<p> <p>
@ -109,7 +106,7 @@
ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами
с остальными. И это действительно работает! с остальными. И это действительно работает!
<div class="imgblock"> <div class="imgblock">
<a href="images/yacy.png" target=_blank> <a href="images/yacy.png" >
<img src="images/yacy.png" width=50% max-width=100% style="float:left; margin:1%;" alt="YaCy"></a> <img src="images/yacy.png" width=50% max-width=100% style="float:left; margin:1%;" alt="YaCy"></a>
<h4>YaCy</h4> <h4>YaCy</h4>
Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован

42
social.html
View File

@ -8,35 +8,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css"> <link rel="stylesheet" href="css/btn.css">
<script src="js/menu.js"></script>
</head> </head>
<body> <body>
<div class="topnav" id="rtopnav"> <input type="checkbox" id="menu">
<a href="index.html">Главная</a> <label for="menu" onclick></label>
<a href="mail.html">Почта</a> <nav role="off-canvas">
<a href="im.html" >Мессенджеры</a> <ul>
<a href="social.html" class="active">Соцсети</a> <li><a href="index.html">Главная</a></li>
<a href="search.html">Поисковики</a> <li><a href="mail.html">Почта</a></li>
<div class="dropdown"> <li><a href="im.html">Мессенджеры</a></li>
<button class="dropbtn">Ещё <li><a href="social.html" class="active">Соцсети</a></li>
<i class="fa fa-caret-down"></i> <li><a href="search.html">Поисковики</a></li>
</button> <li><a href="extra.html">Документы и агитматериалы</a></li>
<div class="dropdown-content"> <li><a href="info.html">Подробнее</a></li>
<a href="extra.html">Документы и агитматериалы</a> </ul>
<a href="info.html">Подробнее</a> </nav>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<div class="textblock"> <div class="textblock">
<h2>Социальные сети</h2> <h2>Социальные сети</h2>
<p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p> <p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p>
<div class="imgblock"> <div class="imgblock">
<a href="images/mastodon2.png" target=_blank> <a href="images/mastodon2.png" >
<img src="images/mastodon2.png" width="45%" max-width="100%" style="float:left; margin:1%;"></a> <img src="images/mastodon2.png" width="45%" max-width="100%" style="float:left; margin:1%;"></a>
<h3 id="mastodon" >#вместотвиттера Mastodon</h3> <h3 id="mastodon" >#вместотвиттера Mastodon</h3>
<span> <span>
@ -81,7 +77,7 @@
</div> </div>
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/friendica.png" target=_blank> <a href="images/friendica.png" >
<img src="images/friendica.png" width=45% max-width="100%" style="float:left; margin:1%;"></a> <img src="images/friendica.png" width=45% max-width="100%" style="float:left; margin:1%;"></a>
<h3 id="friendica">#вместоВК Friendica</h3> <h3 id="friendica">#вместоВК Friendica</h3>
@ -115,7 +111,7 @@
</div> </div>
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/pixelfed.png" target=_blank> <a href="images/pixelfed.png" >
<img src="images/pixelfed.png" width=45% max-width=100% style="float:left; margin:1%;"></a> <img src="images/pixelfed.png" width=45% max-width=100% style="float:left; margin:1%;"></a>
<h3 id="pixelfed" >#вместоinstagram PixelFed</h3> <h3 id="pixelfed" >#вместоinstagram PixelFed</h3>
@ -155,7 +151,7 @@
</div> </div>
</div> </div>
<div class="imgblock"> <div class="imgblock">
<a href="images/peertube.png" target=_blank> <a href="images/peertube.png" >
<img src="images/peertube.png" width=45% max-width=100% style="float:left; margin:1%;"></a> <img src="images/peertube.png" width=45% max-width=100% style="float:left; margin:1%;"></a>
<h3 id="peertube">#вместоyoutube PeerTube</h3> <h3 id="peertube">#вместоyoutube PeerTube</h3>