OpenFiles/program.html at main · Coderad32/OpenFiles · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Open Work Inc - Developer Platform</title>
  <!-- CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
    <h5 class="my-0 mr-md-auto font-weight-normal" style="border: solid springgreen 5px; padding: 10px">Open Work Inc</h5>
    <nav class="my-2 my-md-0 mr-md-3">
      <a class="p-2 text-dark" href="#">Features</a>
      <a class="p-2 text-dark" href="#" style="border: solid 5px slateblue;">Updates</a>
      <a class="p-2 text-dark" href="#" style="border-top: 5px solid slateblue;">Support</a>
      <a class="p-2 text-dark" href="#">Donate</a>
    </nav>
  </header>

  <main class="container" style="border: solid 5px black;">
    <div class="row">
      <div class="col-md-4">
        <h2>About The Project</h2>
        <p>This project is designed for developers seeking new challenges. It is led by Cody Bunnell, a remote programmer from Colorado, USA.</p>
      </div>
      <div class="col-md-4">
        <h2>Developer-Centric</h2>
        <p>At Open Work, developers are our priority. Signing up grants access to boilerplates, templates, and modules in our library.</p>
      </div>
      <div class="col-md-4">
        <h2>Content Creation Platform</h2>
        <p>An engaging way to generate and share data for global impact.</p>
        <ul>
          <li>Optional data contributions.</li>
        </ul>
      </div>
    </div>

    <div class="text-center my-4">
      <a class="btn btn-secondary" href="#" style="background-color: green;">Learn More &raquo;</a>
      <a class="btn btn-secondary" href="#" style="background-color: yellow;">View Details &raquo;</a>
      <a class="btn btn-secondary" href="#" style="background-color: crimson;">Contact Us &raquo;</a>
    </div>

    <section class="pricing-header text-center">
      <h1 class="display-4" style="border-bottom: springgreen solid 5px;">Donate Resources</h1>
      <p class="lead">Support the project by choosing a donation tier that suits you.</p>
    </section>

    <div class="card-deck mb-3 text-center">
      <div class="card mb-4 box-shadow">
        <div class="card-header">
          <h4>Free Signup</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">$25 <small>/ mo</small></h1>
          <p>Basic signup with email verification to access resources.</p>
          <button class="btn btn-lg btn-outline-primary">Sign Up for Free</button>
        </div>
      </div>
      <div class="card mb-4 box-shadow" style="background-color: wheat;">
        <div class="card-header">
          <h4>Pro Account</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">$50 <small>/ mo</small></h1>
          <p>Unlock all API features and receive a developer verification key.</p>
          <button class="btn btn-lg btn-primary">Get Started</button>
        </div>
      </div>
      <div class="card mb-4 box-shadow">
        <div class="card-header">
          <h4>Support Network</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">$100 <small>/ mo</small></h1>
          <p>Access privacy terms and guidelines for enhanced support.</p>
          <button class="btn btn-lg btn-primary">Contact Us</button>
        </div>
      </div>
    </div>
  </main>

  <footer class="container border-top pt-4">
    <div class="row">
      <div class="col-md-4">
        <img src="162437900.jpg" alt="Logo" width="150" height="150">
        <small class="d-block text-muted">&copy; 2022-2024 Open Work Inc.</small>
      </div>
      <div class="col-md-4">
        <h5>Features</h5>
        <ul class="list-unstyled">
          <li><a href="#">OS Updater</a></li>
          <li><a href="#">Script Debugger</a></li>
          <li><a href="#">Teamwork</a></li>
          <li><a href="#">Developer Zone</a></li>
        </ul>
      </div>
      <div class="col-md-4">
        <h5>Resources</h5>
        <ul class="list-unstyled">
          <li><a href="#">Documentation</a></li>
          <li><a href="#">Options</a></li>
          <li><a href="#">Configurations</a></li>
        </ul>
      </div>
    </div>
    <div class="text-center mt-4">
      <p>&copy; Open Work Inc. 2023-2024</p>
      <form>
        <label for="email">Subscribe for Updates:</label>
        <input type="email" id="email" placeholder="Enter email">
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </footer>

  <!-- JavaScript Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>

</html>