WEBstart-website/index.html at main · MODIMOLOLG/WEBstart-website · 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://kit.fontawesome.com/2e1b34374e.js" crossorigin="anonymous"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>WebStart</title>
    <link rel="icon" type="image/x-icon" href="WebStart small logo.png">
</head>
<body>
    <div class="topbar" id="topbar">
        <div class="TBbtn btn" id="menu"><i class="fa-solid fa-bars icon"></i></div>
        <img src="WebStart toplogo.svg" class="Logobtn">
        <div class="TBbtn btn" id="form"><i class="fa-regular fa-envelope icon"></i></div>
    </div>
    <div class="SideBar" id="SideBar">
        <div class="SElement topp" id="n1">
            <img src="gradient.jpg" class="Simg">
            <span class="Etext">WebStart & Centerprice</span>
        </div>
        <div class="SElement" id="n2">
            <img src="gradient.jpg" class="Simg">
            <span class="Etext">Services & Products</span>
        </div>
        <div class="SElement" id="n3">
            <img src="gradient.jpg" class="Simg">
            <span class="Etext">Teem Members</span>
        </div>
        <div class="SElement" id="n4">
            <img src="gradient.jpg" class="Simg">
            <span class="Etext">Recruitment Details</span>
        </div>
        <div class="SElement" id="n5">
            <img src="gradient.jpg" class="Simg">
            <span class="Etext">Portflio Showcase</span>
        </div>
        <div class="SElement" id="n6">
            <img src="gradient.jpg" class="Simg">
            <span class="Etext">Enquery form</span>
        </div>
        <div class="SElement btmm" id="n7">
            <img src="gradient.jpg" class="Simg">
            <span class="Etext">Services & Products</span>
        </div>
    </div>
    <div class="globalBlur" id="globalBlur"></div>

    <div class="bg" id="bg"></div>
    <div class="LogoHandler"  id="MianLogo">
        <img src="WebStart logo.svg" class="MainLogo">
        <img src="WebStart words.svg" class="LogoWords">
    </div>
    <div class="AllContainer" id="AllContainer">
        <div class="PageContainer first" id="p1">
            <div class="ItemsContainer top">
                <h1><i class="fa-solid fa-face-smile-wink"></i> Welcome to WebStart!</h1>
                <p>The cutting-edge web design scheme brought to you by the NPTC business incubator, Centerprise. Our goal is to provide bespoke web design services tailored to the unique needs of businesses supported by our organization. Whether you are a small business owner or a sole trader, we are here to help you establish a powerful online presence that will elevate your brand.</p>
                <h1 id="p2"><i class="fa-solid fa-circle-question"></i> About Centerprise</h1>
                <p>Centerprise is a leading business incubator dedicated to fostering entrepreneurial growth and innovation. With a proven track record of success, we have supported numerous startups and small businesses in achieving their goals. Our passion lies in empowering businesses to thrive in the digital landscape.</p>
            </div>
            <div class="ItemsContainer btm">
                <h1><i class="fa-solid fa-bell-concierge"></i> Services and Products Offered by WebStart</h1>
                <p>
                    <i class="fa-solid fa-paintbrush"></i> Custom Web Design: We specialize in creating tailor-made websites that align with your brand identity and objectives. Our team of skilled designers and developers work closely with you to bring your vision to life, ensuring a unique online presence that stands out from the competition.
                </p>
                <p>
                    <i class="fa-solid fa-mobile-screen"></i> Responsive Web Development: In today's mobile-centric world, having a responsive website is essential. We build websites that adapt seamlessly across different devices and screen sizes, providing an optimal user experience and maximizing your reach to potential customers.
                </p>
                <p id="p3">
                    <i class="fa-solid fa-magnifying-glass-chart"></i> Search Engine Optimization (SEO): A well-designed website is just the beginning. We optimize your website's structure, content, and meta-tags to improve its visibility in search engine rankings. By implementing effective SEO strategies, we help increase organic traffic to your site, generating more leads and conversions.
                </p>
            </div>
        </div>
        <div class="PageContainer">
            <div class="ItemsContainer top" id="ItemsContainer1">
                <h1><i class="fa-solid fa-people-group"></i> Meet our teem members</h1>
                <p><i class="fa-solid fa-circle-info"></i> Hover over the miniatures to see more info</p>
                <div class="ImageGallery">
                    <div class="ImageCard">
                        <img src="Person3.jpg" class="ImagePicture">
                        <p class="infoname">Ethan Lewis</p>
                        <h1 class="inforole">Lead Developer</h1>
                    </div>
                    <div class="ImageCard">
                        <img src="Person1.jpg" class="ImagePicture">
                        <p class="infoname">Emily Hughes</p>
                        <h1 class="inforole">UI Designer</h1>
                    </div>
                    <div class="ImageCard">
                        <img src="Person4.jpg" class="ImagePicture">
                        <p class="infoname">Noah Griffiths</p>
                        <h1 class="inforole">Project Manager</h1>
                    </div>
                    <div class="ImageCard">
                        <img src="Person5.jpg" class="ImagePicture">
                        <p class="infoname">Thomas Davis</p>
                        <h1 class="inforole">Content Writer</h1>
                    </div>
                    <div class="ImageCard">
                        <img src="Person6.jpg" class="ImagePicture">
                        <p class="infoname">Amelia Roberts</p>
                        <h1 class="inforole">Product Manager</h1>
                    </div>
                    <div class="ImageCard">
                        <img src="Person7.jpg" class="ImagePicture">
                        <p class="infoname">George Edwards</p>
                        <h1 class="inforole">Data Analyst</h1>
                    </div>
                    <div class="ImageCard" id="p4">
                        <img src="Person8.jpg" class="ImagePicture">
                        <p class="infoname">Lily Griffiths</p>
                        <h1 class="inforole">UX Designer</h1>
                    </div>
                </div>
            </div>
            <div class="ItemsContainer btm">
                <h1><i class="fa-solid fa-person-circle-plus"></i> Recruitment Details for Potential New Team Members</h1>
                <p>
                    At WebStart, we are always on the lookout for talented individuals to join our team. If you have a passion for web design, a keen eye for detail, and a drive to create exceptional digital experiences, we encourage you to consider becoming part of our dynamic team. Here are the recruitment details for potential new team members:
                </p>
                <ol>
                    <li>As part of the application process, we highly value reviewing your portfolio to assess your design capabilities and creativity. Prepare a portfolio showcasing your best work, highlighting relevant projects and demonstrating your skills in web design and development.</li>
                    <li>Prepare a comprehensive resume or curriculum vitae (CV) that includes your educational background, work experience, relevant skills, and any certifications or achievements. Tailor your resume to highlight your expertise in web design and development.</li>
                    <li>Craft a compelling cover letter that introduces yourself, explains your interest in joining WebStart, and highlights how your skills and experience align with the position you are applying for. Use this opportunity to showcase your enthusiasm and passion for web design.</li>
                    <li id="p5">Submit your portfolio, resume, CV, and cover letter through the designated application process mentioned in the job posting. This could be an online form or email submission. Ensure all required documents are attached and follow any specific instructions provided.</li>
                  </ol>
            </div>
        </div>
        <div class="PageContainer">
            <div class="ItemsContainer top" id="ItemsContainer1">
                <h1><i class="fa-solid fa-suitcase"></i> Portflio Showcase</h1>
                <img src="Portfolio1.jpg" class="portfolio">
                <img src="Portfolio2.jpg" class="portfolio">
                <img src="Portfolio3.png" class="portfolio">
            </div>
            <div class="ItemsContainer btm" id="ItemsContainer1">
                <h1 id="p6"><i class="fa-solid fa-link"></i> Links to Web Development Learning Materials</h1>
                <ul>
                    <li><a href="https://www.freecodecamp.org/">freeCodeCamp</a>
                    </li>
                    <li><a href="https://www.codecademy.com/">Codecademy</a>
                    </li>
                    <li><a href="https://www.theodinproject.com/">The Odin Project</a>
                    </li>
                    <li><a href="https://www.udemy.com/">Udemy</a>
                    </li>
                    <li><a href="https://www.pluralsight.com/">Pluralsight</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="PageContainer">
            <div class="ImageCardBack ImageCardBackAnim" id="formAct">
                <img src="formBG.png" class="ImagePictureBack ImagePictureBackAnim" id="inv">
                <span class="infoForm" id="infoForm">Still have any questions?<br>
                    Click here to fill an enquery form!
                </span>
                <div class="formContainer" id="formContainer">
                    <div class="formItem">
                        Name and Surname:
                        <input type="tel">
                    </div>
                    <div class="formItem">
                        Phone number:
                        <input type="text">
                    </div>
                    <div class="formItem">
                        Email address:
                        <input type="text">
                    </div>
                    <div class="formItem">
                        Enquery:
                        <textarea></textarea>
                    </div>
                    <div class="formButton btn" id="submit">
                        Submit
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <p class="footerText">© Centerprice 2023<br>
                Designed and developed by Maksym Kheilik</p>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>