ecostruv.github.io/contact.html at master · ecostruv/ecostruv.github.io · 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">
    <title>Contact</title>
    <link rel="icon" type="image/x-icon" href="./assets/green-gem.png">

    <!-- Styling -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/contact.css">
    <link rel="stylesheet" href="./css/queries.css">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;600;700;800&family=Urbanist:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    <link href="https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>

<body>
    <!-- ---------------- NAVBAR ---------------- -->
    <nav data-aos="fade-down" data-aos-duration="800" class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a data-aos="fade-down" class="navbar-brand" href="./">
                <img id="navbar-image" src="./assets/green-gem.png" alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
                <span id="navbar-text">EcoStruv</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="material-symbols-outlined">menu</span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li data-aos="fade-down" class="nav-item"><a class="nav-link" href="./team">Our Team</a></li>
                    <li data-aos="fade-down" class="nav-item"><a class="nav-link" href="./insights">Insights</a></li>
                    <li data-aos="fade-down" class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <!-- ---------------- MAIN ---------------- -->
    <div data-aos="fade-up" data-aos-duration="1000" class="container-fluid" id="main">
        <div data-aos="fade-up" data-aos-duration="1000" class="row section-container" id="col-container">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" id="contact-container">
                <h1 id="get-in-touch">Get in touch</h1>
                <div class="text" id="contact-text">Have questions or feedback? Want to get updates from us? Send us a message or follow us out on these services!</div>
                <a href="mailto:[email protected]" data-aos="fade-up" data-aos-duration="1000" class="row contact-row" id="email">
                    <div class="contact-icon col-2"><i class="bi bi-envelope-fill"></i></div>
                    <div class="contact-details col-10">
                        <div class="contact-name">Mail</div>
                        <div class="contact">[email protected]</div>
                    </div>
                </a>
                <a href="https://www.linkedin.com/company/ecostruv/about" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200" class="row contact-row" id="linkedin">
                    <div class="contact-icon col-2"><i class="bi bi-linkedin"></i></div>
                    <div class="contact-details col-10">
                        <div class="contact-name">LinkedIn</div>
                        <div class="contact">EcoStruv</div>
                    </div>
                </a>
                <a href="https://instagram.com/ecostruv" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400" class="row contact-row" id="facebook">
                    <div class="contact-icon col-2"><i class="bi bi-instagram"></i></div>
                    <div class="contact-details col-10">
                        <div class="contact-name">Instagram</div>
                        <div class="contact">ecostruv</div>
                    </div>
                </a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" id="message-container">
                <div id="message-div">
                    <div id="message-title">Send us a message</div>
                    <div id="message-message">We'll try our best to respond in 1-2 business days.</div>
                    <div id="form-container">
                        <form action="https://formspree.io/f/xwkgkryq" method="POST" target="_blank" id="contact-form">
                            <label class="form-section"><input type="hidden" name="_next" value="https://ecostruv.tech/success"></label>
                            <label class="form-section"><input class="form-input" placeholder="Name" type="text" name="name"></label>
                            <label class="form-section"><input class="form-input" placeholder="Email" type="email" name="email"></label>
                            <label class="form-section">
                                <textarea id="message" placeholder="Message" class="form-input" name="message"></textarea>
                            </label>
                            <button type="submit" id="submit">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ---------------- FOOTER ---------------- -->
    <div data-aos="fade-up" data-aos-duration="1000" class="row" id="footer">
        <div data-aos="fade-up" data-aos-duration="1000" class="footer-col col-sm-12 col-md-6 col-lg-8" id="footer-company">
            <div id="footer-brand">
                <img src="./assets/green-gem.png" id="footer-image" height="24" width="24">
                <span id="footer-name">EcoStruv</span>
            </div>
            <div class="footer-light">Annandale, VA</div>
            <div class="footer-light">United States of America</div>
            <div class="footer-light">&copy; EcoStruv 2024, All Rights Reserved.</div>
            <a href="mailto:[email protected]" id="footer-email">[email protected]</a>
        </div>
        <div data-aos="fade-up" data-aos-duration="1000" class="footer-col footer-links col-sm-6 col-md-3 col-lg-2">
            <div class="footer-header links-header">Quick Links</div>
            <a href="./" class="footer-link">Home</a>
            <a href="./team" class="footer-link">Our Team</a>
            <a href="./insights" class="footer-link">Insights</a>
            <a href="./contact" class="footer-link">Contact</a>
        </div>
        <div data-aos="fade-up" data-aos-duration="1000" class="footer-col footer-links col-sm-6 col-md-3 col-lg-2">
            <div class="footer-header links-header">Social</div>
            <a target="_blank" href="https://www.linkedin.com/company/ecostruv/about" class="footer-link">LinkedIn</a>
            <a target="_blank" href="https://www.github.com/ecostruv/" class="footer-link">GitHub</a>
            <a target="_blank" href="https://www.instagram.com/ecostruv" class="footer-link">Instagram</a>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./js/form.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>AOS.init();</script>
</body>
</html>