Mi_project/index.html at main · Ellaria35/Mi_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
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SPIKE.studio</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="volleyball.png" type="image/x-icon" />
  </head>
  <body>
    <!--header section -->
    <header class="header-cont">
      <nav class="navbar">
        <div class="logo">
          <img src="volleyball.png" style="height: 35px; width: 35px" alt="" />
          <p><b>SPIKE</b>.studio</p>
        </div>
        <ul>
          <li class="optionsFirst" style="color: rgb(255, 133, 2)">
            <a href="#home">Home</a>
          </li>
          <li class="options"><a href="#position">Positions</a></li>
          <li class="options"><a href="#rules">Rules</a></li>
          <li class="options"><a href="#">Eqipment</a></li>
          <li class="options"><a href="#">Contact</a></li>
          <li class="optionsLast"><a href="#">JOIN A TEAM</a></li>
        </ul>
      </nav>
      <div class="caption" id="home">
        <h1>RISE ABOVE THE NET</h1>
        <p class="caption-desc">
          Precision Meets Power. Your Journey in Volleyball Starts Here.
        </p>
        <div class="cta-btns">
          <button class="getStarted" style="margin-right: 1rem">
            GET STARTED
          </button>
          <button class="learnBasics">LEARN BASICS</button>
        </div>
      </div>
    </header>

    <!-- Position section -->
    <section class="position-section" id="position">
      <h2>COURT POSITIONS</h2>
      <hr />
      <div class="positions">
        <div class="position">
          <img src="setter.png" alt="" />
          <h3>SETTER</h3>
          <p>The Team Quarterback. Orchestrates the offense</p>
        </div>
        <div class="position">
          <img src="spike.png" alt="" />
          <h3>OUTSIDE HITTER</h3>
          <p>Primary scorer. Delivers dynamic attacks.</p>
        </div>
        <div class="position">
          <img src="spike.png" alt="" />
          <h3>OPPOS</h3>
          <p>Also delivers attacks. Lorem, ipsum dolor.</p>
        </div>
        <div class="position">
          <img src="spike.png" alt="" />
          <h3>WING SPIKERS</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="position">
          <img src="dig.png" alt="" />
          <h3>LIBERO</h3>
          <p>Defensive Anchor. Masters serve recieve.</p>
        </div>
      </div>
    </section>

    <!-- Rules Section -->
    <section class="rules-section" id="rules">
      <div class="rules-cont">
        <div class="court-diagram">
          <h3>COURT DIMENSIONS</h3>
          <img src="vbcourt.png" alt="Volleyball Court Dimensions" />
        </div>

        <div class="rules-list">
          <h3>BASIC RULES</h3>
          <ul>
            <li><span>✔</span> 3 Hits Max per side</li>
            <li><span>✔</span> No Net Touch allowed</li>
            <li><span>✔</span> Rotate Clockwise after a side-out</li>
            <li><span>✔</span> Ball is "In" if it touches the line</li>
            <li><span>✔</span> No catching or throwing the ball</li>
          </ul>
        </div>
      </div>
    </section>

    <!-- footer section -->
    <footer>
      <div class="footer-cont">
        <div class="footerBrand">
          <h2>SPIKE.studio</h2>
          <p>Precision meets power. Orchestrating the offense since 2007.</p>
        </div>

        <div class="footerLinks">
          <li><a href="#home">Home</a></li>
          <li><a href="#position">Positions</a></li>
          <li><a href="#rules">Rules</a></li>
          <li><a href="#">Ccntact</a></li>
        </div>

        <div class="social-icons">
          <span
            ><img
              src="instagram.png"
              style="height: 1rem; width: 1rem; margin-right: 0.5rem"
              alt=""
            /><a href="#" class="ig">Instagram</a></span
          >
          <span
            ><img
              src="tik-tok.png"
              style="height: 1rem; width: 1rem; margin-right: 0.5rem"
              alt=""
            /><a href="#" class="tt">Tiktok</a></span
          >
          <span
            ><img
              src="youtube.png"
              style="height: 1rem; width: 1rem; margin-right: 0.5rem"
              alt=""
            /><a href="#" class="yt">Youtube</a></span
          >
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2007 SPIKE.studio | Built with Passion for the Game</p>
      </div>
    </footer>
  </body>
</html>