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 Aug 3, 2024
1 parent efc43f3 commit d80ffc5
Showing 1 changed file with 31 additions and 159 deletions.
190 changes: 31 additions & 159 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,16 @@
<meta name="keywords" content="Technology, Education, Placement Services, Cloud Services, Software Development" />
<meta name="author" content="Skunkworks" />

<!-- Carbon Design System CSS -->
<link href="https://unpkg.com/@carbon/styles/css/styles.css" rel="stylesheet" />

<!-- Include CSS Files -->
<link href="./css/footer.css" rel="stylesheet" />
<link href="./css/forms.css" rel="stylesheet" />
<link href="./css/header.css" rel="stylesheet" />
<link href="./css/main.css" rel="stylesheet" />
<link href="./css/sidebar.css" rel="stylesheet" />
<link href="./css/button.css" rel="stylesheet" />
<link href="./css/carbon-components.min.css" rel="stylesheet" />
<link href="./css/styles.css" rel="stylesheet" />

<!-- Favicon -->
<link href="https://github.com/skunkworksza/www/blob/main/assets/skunkworks/logo-skunkworks-trans%2040%20%C3%97%2040%20px.png?raw=true" rel="icon" type="image/png" />

Expand Down Expand Up @@ -68,18 +75,13 @@
display: block;
}

.section {
padding: 20px;
margin: 20px 0;
nav ul li ul li a {
padding: 10px 15px;
}

.welcome-section-content {
background-color: #000000;
max-width: 800px;
margin: 0 auto;
.section {
padding: 20px;
border: 2px solid #ffffff;
border-radius: 8px;
margin: 20px 0;
}

.grid-container {
Expand All @@ -88,66 +90,13 @@
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: #fff;
color: #000;
border: none;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #ddd;
}

.partners-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
text-align: center;
}

.partner-item {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.partner-item img {
max-width: 100%;
max-height: 100px;
object-fit: contain;
}

.divider {
height: 2px;
background-color: #444;
Expand All @@ -157,42 +106,16 @@
.centered-container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
background-color: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
text-align: center;
color: #000;
}

.libutton {
display: flex;
flex-direction: column;
justify-content: center;
padding: 7px;
text-align: center;
outline: none;
text-decoration: none !important;
color: #fff !important;
width: 200px;
height: 32px;
border-radius: 16px;
background-color: #fff;
font-family: "SF Pro Text", Helvetica, sans-serif;
margin: 10px auto;
}

.icon {
width: 20px;
height: 20px;
margin-right: 5px;
}

.service-icon {
width: 40px;
height: 40px;
display: block;
margin: 0 auto 10px auto;
.bx--tile-content p {
margin: 0;
}

/* Mobile Styles */
Expand Down Expand Up @@ -247,90 +170,39 @@
</nav>
</header>

<!-- Start Training Section -->
<section class="bx--section">
<div class="bx--grid">
<br>

<!-- "Start Training" Section -->
<div data-hidden="false" id="section-1" class="bx--grid">
<section class="bx--section start-training">
<div class="bx--row">
<div class="bx--col-lg-12">
<h1 class="bx--type-expressive-heading-04">What IBM product area do you want to start learning today?</h1>
<div class="bx--grid" style="grid-template-columns: repeat(3, 1fr); grid-auto-rows: 12rem; gap: 8px;">
<a class="bx--tile bx--tile--clickable" href="#">
<div class="bx--tile-content">
<p class="bx--type-body-long-02">Artificial Intelligence</p>
<p class="bx--type-body-long-01">watsonx product suite, Artificial Intelligence, Data Science, Machine Learning</p>
</div>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" class="bx--tile--icon">
<path d="M9.3 3.7L13.1 7.5 1 7.5 1 8.5 13.1 8.5 9.3 12.3 10 13 15 8 10 3z"></path>
</svg>
</a>
<a class="bx--tile bx--tile--clickable" href="#">
<div class="bx--tile-content">
<p class="bx--type-body-long-02">Automation</p>
<p class="bx--type-body-long-01">APIC, ACE, MQ, CP4i, AIOPs, Turbonomic, Instana, Apptio, WAS, Liberty</p>
</div>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" class="bx--tile--icon">
<path d="M9.3 3.7L13.1 7.5 1 7.5 1 8.5 13.1 8.5 9.3 12.3 10 13 15 8 10 3z"></path>
</svg>
</a>
<a class="bx--tile bx--tile--clickable" href="#">
<div class="bx--tile-content">
<p class="bx--type-body-long-02">Cloud</p>
<p class="bx--type-body-long-01">Power Virtual Server, SAP, VMware, AI Infrastructure, Regulated Industries</p>
</div>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" class="bx--tile--icon">
<path d="M9.3 3.7L13.1 7.5 1 7.5 1 8.5 13.1 8.5 9.3 12.3 10 13 15 8 10 3z"></path>
</svg>
</a>
<a class="bx--tile bx--tile--clickable" href="#">
<div class="bx--tile-content">
<p class="bx--type-body-long-02">Data, Analytics, and Business Automation</p>
<p class="bx--type-body-long-01">Cloud Pak for Data, Data, Data Management & Analytics, Business Automation</p>
</div>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" class="bx--tile--icon">
<path d="M9.3 3.7L13.1 7.5 1 7.5 1 8.5 13.1 8.5 9.3 12.3 10 13 15 8 10 3z"></path>
</svg>
</a>
<a class="bx--tile bx--tile--clickable" href="#">
<div class="bx--tile-content">
<p class="bx--type-body-long-02">IT Infrastructure</p>
<p class="bx--type-body-long-01">IBM Power, IBM Storage, IBM Z</p>
</div>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" class="bx--tile--icon">
<path d="M9.3 3.7L13.1 7.5 1 7.5 1 8.5 13.1 8.5 9.3 12.3 10 13 15 8 10 3z"></path>
</svg>
</a>
<a class="bx--tile bx--tile--clickable" href="#">
<div class="bx--tile-content">
<p class="bx--type-body-long-02">Security</p>
<p class="bx--type-body-long-01">QRadar Suite, Guardium Suite, Verify, Trusteer, MaaS360</p>
</div>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" class="bx--tile--icon">
<path d="M9.3 3.7L13.1 7.5 1 7.5 1 8.5 13.1 8.5 9.3 12.3 10 13 15 8 10 3z"></path>
</svg>
</a>
<a class="bx--tile bx--tile--clickable" href="#">
<div class="bx--grid expandable-tile-grid" style="grid-template-columns: repeat(3, 1fr); grid-auto-rows: 12rem; gap: 8px;">
<a class="bx--link bx--tile bx--tile--clickable start-training-tile expandable-tile-item-large" tabindex="0">
<div class="bx--tile-content">
<p class="bx--type-body-long-02">Sustainability</p>
<p class="bx--type-body-long-01">Maximo, ELM, EIS, Envizi, TRIRIGA, Supply Chain, B2B, Sterling, Data Exchange</p>
<p class="bx--tile-title">Artificial Intelligence</p>
<p class="bx--tile-subtitle">Watsonx product suite, Artificial Intelligence, Data Science, Machine Learning</p>
</div>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" class="bx--tile--icon">
<path d="M9.3 3.7L13.1 7.5 1 7.5 1 8.5 13.1 8.5 9.3 12.3 10 13 15 8 10 3z"></path>
</svg>
</a>
<!-- Repeat similar blocks for other training areas -->
</div>
</div>
</div>
</div>
</section>
</section>
</div>

<!-- Existing content goes here -->

<footer>
<footer class="bx--footer">
<p>© 2024 Skunkworks. All rights reserved.</p>
<p><a href="https://blog.skunkworks.africa/" target="_blank">Visit our blog</a></p>
</footer>

<!-- Individual JavaScript Files -->
<!-- JavaScript Files -->
<script src="./js/formHandler.js"></script>
<script src="./js/partnerSearchFilter.js"></script>
<script src="./js/mobileDropdown.js"></script>
Expand Down

0 comments on commit d80ffc5

Please sign in to comment.