Skip to content

Commit

Permalink
index2.html testing
Browse files Browse the repository at this point in the history
  • Loading branch information
@burnt-exe
burnt-exe committed Jun 14, 2024
1 parent abfb7a1 commit 6e50a64
Showing 1 changed file with 372 additions and 0 deletions.
372 changes: 372 additions & 0 deletions index2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,372 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/forms.css">
<link rel="stylesheet" href="./css/header.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/sidebar.css">
<title>Welcome to Skunkworks: Innovative Technology and Education Solutions</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #121212;
color: #fff;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
header img {
max-width: 100%;
height: auto;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
nav ul li {
margin: 0 15px;
position: relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
}
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
padding: 0;
margin: 0;
list-style-type: none;
z-index: 1000;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li a {
padding: 10px 15px;
}
.section {
padding: 20px;
margin: 10px 0;
}
.welcome-section {
background-color: #f4f4f4;
text-align: center;
color: #000;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
form {
display: flex;
flex-direction: column;
max-width: 600px;
margin: 0 auto;
}
form input, form textarea, form button {
margin-bottom: 10px;
padding: 10px;
font-size: 1em;
width: 100%;
box-sizing: border-box;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #555;
}
.partners-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
text-align: center;
}
.partner-item {
background-color: #1f1f1f;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.statistics {
text-align: center;
margin-top: 20px;
}
.divider {
height: 2px;
background-color: #444;
margin: 20px 0;
}
.centered-container {
max-width: 800px;
margin: 0 auto;
background-color: #333;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
text-align: center;
color: #fff;
}
/* Mobile Styles */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin: 10px 0;
}
.partners-list {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<img src="./assets/LARGE%20LOGO%20AND%20TEXT%20420X120%20CENTER.png" alt="Large Logo and Text">
<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li>
<a href="#">Training</a>
<ul>
<li><a href="./AWS.html">AWS</a></li>
<li><a href="./CISCO.html">CISCO</a></li>
<li><a href="./GitHub.html">GitHub</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="./Google.html">Google</a></li>
<li><a href="./HashiCorp.html">HashiCorp</a></li>
<li><a href="./IBM-Maximo-Manage-v8.x-Certified-Administrator-Preparation-and-Certification-Learning-Path.html">IBM Maximo</a></li>
</ul>
</li>
<li>
<a href="#">Community</a>
<ul>
<li><a href="./ibm-qradar.html">IBM QRadar</a></li>
<li><a href="./ibm-security-verify-access.html">IBM Security</a></li>
<li><a href="./Microsoft.html">Microsoft</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="welcome" class="section welcome-section">
<div class="welcome-section-content">
<img src="./assets/banner%20for%20website%20Welcome%20to%20Skunkworks%20(Pty)%20Ltdtrans2.png" alt="Welcome Banner">
<h1>Welcome to Skunkworks</h1>
<p>Innovative Technology, Education Solutions, and Placement Services for Tomorrow's Businesses.</p>
<p>Dear Visitor,</p>
<p>I'm Raydo Matthee, and I'm thrilled to welcome you to Skunkworks, where the intersection of education and technology is our passion and our purpose.</p>
<p>As the CEO of Skunkworks, I proudly wear multiple hats, overseeing all aspects of our business operations. From guiding our technological direction to managing financial planning and reporting, my mission is to provide a clear vision for our team, ensuring effective resource utilization, and keeping all our teams aligned with our mission.</p>
<p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</section>
<section id="services" class="section">
<h1>Custom Learning Solutions</h1>
<div class="grid-container">
<div>
<h3>Blended Learning</h3>
<p>Blended learning programs & personalized learning paths.</p>
</div>
<div>
<h3>Course Development</h3>
<p>We provide custom eLearning courses to meet client objectives.</p>
</div>
<div>
<h3>Project Mentoring</h3>
<p>Guided support through training engagements with our Project Mentoring.</p>
</div>
<div>
<h3>Performance Support Tools</h3>
<p>We create custom job aids and guides to help employees apply new skills to real-world tasks.</p>
</div>
<div>
<h3>Training Programs</h3>
<p>We offer training in soft skills, compliance, boot camps, and provide outsourcing services.</p>
</div>
<div>
<h3>LMS</h3>
<p>Custom LMS development and mgmt. for efficient content delivery, tracking, and reporting.</p>
</div>
</div>
</section>
<section id="technology" class="section">
<h1>Technology Solutions</h1>
<p>Our primary aim is to be a one-stop-shop for businesses looking to harness the power of technology and top-notch education.</p>
<div class="grid-container">
<div>
<h3>Software Development</h3>
<p>Our experienced developers design and develop custom software solutions. Our services include web and mobile app development, software development, and application modernization.</p>
</div>
<div>
<h3>Hardware and Software</h3>
<p>We provide hardware and software products from most of the major technology vendor giants, including servers, storage solutions, networking equipment, and software licenses.</p>
</div>
<div>
<h3>Managed Cloud Services</h3>
<p>Our cloud-based solutions cater to businesses of all sizes. We offer mixed cloud models, and manage cloud infrastructure, security, disaster recovery, and cloud migration services.</p>
</div>
</div>
<button onclick="location.href='mailto:[email protected]'">EMAIL US</button>
</section>
<section id="recruitment" class="section">
<h1>Placement & Recruitment</h1>
<div class="grid-container">
<div>
<h3>Job Posting</h3>
<p>Sourcing and advertising job openings to attract qualified candidates.</p>
</div>
<div>
<h3>Candidate Screening</h3>
<p>Reviewing and filtering applications to identify the best matches.</p>
</div>
<div>
<h3>Interviews</h3>
<p>Conducting interviews to evaluate candidates' qualifications and fit.</p>
</div>
<div>
<h3>Job Offers</h3>
<p>Making offers to selected candidates and negotiating terms.</p>
</div>
</div>
<button onclick="location.href='mailto:[email protected]'">EMAIL US</button>
</section>
<section id="partners" class="section">
<h1>Our Partners</h1>
<div class="grid-container">
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>Salesforce</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>Redhat</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>IBM</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>Microsoft</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>AWS</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>GitHub</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>SAP</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>Quantitative</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>CourseDot</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>CRS</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>Checkpoint</p>
</div>
<div class="partner-item">
<img src="./assets/logo_200×1200px.png" alt="Partner Logo">
<p>LearnQuest</p>
</div>
</div>
<div class="divider"></div>
<div class="statistics">
<p>60 Instructors</p>
<p>20 Strategic Partnerships</p>
<p>+1000 Courses Offered</p>
</div>
</section>
<section id="about" class="section">
<div class="centered-container">
<h1>About Us</h1>
<p>Our team is dedicated to providing top-notch services, and our expertise spans various domains including education, technology, and business development.</p>
<p>Approach: We take a collaborative approach to every project, working closely with our clients to understand their needs and goals. We are committed to delivering solutions that meet or exceed our clients' expectations. Our team is responsive and accessible, and we pride ourselves on delivering exceptional customer service.</p>
</div>
</section>
<section id="contact" class="section">
<h1>Contact Us</h1>
<form id="contactForm">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="number" placeholder="Number" required>
<textarea name="message" placeholder="How Can We Help?" required></textarea>
<button type="submit">CALL ME BACK</button>
</form>
</section>
<footer>
<p>© 2024 Skunkworks. All rights reserved.</p>
</footer>
<script src="./js/formHandler.js"></script>
<script>
// JavaScript for mobile dropdown functionality
document.addEventListener('DOMContentLoaded', function() {
var dropdowns = document.querySelectorAll('nav ul li');
dropdowns.forEach(function(dropdown) {
dropdown.addEventListener('click', function(event) {
if (window.innerWidth <= 768) {
var submenu = this.querySelector('ul');
if (submenu) {
event.preventDefault();
submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
}
}
});
});
});
</script>
</body>
</html>

0 comments on commit 6e50a64

Please sign in to comment.