From 00290943ec43df6fcf117e6b0954ba66710c9f71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mihae=C4=BCs=20Mejerovs?= Date: Tue, 21 May 2024 18:28:58 +0000 Subject: [PATCH] Update style.css --- style.css | 250 +++++++++++++++++++++++++++++------------------------- 1 file changed, 135 insertions(+), 115 deletions(-) diff --git a/style.css b/style.css index 786dbf6..4810591 100644 --- a/style.css +++ b/style.css @@ -1,115 +1,135 @@ -body{ - height: 100%; - margin: 0; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - background-color: #F2F2F2; - - } -html { - height: 100%; - margin: 0; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - } - - -.panel { - color: red; -} - -.panel ul { - list-style-type: none; - margin: 0; - padding: 0; - overflow: hidden; - background-color: #066163; - } - -.panel li { - float: left; - font-size: 150%; - text-align: center; - -} - -.panel li a { - display: block; - color: #F2F2F2; - text-align: center; - padding: 20px 22px; - text-decoration: none; - - - } - -.panel li a:hover { - - color: #CDBE78; - } - - .glavfoto { - background-image: url("https://www.minecraft.net/content/dam/community/fy21/minecraft/heroimages/hero_cityoflight-081220.png"); - height: 100%; - width: 100%; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - position: relative; -} - -.glavtex { - text-align: center; - position: absolute; - top: 30%; - left: 50%; - transform: translate(-50%, -50%); - color: #EEEEEE; -} - -.glavp { - font-size: 100px; - margin: 1px; - color: #066163; - font-weight: bold; - text-align: center; -} - -.center { - margin-left: 25%; - margin-right: 25%; - -} - -.oglavlenije { - font-size: 40px; - text-align: center; - font-weight: bold; - -} -.samtext { - font-size: 20px; -} - -.foto1 { - float: left; - width: 33%; -} - -footer { - left: 0; - bottom: 0; - width: 100%; - height: 35px; - - background-color: #066163; - color: #F2F2F2; - text-align: center; - font-size: 20px; - -} - -.masik { - text-align: center; - font-size: 25px; - color: #066163; -} - +body { + background-repeat: no-repeat; + background-attachment: fixed; /* Это делает фон фиксированным */ + background-size: cover; /* Это масштабирует изображение для заполнения всего экрана */ + background-color: #EEEEEE; +} + + + + +html { + height: 100%; + margin: 0; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + } + + +.panel { + color: red; +} + +.panel ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #066163; + } + +.panel li { + float: left; + font-size: 150%; + text-align: center; + +} + +.panel li a { + display: block; + color: #F2F2F2; + text-align: center; + padding: 20px 22px; + text-decoration: none; + + + } + +.panel li a:hover { + + color: #CDBE78; + } + + .glavfoto { + background-image: url("https://www.minecraft.net/content/dam/community/fy21/minecraft/heroimages/hero_cityoflight-081220.png"); + height: 100%; + width: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +.glavtex { + text-align: center; + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + color: #EEEEEE; +} + +.glavp { + font-size: 100px; + margin: 1px; + color: #066163; + font-weight: bold; + text-align: center; +} + +.center { + margin-left: 10%; + margin-right: 10%; + +} + +.oglavlenije { + font-size: 40px; + text-align: center; + font-weight: bold; + +} +.samtext { + font-size: 20px; +} + +.foto1 { + float: left; + width: 33%; +} + +footer { + left: 0; + bottom: 0; + width: 100%; + height: 35px; + + background-color: #066163; + color: #F2F2F2; + text-align: center; + font-size: 20px; + +} + +.masik { + text-align: center; + font-size: 25px; + color: #066163; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* Применение анимации ко всем изображениям */ +img { + animation: fadeIn 2s ease-in-out; + -webkit-animation: fadeIn 2s ease-in-out; /* Для совместимости с Safari */ + -moz-animation: fadeIn 2s ease-in-out; /* Для совместимости с Firefox */ + -o-animation: fadeIn 2s ease-in-out; /* Для совместимости с Opera */ + animation-fill-mode: forwards; /* Сохраняет конечное состояние анимации */ +} \ No newline at end of file