modified: begushiybashkir/src/index.html

modified:   begushiybashkir/src/style/style.css
style the button and hero box for main photo
This commit is contained in:
valitovgaziz
2025-09-09 17:18:47 +05:00
parent 9461ce0886
commit ae02f46f2e
2 changed files with 130 additions and 118 deletions
+109 -110
View File
@@ -100,15 +100,15 @@
</div> </div>
</header> </header>
<section class="hero"> <section class="hero"></section>
<div class="container">
<h1>Присоединяйся к нашему беговому клубу!</h1> <section class="hero-text">
<p> <h1>Присоединяйся к нашему беговому клубу!</h1>
Тренировки на свежем воздухе, профессиональный тренер и дружеская <p>
атмосфера. Беги с нами к новым достижениям! Тренировки на свежем воздухе, профессиональный тренер и дружеская
</p> атмосфера. Беги к новым достижениям!
<button class="btn" id="callButton1">Позвонить</button> </p>
</div> <button class="btn" id="callButton1">Позвонить</button>
</section> </section>
<section class="section"> <section class="section">
@@ -249,113 +249,112 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="section slider_main"> <section class="section slider_main">
<div class="slider-container"> <div class="slider-container">
<h3>Наши моменты</h3> <h3>Наши моменты</h3>
<div class="slider"> <div class="slider">
<img <img
src="./photo/slider/slider23.png" src="./photo/slider/slider23.png"
alt="Беговой клуб, общее фото УММ 2025" alt="Беговой клуб, общее фото УММ 2025"
/> />
<img <img
src="./photo/slider/slider1.jpg" src="./photo/slider/slider1.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider2.jpg" src="./photo/slider/slider2.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider4.jpg" src="./photo/slider/slider4.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider5.jpg" src="./photo/slider/slider5.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider6.jpg" src="./photo/slider/slider6.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider7.jpg" src="./photo/slider/slider7.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider8.jpg" src="./photo/slider/slider8.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider9.jpg" src="./photo/slider/slider9.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider10.jpg" src="./photo/slider/slider10.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider11.jpg" src="./photo/slider/slider11.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider12.jpg" src="./photo/slider/slider12.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider13.jpg" src="./photo/slider/slider13.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider14.jpg" src="./photo/slider/slider14.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider15.jpg" src="./photo/slider/slider15.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider16.jpg" src="./photo/slider/slider16.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider17.jpg" src="./photo/slider/slider17.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider18.jpg" src="./photo/slider/slider18.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider19.jpg" src="./photo/slider/slider19.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider20.jpg" src="./photo/slider/slider20.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider21.jpg" src="./photo/slider/slider21.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
<img <img
src="./photo/slider/slider22.jpg" src="./photo/slider/slider22.jpg"
alt="Беговой клуб, общее фото" alt="Беговой клуб, общее фото"
/> />
</div>
<div class="slider-controls">
<button class="slider-prev"></button>
<button class="slider-next"></button>
</div>
<div class="slider-indicator" id="sliderIndicator">
<!-- точки будут добавлены через JavaScript -->
</div>
</div> </div>
<div class="slider-controls">
<button class="slider-prev"></button>
<button class="slider-next"></button>
</div>
<div class="slider-indicator" id="sliderIndicator">
<!-- точки будут добавлены через JavaScript -->
</div>
</div>
</section> </section>
<section class="section contact" id="signup"> <section class="section contact" id="signup">
+21 -8
View File
@@ -12,9 +12,7 @@ html {
body { body {
font-family: "Arial", sans-serif; font-family: "Arial", sans-serif;
height: 100%; height: fit-content;
margin: 0;
padding: 0;
color: #333; color: #333;
background-color: #f9f9f9; background-color: #f9f9f9;
min-width: 500px; min-width: 500px;
@@ -30,7 +28,7 @@ header {
background-color: #2e8b57; background-color: #2e8b57;
color: white; color: white;
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center
} }
.logo { .logo {
@@ -48,7 +46,7 @@ header {
max-width: 1200px; max-width: 1200px;
min-width: 420px; min-width: 420px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 5px;
} }
.hero { .hero {
@@ -58,19 +56,31 @@ header {
), ),
url("../photo/MainPhoto10.png"); url("../photo/MainPhoto10.png");
background-size: cover; background-size: cover;
color: white; color: rgb(255, 255, 255);
text-align: center; text-align: center;
padding: 80px 20px; padding: 80px 20px;
margin-bottom: 30px; margin-bottom: 30px;
background-position: center 40%; 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; font-size: 2.8em;
margin-bottom: 20px; margin-bottom: 20px;
} }
.hero p { .hero-text p {
font-size: 1.2em; font-size: 1.2em;
max-width: 700px; max-width: 700px;
margin: 0 auto 30px; margin: 0 auto 30px;
@@ -86,6 +96,9 @@ header {
font-weight: bold; font-weight: bold;
transition: background 0.3s; transition: background 0.3s;
border: none; 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 { .btn:hover {