diff --git a/backg.css b/backg.css index cddc0cb..19d45eb 100644 --- a/backg.css +++ b/backg.css @@ -1,161 +1,160 @@ -* { - font-family: montserrat; - padding: 0; - margin: 0; -} - -.wrapper { - background-image: url(somet2.jpg); - background-position: center center; - background-size: cover; -} - -header { - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - height: 60px; - position: fixed; - margin: auto; - width: 100%; -} - -.logo { - max-width: 250px; - color: #ff0077; - font-size: 30px; - margin: 20px; - font-weight: 700; - text-transform: uppercase; -} - -nav { - margin-bottom: 20px; -} - -.nav-items { - list-style: none; - margin: 0; - padding: 0; -} - -.nav-items li { - display: inline-block; - margin-right: 20px; - position: relative; -} - -.nav-items a { - text-decoration: none; - color: rgb(255, 0, 119); - font-weight: bold; - text-transform: uppercase; - padding: 5px 15px; - transition: all 0.3s ease-in-out; -} - -.nav-items a:hover { - background: #ffb7c6; - color: #ff02d5; - transform: scale(1.1); -} - -.dropdown-menu { - display: none; - position: absolute; - top: 100%; - left: 0; - background: #ffb7c6; - padding: 10px; - list-style: none; - border-radius: 5px; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); - -} - -.dropdown:hover .dropdown-menu { - display: block; -} - -.banner-text { - display: flex; - justify-content: center; - height: 100vh; - align-items: center; - color: #a33267; - text-align: center; -} - -.single-banner h2 { - font-size: 70px; - text-transform: uppercase; - animation: animate 3s infinite alternate; - font-family: impact; -} - -@keyframes animate { - 0%, 100% { - transform: translateY(-6px); - } - 50% { - transform: translateY(0); - } -} - -@keyframes floatingBackground { - 0% { - transform: scale(1) translate(0, 0); - } - 50% { - transform: scale(1.02) translate(-5px, 5px); - } - 100% { - transform: scale(1) translate(0, 0); - } -} - -.animated-bg { - position: fixed; - width: 100vw; - height: 100vh; - background: url('somet2.jpg') no-repeat center center/cover; - background-size: contain; - image-rendering: high-quality; - animation: floatingBackground 5s ease-in-out infinite alternate; -} - -body { - opacity: 1; - transition: opacity 0.5s ease-in-out; -} - -body.fade-out { - opacity: 0; -} - -.animated-bg { - transition: opacity 0.5s ease-in-out; -} - -body { - opacity: 0; - animation: fadeIn 0.5s forwards; - transition: opacity 0.5s ease-in-out; - -} - -@keyframes fadeIn { - to { - opacity: 1; - } -} - -body.fade-out { - opacity: 0; -} - - -.animated-bg { - transition: opacity 0.5s ease-in-out; +* { + padding: 0; + margin: 0; +} + +.wrapper { + background-image: url(somet2.jpg); + background-position: center center; + background-size: cover; +} + +header { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + height: 60px; + position: fixed; + margin: auto; + width: 100%; +} + +.logo { + max-width: 250px; + color: #ff0077; + font-size: 30px; + margin: 20px; + font-weight: 700; + text-transform: uppercase; +} + +nav { + margin-bottom: 20px; +} + +.nav-items { + list-style: none; + margin: 0; + padding: 0; +} + +.nav-items li { + display: inline-block; + margin-right: 20px; + position: relative; +} + +.nav-items a { + text-decoration: none; + color: rgb(255, 0, 119); + font-weight: bold; + text-transform: uppercase; + padding: 5px 15px; + transition: all 0.3s ease-in-out; +} + +.nav-items a:hover { + background: #ffb7c6; + color: #ff02d5; + transform: scale(1.1); +} + +.dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + background: #ffb7c6; + padding: 10px; + list-style: none; + border-radius: 5px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + +} + +.dropdown:hover .dropdown-menu { + display: block; +} + +.banner-text { + display: flex; + justify-content: center; + height: 100vh; + align-items: center; + color: #a33267; + text-align: center; +} + +.single-banner h2 { + font-size: 70px; + text-transform: uppercase; + animation: animate 3s infinite alternate; + font-family: impact; +} + +@keyframes animate { + 0%, 100% { + transform: translateY(-6px); + } + 50% { + transform: translateY(0); + } +} + +@keyframes floatingBackground { + 0% { + transform: scale(1) translate(0, 0); + } + 50% { + transform: scale(1.02) translate(-5px, 5px); + } + 100% { + transform: scale(1) translate(0, 0); + } +} + +.animated-bg { + position: fixed; + width: 100vw; + height: 100vh; + background: url('somet2.jpg') no-repeat center center/cover; + background-size: contain; + image-rendering: high-quality; + animation: floatingBackground 5s ease-in-out infinite alternate; +} + +body { + opacity: 1; + transition: opacity 0.5s ease-in-out; +} + +body.fade-out { + opacity: 0; +} + +.animated-bg { + transition: opacity 0.5s ease-in-out; +} + +body { + opacity: 0; + animation: fadeIn 0.5s forwards; + transition: opacity 0.5s ease-in-out; + +} + +@keyframes fadeIn { + to { + opacity: 1; + } +} + +body.fade-out { + opacity: 0; +} + + +.animated-bg { + transition: opacity 0.5s ease-in-out; } \ No newline at end of file