/* apprenticeship.html's css file -> apprenticeship.css : CSS for the entire webpage */
body { /* Basic styles for the entire body */
font-family:Arial, sans-serif; /* Set font-family to Arial or fallback to sans-serif */
margin:0; /* Remove default margin */
padding:0; /* Remove default padding */
}
/* -------------------------------------------- Styles for the header section --------------------------------------------*/
header{ /* Styles for the header section */
/*position:fixed;*/ /* Fix the header position */
top:0; /* Position it at the top of the viewport */
/*width: 100%;*/ /* Take the full width of the viewport */
background-color:rgba(234,67,53,1.0); /* Transparent red header background */
color:#fff; /* Set text color to white */
padding:12px; /* Add padding around the header */
text-align:center; /* Center-align text */
left:0; /* Align the left edge to the left side of the viewport */
right:0; /* Align the right edge to the right side of the viewport */
z-index:1000; /* Ensure it stays on top of other content */
}
.spacer{ /* To create red box at background of header */
height:70px; /* Adjust the height according to your header's height */
background-color:rgba(234,67,53,1.0); /* Background color to red */
}
.header-content{ /* Styles for the header content */
display:flex; /* Use flexbox for layout */
justify-content:space-between; /* Distribute content evenly */
align-items:center; /* Center-align vertically */
}
.logo img{ /* Styles for the logo */
max-width:100px; /* Set maximum width for the logo */
height:auto; /* Maintain aspect ratio */
}
.navigation ul{ /* Styles for the navigation links */
list-style:none; /* Remove default list styles */
padding:0; /* Remove default padding */
margin:0; /* Remove default margin */
}
.navigation li{
display:inline; /* Display list items inline */
margin-right:15px; /* Adjust spacing between links */
}
.navigation a{
color:#fff; /* Set link text color to white */
text-decoration:none; /* Remove default underline */
transition:color 0.3s; /* Smooth transition for color change */
font-weight:500; /* Adjust font weight to make text slightly thicker */
}
.navigation a:hover{ /* Change color on hover */
color:yellow; /* Change text color to yellow on hover */
}
/* ------- Drop down style ------- */
.navigation-dropdown{ /* Set the positioning for the navigation dropdown */
position:relative; /* Set the position to relative */
display:inline-block; /* Display as an inline block element */
}
.navigation-dropdown-content{ /* Styles for the dropdown content */
display:none; /* Initially hide the dropdown content */
position:absolute; /* Position the dropdown content */
top:100%; /* Position the dropdown below the list item */
background-color:rgba(234,67,53,1.0); /* Background color for the dropdown */
/*min-width:160px;*/ /* Minimum width of the dropdown */
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /* Apply shadow effect */
z-index:1; /* Set the stacking order */
left:0; /* Align the dropdown with the left edge of the list item */
width:auto; /* Adjust the width to fit the content */
}
.navigation-dropdown:hover .navigation-dropdown-content{ /* Show dropdown content on hover */
display:block; /* Display the dropdown content on hover */
}
.navigation-dropdown-content a{ /* Styles for the links inside the dropdown */
display:inline-block; /* Display dropdown links as block elements in one single line*/
color:white; /* Set text color */
padding:10px 17px; /* top-bottom and left-right -> Add padding */
text-decoration:none; /* Remove default underline */
text-align:center; /* Align text to the left */
width:auto; /* Make links take up full width within the dropdown */
box-sizing:border-box; /* Include padding in the width */
white-space:nowrap; /* Prevent line breaks */
vertical-align:middle; /* Adjusts vertical alignment */
font-family:Arial, sans-serif; /* Set the font family */
}
.navigation-dropdown-content a:hover{ /* Styles for the hover state of dropdown links */
background-color:rgba(234,67,53,1.0); /* Change background color on hover */
}
/* ------------------------------------------------ Main Container ------------------------------------------------ */
.main-container{
/*max-width:600px;*/ /* Adjust the maximum width as needed */
width:90%; /* Adjust the width to 90% of page */
margin:50px auto; /* Center the container horizontally with top and bottom margin */
background-color:#fff; /* White background color */
border-radius:15px; /* Rounded corners */
padding:20px; /* Add some padding inside the container */
box-shadow:0px 0px 10px rgba(0,0,0,0.1); /* Add a subtle shadow for depth */
/*position:absolute; /* Position the container absolutely within its parent */
/*top:43%; /* Position the container 43% down from the top */
/*left:50%; /* Position the container at the center horizontally */
/*transform:translate(-50%,-50%); /* Adjust the positioning to center both horizontally and vertically */
/* Make box in center of page - prevent overlapping of box */
position:relative; /* Change position to relative */
top:0; /* Remove or adjust this to maintain its natural flow */
left:0; /* Remove or adjust this to maintain its natural flow */
transform:none; /* Remove transform as it's no longer needed */
} /* end of ".main-container" class */
/*.container-company-logo{ /* Styles for the logo container and company logo */
/*text-align:center; /* Center-align the content */
/*margin-bottom:20px; /* Add some space between logo and other content */
/*}*/ /* end of ".container-company-logo" class */
/*.container-company-logo-image{ /* Company Logo Image Styles */
/*max-width:100%; /* Ensure the logo doesn't exceed its container */
/*height:auto; /* Maintain the aspect ratio */
/*}*/ /* end of ".container-company-logo-image" class */
.courses-section{
}
.courses-section h1{ /* Courses section's heading (main heading) */
text-align:center; /* Centers the heading */
font-family:Arial,sans-serif; /* Sets the font to Arial */
text-shadow:2px 2px 5px rgba(0,0,0,0.3); /* Adds a shadow to the text */
} /* end of "courses-section h1" class */
.courses-section a{ /* Class for section's heading link (hash tag links) */
color:inherit; /* Inherits text color from h1 */
text-decoration:none; /* Removes underline from links */
} /* end of "courses-section"'s hyperlink */
/* courses grid view */
.grid-container{ /* Grid container setup */
display:grid; /* Turns the container into a grid layout */
grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); /* Creates responsive grid columns. Each column will have a minimum
width of 300px and take up remaining space if available (`1fr`), adjusting automatically based on the available screen size. */
gap:20px; /* Adds a 20px gap between grid items (both row and column gaps). */
padding:20px; /* Adds 20px of space inside the grid container (around its content). */
} /* end of "grid-container" class */
.grid-container.centered{ /* Center the anticipated programs */
justify-content:center;
display:flex;
gap:30px;
} /* end of "grid-container.centered" */
.grid-item{ /* class for item (each box) inside the grid styling */
position:relative; /* Allows for absolutely positioned child elements (like the overlay) */
border-radius:10px; /* Rounds the corners of the grid item box */
overflow:hidden; /* Prevents content from overflowing beyond the box's boundaries,
ensuring the rounded corners stay clean */
border:2px solid black; /* Adds a black border around each grid item */
/* Explicitly set the box dimensions. The grid will still be responsive based on the min-width specified in `grid-template-columns` */
width:300px; /* Set default width */
height:400px; /* Set default height */
display:flex; /* Enables a flexbox layout within the grid item, allowing easy alignment
and spacing of internal elements */
flex-direction:column; /* Stacks the child elements vertically inside the grid item */
justify-content:space-between; /* Spaces out the child elements so they take up available space, with
the first item at the top, the last at the bottom, and others evenly distributed */
} /* end of "grid-item" class */
.course-header{ /* "#ED493D" (Red) background for course name */
background-color:#0000009F;/*#ED493D9F;*/ /* Sets a "#ED493D" (Red) background so the image behind it is not visible */
text-align:center; /* Centers the text inside the header horizontally */
padding:1px; /* Adds a small padding inside the header to give it breathing space */
border-bottom:2px solid black; /* Adds a solid black line at the bottom to separate the header from the
main content area */
z-index:2; /* Ensure header and footer stay above the overlay */
} /* end of "course-header" class */
.course-header h2{ /* Styling for the text inside the course header */
font-size:15px; /* Increases the size of the course name text */
color:#ffffffAf; /* Setup text color */
/*font-weight:bold; /* Makes the course name text bold to stand out more */
} /* end of "course-header h2" class */
.content-overlay{ /* Background image only in the middle content section */
padding:10px 10px; /* Adds vertical and horizontal padding around the list of points */
flex-grow:1; /* Allow it to take up the middle space */
display:flex; /* Uses flexbox to align the list inside the content */
flex-direction:column; /* Stacks the list items vertically */
justify-content:center; /* Centers the list vertically within the available space */
overflow-y:auto; /* Enable scrolling without displaying scrollbars */
} /* end of "content-overlay" class */
/* Courses Images Classes - to set background images for each course content layout */
.courses1{ /* Python Foundations for Selenium Automation */
background:url('../src/courses/programming-2.jpg') no-repeat center center/cover;/* Adjust your image path for course - 1 */
} /* end of course - 1 */
.courses2{ /* Web Development Foundations */
background:url('../src/courses/web-1.jpg') no-repeat center center/cover; /* Adjust your image path for course - 2 */
} /* end of course - 2 */
.courses3{ /* System Administration Internship */
background:url('../src/courses/server-1.jpg') no-repeat center center/cover; /* Adjust your image path for course - 3 */
} /* end of course - 3 */
.courses4{ /* Python Network Automation Intern */
background:url('../src/courses/cloud_computing-3.jpg') no-repeat center center/cover;/* Adjust your image path for course - 4 */
} /* end of course - 4 */
.courses5{ /* Networking Tools and Server Management Internship */
background:url('../src/courses/server-4.jpg') no-repeat center center/cover; /* Adjust your image path for course - 5 */
} /* end of course - 5 */
.courses6{ /* Automation Engineering and Scripting with Python */
background:url('../src/courses/automation-1.jpg') no-repeat center center/cover;/* Adjust your image path for course - 6 */
} /* end of course - 6 */
.courses7{ /* Machine Learning Internship */
background:url('../src/courses/machine-learning-1.jpg') no-repeat center center/cover;/* Adjust your image path for course - 7 */
} /* end of course - 7 */
.courses8{ /* Networking Internship */
background:url('../src/courses/server-2.jpg') no-repeat center center/cover; /* Adjust your image path for course - 8 */
} /* end of course - 8 */
.courses9{ /* Computer Vision Intern */
background:url('../src/courses/computer_vision-2.jpg') no-repeat center center/cover;/* Adjust your image path for course - 9 */
} /* end of course - 9 */
.courses10{ /* Information Security Intern */
background:url('../src/courses/information-security-2.jpg') no-repeat center center/cover;/* Adjust your image path for course - 10 */
} /* end of course - 10 */
.courses11{ /* Data Analytics Internship */
background:url('../src/courses/data_analytics-2.jpg') no-repeat center center/cover;/* Adjust your image path for course - 11 */
} /* end of course - 11 */
.courses12{ /* Full Stack Developer Internship */
background:url('../src/courses/web-4.jpg') no-repeat center center/cover; /* Adjust your image path for course - 12 */
} /* end of course - 12 */
.content-overlay::before{ /* Transparent white background over the image for text readability */
content:""; /* Defines an empty pseudo-element */
position:absolute; /* Positions this overlay relative to the `.content-overlay` parent */
/* `top`, `left`, `right`, and `bottom` -> 0; Ensures the overlay covers the entire content area */
top:0; /* top padding */
left:0; /* left padding */
right:0; /* right padding */
bottom:0; /* bottom padding */
background-color:rgba(255,255,255,0.9); /* Applies a semi-transparent white color (70% opacity) to the overlay */
z-index:0; /* Ensures the overlay stays behind the content (list of points) but
above the background image */
} /* end of "content-overlay::before" */
.content-overlay ul{ /* Unordered list styling for "content-overlay" class */
/*list-style:none; /* Removes the default bullet points from the list items */
list-style-type:disc; /* uses filled circles for ul list points */
padding-left:20px; /* Adds some space to the left of the list to improve layout and avoid
text touching the edge */
padding-top:25px; /* Add padding to top of the list */
z-index:1; /* Ensures the text stays above the background image and overlay */
position:relative; /* Makes sure the list text remains in the normal document flow, while
still stacking above the pseudo-element overlay */
} /* end of "content-overlay ul" */
.content-overlay ul li{ /* Individual list item styling of "content-overlay" class */
margin:10px 0px; /* Adds vertical spacing between each point */
/*font-size:14px;*/ /* font size of list texts */
position:relative; /* Positions this list items relative */
line-height:1; /* line height of list element */
/*opacity:1;*/ /* Initial opacity for visibility */
} /* end of "content-overlay ul li" */
.content-overlay-button-container{ /* buttons container in content overlay */
display:flex; /* Use flexbox for side-by-side arrangement */
justify-content:center; /* Center the buttons horizontally */
gap:10px; /* Adjust the gap between buttons as needed */
z-index:1; /* Ensures the text stays above the background image and overlay */
width:100%; /* Make sure the container fills the width */
} /* end of "content-overlay-button-container" */
.content-overlay-button-container-button-one, /* button for course content */
.content-overlay-button-container-button-two{ /* button for course registration or enrolment */
padding:10px; /* Adds padding to the button for better readability and spacing */
/*border:none; /* Removes the default border around the button */
cursor:pointer; /* Changes the mouse cursor to a hand when hovering over the button, indicating that it's clickable */
border-radius:5px; /* Adjust the value to control the roundness */
background-color:#000000FF;/*transparent*/ /* Makes the button background black */
color:#fff; /* Sets the text color to white */
/*z-index:1; /* Ensures the text stays above the background image and overlay */
transition:color 0.3s ease; /* Adds a smooth transition for the color change */
flex-grow:1; /* This button will fill the remaining space */
} /* end of "content-overlay-button-container-button-one" */
.content-overlay-button-container-button-one:hover, /* button for course content - on hover */
.content-overlay-button-container-button-two:hover{ /* button for course registration or enrolment - on hover */
background-color:#EA4A3D; /* Changes the text color to red on hover */
} /* end of hover */
.content-overlay-button-popup-container{ /* Popup container when button is clicked inside course */
display:none; /* Hidden by default */
position:fixed; /* Stays fixed on the screen, even when scrolling */
top:0; /* Aligns to the top of the viewport */
left:0; /* Aligns to the left of the viewport */
width:100%; /* Takes up the full width of the viewport */
height:100%; /* Takes up the full height of the viewport */
background-color:rgba(0,0,0,0.5); /* Semi-transparent background for overlay effect */
justify-content:center; /* Centers the content horizontally */
align-items:center; /* Centers the content vertically */
z-index:1000; /* Places the popup above other content */
} /* end of "content-overlay-button-popup-container" */
.content-overlay-button-popup-content{ /* Popup content (content inside "content-overlay-button-popup-container") */
background-color:white; /* White background for the popup */
padding:20px; /* Adds space inside the popup */
border-radius:10px; /* Rounds the corners */
text-align:center; /* Centers the text */
width:300px; /* Fixed width of the popup */
box-shadow:0 4px 8px rgba(0,0,0,0.2); /* Adds a subtle shadow for depth */
} /* end of "content-overlay-button-popup-content" */
.content-overlay-button-popup-content p{ /* "content-overlay-button-popup-content"'s paragraph's style */
margin-bottom:20px; /* Adds space below the paragraph */
} /* end "content-overlay-button-popup-content" */
.content-overlay-button-popup-content-container{ /* "content-overlay-button-popup-content"'s button's
container for multiple buttons - "close" and "proceed" */
display:flex; /* Use flexbox for side-by-side arrangement */
justify-content:center; /* Center the buttons horizontally */
gap:10px; /* Adjust the gap between buttons as needed */
/*z-index:1; /* Ensures the text stays above the background image and overlay */
width:100%; /* Make sure the container fills the width */
}
.content-overlay-button-popup-content button{ /* "content-overlay-button-popup-content"'s button */
padding:10px 20px; /* Adds padding to the button for size */
background-color:#000000FF; /* Solid black background for the button */
color:white; /* White text color */
border:none; /* Removes default border */
border-radius:5px; /* Rounds the button corners */
cursor:pointer; /* Changes the cursor to a pointer on hover */
} /* end of "content-overlay-button-popup-content button" */
.content-overlay-button-popup-content button:hover{ /* define button style on hover */
background-color:#EA4A3D; /* Changes the text color to red on hover */
} /* end of button style on hover */
.course-footer{ /* "#F6B736" (Yellow) background for date section (footer) */
background-color:#0000009F;/*#F6B7369F;*/ /* Sets a "#F6B736" (Yellow) background */
display:flex; /* Uses flexbox to align the date elements side-by-side (horizontally) */
justify-content:space-between; /* Spaces the date labels (starting and ending dates) evenly across the
section, placing them at opposite ends (left and right) */
padding:10px; /* Adds padding inside the date section to give space between the text
and the section borders */
border-top:2px solid black; /* Adds a solid black line at the top to visually separate the date
section from the content above */
z-index:2; /* Ensure header and footer stay above the overlay */
} /* end of "course-footer" class */
.course-footer span{ /* Styling for the date text (start and end dates) */
font-size:10px; /* Increases the size of the course name text */
color:#ffffffAf; /* Setup text color */
/*font-weight:bold; /* Makes the date labels bold so they stand out more */
} /* end of "course-footer span" */
/* -------------------------------------------- Styles for the footer section -------------------------------------------- */
footer{
background-color:#000; /* Set background color to dark gray */
color:#fff; /* Set text color to white */
padding:2px; /* Add padding around the footer */
text-align:center; /* Center-align text */
position:bottom; /* Fix the footer to the bottom of the viewport */
bottom:0; /* Align the footer to the bottom */
height:fit-content; /* Set height to fit the content */
line-height:1; /* Adjust line height to remove extra space */
/*width:100%;*/ /* Set the width of the footer to 100% of the viewport */
left:0; /* Align the left edge to the left side of the viewport */
right:0; /* Align the right edge to the right side of the viewport */
}
.small-text{
font-size:10px; /* Adjust font size as needed */
}
.small-text strong{
font-weight:bold; /* CSS for making the specified text bold */
}