diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..7f115d9 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index d7d9b86..73c193a 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,27 @@ Статус - + + - Обнови мой эмодзи статус! + Обновить Толин эмодзи статус! +
+

Другие мои сайты:

+
+ Обо мне + Булочная + Анализ Групп +
+
+ + Что это? +
+ При каждом нажатии на большую кнопку мне дается новый случайно выбранный эмодзи статус. + Открой vk.com/akopyl, нажми на кнопку на этом сайте и обнови мою страницу! +
+ + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..e315716 --- /dev/null +++ b/main.js @@ -0,0 +1,13 @@ +function showHint() { + console.log(document.getElementById("hint-div").style.display); + + if (document.getElementById("hint-div").style.display == "block") { + document.getElementById("hint-div").style.display = "none"; + document.getElementById("hint-link").innerHTML = "Что это?"; + document.getElementById("hint-link").style.color = "#dddddd"; + } else { + document.getElementById("hint-div").style.display = "block"; + document.getElementById("hint-link").innerHTML = "Понял"; + document.getElementById("hint-link").style.color = "black"; + } +} \ No newline at end of file diff --git a/package.json b/package.json index a5bf104..2540db2 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "covid", + "name": "emoji-status", "version": "1.0.0", "description": "", "main": "index.js", diff --git a/style.css b/style.css index 35ead8a..df42db1 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,91 @@ * { - font-family: 'Russo One', sans-serif; - color: lightgray; - background-color: #597da3; + font-family: 'Open Sans', sans-serif; +} +html { + height: 100%; } body { height: 100%; + margin: 0px; text-align: center; - margin-top: 20%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + background-color: #597da3; } a { text-decoration: none; - font-size: xx-large; } -a:hover { +a.big { + margin: 20vh; + font-size: xx-large; + transition: transform .2s; color: white; + font-weight: 600; +} + +a.big:hover { + transform: scale(1.04); +} + +div.links-container { + margin-top: 10vh; + margin-bottom: 10vh; + color: #dddddd; + text-align: left; +} + +div.links-container p { + font-weight: lighter; + margin-bottom: 5px; +} + +div.links { + background-color: white; + padding: 10px; + border-radius: 8px; + filter: drop-shadow(2px 2px 4px rgb(0, 0, 0, 0.4)); +} + +div.links a { + margin-left: 10px; + margin-right: 10px; + color: black; + border-width: 0px 0px 1px 0px; + border-style: solid; + border-color: transparent; +} + +div.links a:hover { + border-width: 0px 0px 2px 0px; + border-color: #597da390; + padding-bottom: 8px; +} + +#hint-link { + position: absolute; + bottom: 2vh; + right: 2vh; + font-weight: lighter; + color: #dddddd; + font-size: small; + text-decoration: underline; + z-index: 10; +} + +#hint-div { + display: none; + position: absolute; + bottom: 0px; + background-color: white; + font-weight: lighter; + width: 60%; + padding-left: 40%; + padding-right: 40%; + padding-top: 1vh; + padding-bottom: 1vh; } \ No newline at end of file