opsvision-web/index.html at main · opsvision/opsvision-web · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OpsVision | Proven Technology Solutions</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #0d2a4c;
      color: #ffffff;
    }
    header {
      background-color: #0d2a4c;
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    nav a {
      color: #ffffff;
      text-decoration: none;
      margin-left: 20px;
      font-weight: 500;
    }
    .hero {
      text-align: center;
      padding: 80px 20px 40px;
      background-color: #0d2a4c;
    }
    .hero h1 {
      font-size: 2.5em;
      margin-bottom: 0.2em;
    }
    .hero p {
      font-size: 1.2em;
      margin-bottom: 1.5em;
    }
    .btn {
      background-color: transparent;
      border: 2px solid #ffffff;
      padding: 10px 20px;
      color: #ffffff;
      text-transform: uppercase;
      cursor: pointer;
      font-weight: bold;
    }
    .values, .practice-areas {
      background-color: #ffffff;
      color: #0d2a4c;
      padding: 60px 20px;
      text-align: center;
    }
    .values h2, .practice-areas h2 {
      margin-bottom: 40px;
      font-size: 1.8em;
    }
    .value-grid, .practice-grid {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
      max-width: 900px;
      margin: 0 auto;
    }
    .value, .practice {
      max-width: 250px;
    }
    .footer {
      background-color: #0d2a4c;
      color: #ffffff;
      text-align: center;
      padding: 20px;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <header>
    <div><strong>OpsVision Solutions</strong></div>
    <nav>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <section class="hero">
    <h1>PROVEN TECHNOLOGY SOLUTIONS</h1>
    <p>Expert guidance for business transformation</p>
    <button class="btn">Learn More</button>
  </section>
  <section class="values">
    <h2>Our Values</h2>
    <div class="value-grid">
      <div class="value">
        <h3>Expertise</h3>
        <p>Our elite team provides cross-technology expertise</p>
      </div>
      <div class="value">
        <h3>Agnostic Approach</h3>
        <p>Independent recommendations for your IT vision</p>
      </div>
      <div class="value">
        <h3>Proven Methodologies</h3>
        <p>Extensive experience applying no-fail approaches</p>
      </div>
      <div class="value">
        <h3>Commitment to Success</h3>
        <p>Guaranteeing transformation outcomes</p>
      </div>
    </div>
  </section>
  <section class="practice-areas">
    <h2>Practice Areas</h2>
    <div class="practice-grid">
      <div class="practice">
        <h3>Cloud</h3>
        <p>Seamless cloud adoption strategies and solutions</p>
      </div>
      <div class="practice">
        <h3>DevOps</h3>
        <p>Bridging operational gaps with agile practices</p>
      </div>
      <div class="practice">
        <h3>IT Service Management</h3>
        <p>Ensuring the quality of your products and services</p>
      </div>
    </div>
  </section>
  <footer class="footer">
    <p>&copy; 2024 OpsVision. All rights reserved. | <a href="#" style="color: #ffffff; text-decoration: underline;">Privacy Policy</a></p>
  </footer>
</body>
</html>