Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history 
Signed-off-by: Raydo Matthee <[email protected]>
  • Loading branch information
@burnt-exe
burnt-exe authored Jun 12, 2024
1 parent 12eef0b commit 7d3112f
Showing 1 changed file with 169 additions and 101 deletions.
270 changes: 169 additions & 101 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Raydo Matthee</title>
<link rel="stylesheet" href="https://unpkg.com/@carbon/styles/css/styles.css">
<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>IBM Training and Services | Skunkworks</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 80%;
margin: auto;
Expand All @@ -23,24 +22,28 @@
padding: 15px 0;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding: 0 15px;
header nav {
display: flex;
justify-content: center;
}
header ul {
padding: 0;
header nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
position: relative;
}
header ul li {
header nav ul li {
position: relative;
margin: 0 15px;
}
header ul li ul {
header nav ul li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding: 0 15px;
}
header nav ul li ul {
position: absolute;
top: 100%;
left: 0;
Expand All @@ -49,61 +52,51 @@
flex-direction: column;
padding: 0;
list-style: none;
}
header ul li ul li {
padding: 10px;
white-space: nowrap;
}
header ul li ul li a {
padding: 0;
}
.dropdown-content {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
background: #50b3a2;
padding: 0;
list-style: none;
z-index: 1;
}
.dropdown-content a {
color: #fff;
header nav ul li ul li {
padding: 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #e8491d;
}
.show {
header nav ul li:hover ul {
display: flex;
}
.main {
.section {
padding: 30px 0;
}
.main h1 {
color: #50b3a2;
.welcome-section {
background: #e4f5f9;
text-align: center;
padding: 60px 0;
}
.main p {
line-height: 1.6;
text-align: center;
.welcome-section-content {
max-width: 600px;
margin: auto;
}
.link {
text-align: center;
margin-top: 20px;
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.link a {
color: #e8491d;
text-decoration: none;
font-weight: bold;
font-size: 18px;
form {
display: flex;
flex-direction: column;
max-width: 600px;
margin: auto;
}
.link a:hover {
text-decoration: underline;
form input, form textarea, form button {
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
form button {
background: #50b3a2;
color: #fff;
border: none;
cursor: pointer;
}
form button:hover {
background: #3e8e86;
}
footer {
background: #333;
Expand All @@ -113,54 +106,129 @@
margin-top: 20px;
}
</style>
<script>
function toggleDropdown() {
document.getElementById("docsDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<header>
<div class="container">
<h1>Raydo Matthee</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="#" class="dropbtn" onclick="toggleDropdown()">Doc's</a>
<ul id="docsDropdown" class="dropdown-content">
<li><a href="doc/iso9001-velocity-venture.html">ISO9001 Implementation for Velocity Venture</a></li>
<li><a href="doc/qms-4levels.html">Quality Management System Development for 4Levels</a></li>
<li><a href="doc/audit-course-monster.html">Internal Audit Report for Course Monster</a></li>
<li><a href="doc/IBM.html">IBM Documentation</a></li>
<li><a href="doc/faq.md">FAQ</a></li>
<li><a href="doc/index.md">Index</a></li>
</ul>
</li>
</ul>
<nav>
<ul>
<li><a href="#training">Training</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#isv">ISV Offerings</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="main">
<h1>Welcome to My Professional Portfolio</h1>
<p>Hello! I'm Raydo Matthee, a seasoned Solutions Architect with extensive experience in quality management systems, strategic guidance, and IT solutions. Explore my work samples and projects to learn more about my expertise and accomplishments.</p>
<section id="welcome" class="section welcome-section">
<div class="welcome-section-content">
<h1>IBM Solutions by Skunkworks</h1>
<p>Innovative IBM training, services, and products to transform your business.</p>
</div>
</section>
<section id="training" class="section">
<div class="container">
<h1>IBM Training</h1>
<div class="grid-container">
<div>
<h3>IBM Cloud Training</h3>
<p>Master IBM Cloud for efficient cloud computing and management solutions.</p>
</div>
<div>
<h3>IBM Watson Training</h3>
<p>Leverage the power of IBM Watson for AI and data analytics.</p>
</div>
<div>
<h3>IBM Blockchain Training</h3>
<p>Understand and implement blockchain technology with IBM Blockchain training.</p>
</div>
<div>
<h3>IBM Security Training</h3>
<p>Enhance your skills in cybersecurity with IBM Security training programs.</p>
</div>
</div>
</div>
<div class="link">
<a href="doc/iso9001-velocity-venture.html">View My ISO9001 Implementation Project</a>
</section>
<section id="services" class="section">
<div class="container">
<h1>IBM Services</h1>
<div class="grid-container">
<div>
<h3>Cloud Integration</h3>
<p>Integrate IBM Cloud with your existing systems for seamless operations.</p>
</div>
<div>
<h3>Managed Services</h3>
<p>Comprehensive managed services for IBM environments.</p>
</div>
<div>
<h3>Consulting</h3>
<p>Strategic consulting to maximize the value of your IBM investments.</p>
</div>
<div>
<h3>Support</h3>
<p>24/7 support for all your IBM products and solutions.</p>
</div>
</div>
</div>
</section>
<section id="products" class="section">
<div class="container">
<h1>IBM Products</h1>
<div class="grid-container">
<div>
<h3>IBM Cloud</h3>
<p>Robust cloud computing solutions from IBM.</p>
</div>
<div>
<h3>IBM Watson</h3>
<p>AI-powered solutions for smarter business decisions.</p>
</div>
<div>
<h3>IBM Blockchain</h3>
<p>Blockchain solutions for secure and transparent transactions.</p>
</div>
<div>
<h3>IBM Security</h3>
<p>Advanced security solutions to protect your business.</p>
</div>
</div>
</div>
</section>
<section id="isv" class="section">
<div class="container">
<h1>ISV Offerings</h1>
<div class="grid-container">
<div>
<h3>Custom Solutions</h3>
<p>Tailored software solutions built on IBM technologies.</p>
</div>
<div>
<h3>Integration Services</h3>
<p>Seamless integration of third-party applications with IBM products.</p>
</div>
<div>
<h3>Application Development</h3>
<p>Developing applications that leverage the power of IBM platforms.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="section">
<div class="container">
<h1>Contact Us</h1>
<form action="#" method="post">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="text" name="number" placeholder="Number">
<textarea name="message" placeholder="How Can We Help?"></textarea>
<button type="submit">CALL ME BACK</button>
</form>
</div>
</div>
</section>
<footer>
<p>© 2024 Raydo Matthee. All Rights Reserved.</p>
<p>© 2024 Skunkworks. All rights reserved.</p>
</footer>
</body>
</html>

0 comments on commit 7d3112f

Please sign in to comment.