website-elements/test.html at master · foxlight02/website-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Handyman Services | BEM</title>

<style>
/* ===== BASE ===== */
body { margin:0; font-family: Arial; }
.container { max-width:1200px; margin:auto; padding:20px; }

/* ===== NAVBAR ===== */
.navbar { display:flex; justify-content:space-between; align-items:center; }
.navbar__menu { display:flex; list-style:none; gap:20px; }
.navbar__link { text-decoration:none; color:black; font-weight:bold; }
.navbar__link:hover { color:#ffc107; }

/* ===== SHOWCASE ===== */
.showcase { height:70vh; display:flex; align-items:center; color:white; background:url("iimg/pexels-photo.jpeg") center/cover no-repeat; }
.showcase__title { font-size:40px; }
.showcase__btn { background:#1a5799; color:white; padding:10px 20px; border-radius:10px; text-decoration:none; }

/* ===== ABOUT ===== */
.about__row { display:flex; gap:20px; }
.about__card { flex:1; padding:30px; background:#f4f4f4; border-radius:10px; }
.about__mini { display:flex; gap:10px; margin-top:20px; }
.about__mini-card { flex:1; background:white; padding:15px; border-radius:10px; }

/* ===== SERVICES ===== */
.services__grid { display:flex; gap:20px; }
.services__card { flex:1; background:white; padding:20px; border-radius:10px; text-align:center; }
.services__img { width:100%; height:150px; object-fit:cover; }

/* ===== BANNER ===== */
.banner { display:flex; gap:20px; margin-top:40px; }
.banner__img { flex:1; height:300px; background:url("iimg/How-To-Start-A-Handyman-Business-1.jpg") center/cover no-repeat; }
.banner__content { flex:1; }

/* ===== TESTIMONIALS ===== */
.testimonials__grid { display:flex; gap:20px; }
.testimonials__card { flex:1; background:white; padding:20px; border-radius:10px; text-align:center; }

@media(max-width:768px){
  .about__row, .services__grid, .banner, .testimonials__grid { flex-direction:column; }
}
</style>
</head>

<!-- SHOWCASE -->
<section class="showcase">
  <div class="container">
    <h1 class="showcase__title">Historias que empiezan con una sonrisa</h1>
    <p>Soluciones profesionales para tu hogar.</p>
    <a href="#" class="showcase__btn">Services</a>
  </div>
</section>

<!-- ABOUT -->
<section class="about container">
  <div class="about__row">
    <div class="about__card"></div>
    <div class="about__card">
      <h2>While Smiles Blossom into Stories.</h2>
      <p>We create solutions.</p>
      <div class="about__mini">
        <div class="about__mini-card">Calidad</div>
        <div class="about__mini-card">Rapidez</div>
      </div>
    </div>
  </div>
</section>

<!-- SERVICES -->
<section class="services container">
  <h2>Services</h2>
  <div class="services__grid">
    <div class="services__card">
      <h3>Repair</h3>
      <img class="services__img" src="iimg/drill.webp" />
    </div>
    <div class="services__card">
      <h3>Install</h3>
      <img class="services__img" src="iimg/C3.webp" />
    </div>
    <div class="services__card">
      <h3>Maintain</h3>
      <img class="services__img" src="iimg/HANDY.jpg" />
    </div>
  </div>
</section>

<!-- BANNER -->
<section class="banner container">
  <div class="banner__img"></div>
  <div class="banner__content">
    <h2>Transforma tu espacio</h2>
    <p>Calidad y rapidez.</p>
  </div>
</section>

<!-- TESTIMONIALS -->
<section class="testimonials container">
  <h2>Clientes</h2>
  <div class="testimonials__grid">
    <div class="testimonials__card">Excelente servicio</div>
    <div class="testimonials__card">Muy confiables</div>
    <div class="testimonials__card">Recomendado</div>
  </div>
</section>

</body>
</html>