modified: begushiybashkir/src/index.html

modified:   begushiybashkir/src/style/style.css
style the button and hero box for main photo

begushiybashkir/src/index.html

@@ -100,15 +100,15 @@
       </div>
     </header>
 
-    <section class="hero">
-      <div class="container">
+    <section class="hero"></section>
+
+    <section class="hero-text">
       <h1>Присоединяйся к нашему беговому клубу!</h1>
       <p>
         Тренировки на свежем воздухе, профессиональный тренер и дружеская
-          атмосфера. Беги с нами к новым достижениям!
+        атмосфера. Беги к новым достижениям!
       </p>
       <button class="btn" id="callButton1">Позвонить</button>
-      </div>
     </section>
 
     <section class="section">
@@ -249,7 +249,6 @@
             </ul>
           </div>
         </div>
-        
       </div>
     </section>
 

begushiybashkir/src/style/style.css

@@ -12,9 +12,7 @@ html {
 
 body {
   font-family: "Arial", sans-serif;
-  height: 100%;
-  margin: 0;
-  padding: 0;
+  height: fit-content;
   color: #333;
   background-color: #f9f9f9;
   min-width: 500px;
@@ -30,7 +28,7 @@ header {
   background-color: #2e8b57;
   color: white;
   padding: 20px 0;
-  text-align: center;
+  text-align: center
 }
 
 .logo {
@@ -48,7 +46,7 @@ header {
   max-width: 1200px;
   min-width: 420px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 5px;
 }
 
 .hero {
@@ -58,19 +56,31 @@ header {
     ),
     url("../photo/MainPhoto10.png");
   background-size: cover;
-  color: white;
+  color: rgb(255, 255, 255);
   text-align: center;
   padding: 80px 20px;
   margin-bottom: 30px;
   background-position: center 40%;
+  min-height: 500px;
 }
 
-.hero h1 {
+.hero-text {
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+.hero-text h1 {
   font-size: 2.8em;
   margin-bottom: 20px;
 }
 
-.hero p {
+.hero-text p {
   font-size: 1.2em;
   max-width: 700px;
   margin: 0 auto 30px;
@@ -86,6 +96,9 @@ header {
   font-weight: bold;
   transition: background 0.3s;
   border: none;
+  -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
+  -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
+  box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
 }
 
 .btn:hover {