equipollence/index.html at prod · mckaysalisbury/equipollence · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Equipollence Consulting</title>
    <style>
        /* Basic reset and body styling */
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            color: #fff;
            scroll-behavior: smooth;
        }

        /* General section styling */
        .section {
            /* Full height of the viewport */
            height: 100vh;
            /* Center content vertically and horizontally */
            display: flex;
            justify-content: center;
            align-items: center;
            /* Parallax effect: background is fixed in place */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }

        #homearea {
            background-image: url('images/airForceTexture.webp');
        }

        #architecturearea {
            background-image: url('images/architecture.webp');
        }

        #dataarea {
            background-image: url('images/lego.webp');
        }

        #trainingarea {
            background-image: url('images/mars.webp');
        }

        /* Styling for the logo */
        .logo {
            max-width: 40vw; /* Scales with viewport width on smaller screens */
            height: auto;
            /* margin-bottom: 1.5rem; */
            border-radius: 0.5rem;
        }

        /* Content container styling */
        .content {
            background-color: rgba(0, 0, 0, 0.6);
            padding: 2rem 4rem;
            border-radius: 1rem;
            text-align: center;
            max-width: 80%;
        }

        .content h1 {
            font-size: 3rem;
            margin-top: 0;
            margin-bottom: 1rem;
            font-weight: 700;
        }

        .content p {
            font-size: 1.2rem;
            line-height: 1.6;
        }

        /* Arrow to indicate scrolling */
        .scroll-down {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2rem;
            animation: bounce 2s infinite;
        }

        .fixed-corner-area {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            background-color: rgba(255, 255, 255, 0.6);
            color: black;
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            font-size: 0.9rem;
            z-index: 10; /* Ensure it's above other content */
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-20px);
            }
            60% {
                transform: translateX(-50%) translateY(-10px);
            }
        }

    </style>
</head>
<body>
    <div id="homearea" class="section">
        <div class="content">
            <img src="./images/ec logo white.svg" alt="Company Logo" class="logo">
            <h1>Equipollence Consulting</h1>
            <p>Software engineering consulting and contracting.</p>
            <p>Scroll down to see more.</p>
        </div>
        <div class="scroll-down">&#8595;</div>
    </div>

    <div id="architecturearea" class="section">
        <div class="content">
            <h1>System Architecture</h1>
            <p>From monoliths to microservices. From REST to event-sourced. We can help you plan for the future, or make small improvements today.</p>
        </div>
    </div>

    <div id="dataarea" class="section">
        <div class="content">
            <h1>Data Modeling</h1>
            <p>
                We have substantial and deep understanding of databases and data storage. We can help with initial or growth data modeling.
                We can help with database design, and all levels of database normalization.
                We can also teach about non-relational datastores and when to use them.
            </p>
        </div>
    </div>

    <div id="trainingarea" class="section">
        <div class="content">
            <h1>Training</h1>
            <p>
                We have substantial expertise in many areas of software engineering, and are capable of training individuals or groups of engineers or
                executives.
            </p>
        </div>
    </div>

    <div class="fixed-corner-area">
        <p>Contact Us</p>
        <p><a href="mailto:info@equipollence.com">info@equipollence.com</a></p>
    </div>
</body>
</html>