correct intro section style

BlueButterflies · Apr 22, 2024 · 6fc8556 · 6fc8556
1 parent 4d1b15c
commit 6fc8556
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -23,9 +23,11 @@
 </head>
 
 <body>
-  <nav class="navbar">
-    <div class="container-fluid justify-content-center">
-      <span class="navbar-brand mb-0 h1">Удобно ръководство за финансова подкрепа за отворен код</span>
+  <div class="container-fluid intro">
+    <div>
+      <span class="intro-text">
+        Удобно ръководство за финансова подкрепа за отворен код
+      </span>
     </div>
     <form class="container-fluid justify-content-center">
       <a class="btn btn-outline-light"
@@ -37,9 +39,9 @@
         Принтирай
       </button>
     </form>
-  </nav>
+  </div>
 
-  <main>
+  <main class="container-fluid">
     <!--Intro-->
     <div class="cards">
       <div class="card-body">
@@ -856,7 +858,7 @@ <h5 class="card-title">Казуси от практиката</h5>
               <ul>
                 <li><a href="http://baroquesoftware.com/" target="_blank">Baroque Software</a></li>
                 <li><a href="https://neighbourhood.ie/" target="_blank">Neighbourhoodie</a></li>
-                <li><a href="https://www.openssl.org/community/contacts.html" target="_blank">OpenSSL Software Foundation</a>по-рано <a href="https://web.archive.org/web/20180817114118/opensslservices.com/what.html" target="_blank">OpenSSL Software Services</a></li>
+                <li><a href="https://www.openssl.org/community/contacts.html" target="_blank">OpenSSL Software Foundation</a> по-рано <a href="https://web.archive.org/web/20180817114118/opensslservices.com/what.html" target="_blank">OpenSSL Software Services</a></li>
                 <li><a href="http://phk.freebsd.dk/VML/" target="_blank">Varnish Moral License</a></li>
               </ul>
               </p>
@@ -1334,7 +1336,7 @@ <h2>Лиценз и авторство</h2>
     </div>
   </main>
 
-  <footer class="footer">
+  <footer class="container-fluid footer">
     <p>Удобно ръководство за финансова подкрепа за отворен код се поддържа Сияна Здравкова</p>
 
     <div class="socialLinks">

diff --git a/style.css b/style.css
@@ -7,70 +7,31 @@
     font-style: italic;
 }
 
-.navbar {
+.intro {
     background: radial-gradient(759px at 14% 22.3%, rgb(10, 64, 88) 0%, rgb(15, 164, 102) 90%);
-    position: relative;
-    z-index: 1;
+    padding: 50px 0 20px 0;
     height: 300px;
+    justify-content: center;
+    text-align: center;
+    justify-items: center;
 }
 
-.navbar:before,
-.navbar:after {
-    background: inherit;
-    content: '';
-    display: block;
-    height: 50%;
-    left: 0;
-    position: absolute;
-    right: 0;
-    z-index: -1;
-    -webkit-backface-visibility: hidden;
-}
-
-.navbar:before {
-    top: 0;
-    transform: skewY(5deg);
-    transform-origin: 100% 0;
-}
-
-.navbar:after {
-    bottom: 0;
-    transform: skewY(-2.2deg);
-    transform-origin: 100%;
-}
-
-.navbar div {
-    margin-top: 50px;
-
-}
 
-.navbar div .navbar-brand {
+.intro div .intro-text{
     font-weight: 500;
     font-size: 2rem;
-    color: white; 
-    left: 260px;
-    position: absolute;
-    top: 80px;
+    color: white;
 }
 
-.navbar form .btn {
+.intro form .btn {
     font-size: 1.5rem;
     width: 180px;
-    position: absolute;
-    top: 220px;
-}
-
-.navbar form a{
-    left: 400px;
-}
-
-.navbar form button{
-    left: 700px;
+    margin: 8%  2% 0 2%;
 }
 
 main{
     color: rgb(10, 64, 88);
-    margin-top: 8%;
+    margin-top: 6%;
 }
 
 .cards{
@@ -130,6 +91,7 @@ main{
     color: rgb(10, 64, 88);
     transform: 1s;
 }
+
 .btnDescription ul li a:hover{
     transform: scale(1.1);
     color: rgb(15, 164, 102);
@@ -195,3 +157,9 @@ main{
     font-size: 1.7rem;
     color: rgb(10, 64, 88);
 }
+
+@media screen and (max-width: 600px){
+    .intro div .intro-text{
+    font-size: 1.7rem;
+}
+}