webdesgin-project/index.html at main · Christo790/webdesgin-project · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Choose Coach</title>
  <style>
    * {
      margin: 0; /* Reset margin for all elements */
      padding: 0; /* Reset padding for all elements */
      box-sizing: border-box; /* Include padding and border in element's total width and height */
    }

    body {
      font-family: 'Comic Sans MS', sans-serif; /* Set font for the body */
      background-color: #fff; /* Set background color */
      display: flex; /* Use flexbox layout */
      flex-direction: column; /* Arrange items in a column */
      align-items: center; /* Center align items horizontally */
      gap: 30px; /* Set spacing between items */
      padding-top: 30px; /* Add top padding */
      overflow-y: auto; /* Allow vertical scrolling if needed */
    }

    .container {
      display: flex; /* Use flexbox for the container */
      gap: 3%; /* Set spacing between sections */
      margin: 1.5cm 3cm; /* Set margin around the container */
    }

    .section {
      flex: 1; /* Allow sections to grow equally */
      padding: 4%; /* Set padding inside sections */
      background-color: #f5f5f7; /* Set background color for sections */
      border-radius: 25px; /* Round corners */
      display: flex; /* Use flexbox for section content */
      flex-direction: column; /* Arrange items in a column */
      justify-content: center; /* Center content vertically */
      text-align: center; /* Center text */
    }

    h1 {
      font-size: 4vw; /* Responsive font size */
      font-weight: bold; /* Set font weight */
      margin-bottom: 10%; /* Add margin below the heading */
    }

    .tag {
      color: #ff66ff; /* Text color for the wellness tag */
      font-weight: bold; /* Set font weight */
      padding: 0.6vw 1.8vw; /* Set padding for the wellness tag */
      font-size: 1.8vw; /* Responsive font size */
    }

    p {
      font-size: 1.2vw; /* Responsive font size */
      color: #444; /* Set text color */
      line-height: 1.6; /* Set line height for readability */
    }

    .card {
      display: flex; /* Use flexbox for coach card */
      justify-content: center; /* Center align content horizontally */
      align-items: center; /* Center align content vertically */
      height: 100%; /* Full height for coach card */
    }

    .image {
      width: 100%; /* Set a fixed width */
      height: 100%; /* Set a fixed height */
      border-radius: 30px; /* Round corners for the image container */
      overflow: hidden; /* Hide overflow content */
      position: relative; /* Positioning context for absolute elements */
    }

    .image img {
      width: 100%; /* Image takes full width of container */
      height: 100%; /* Image takes full height of container */
      object-fit: cover; /* Ensure the image covers the container */
      display: block; /* Prevent bottom margin in some browsers */
    }

    .reverse {
      flex-direction: row-reverse; /* Reverse layout for the second container */
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="section">
      <h1>Choose coach</h1>
      <div class="tag">Wellness</div>
      <p>Encourage overall health and well-being with personalized fitness routines designed for kids. Help your child
        develop lifelong healthy habits that contribute to their physical and mental wellness.</p>
    </div>
    <div class="section">
      <div class="card">
        <div class="image">
          <img src="https://www.graffiti9.com/wp-content/webp-express/webp-images/uploads/2019/10/Website-Banner.jpg.webp"
            alt="Coach Image">
        </div>
      </div>
    </div>
  </div>

  <div class="container reverse">
    <div class="section">
      <h1>Choose coach</h1>
      <div class="tag">Wellness</div>
      <p>Encourage overall health and well-being with personalized fitness routines designed for kids. Help your child
        develop lifelong healthy habits that contribute to their physical and mental wellness.</p>
    </div>
    <div class="section">
      <div class="card">
        <div class="image">
          <img src="https://github.com/Karan60/Projects-for-Instagram/blob/main/38.Airpods%20slider%20website/images/img6.png?raw=true"
            alt="Coach Image">
        </div>
      </div>
    </div>
  </div>

</body>

</html>