/* peoples.html's css file -> peoples.css : CSS for the entire webpage */
/* Icons: The Icons : The complete set of 675 icons in Font Awesome 4.7.0
Source: https://fontawesome.com/v4/icons/
*/
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 */
/* Set Background Color To Transparent Black */
/*background:rgba(0,0,0,0.9); /* Set Background Color */
}
/* -------------------------------------------- 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: [offset-x] [offset-y] [blur-radius] [spread-radius] [color] */
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 */
}
/* --------------------------------------------------- People Profile --------------------------------------------------- */
.profile{ /* ------------------- Main profile container ------------------- */
font-family:Arial, sans-serif; /* Set font-family to Arial or fallback to sans-serif */
}
.profile-header{
position:relative; /* Set the relative position for the entire profile section */
}
.profile-header .profile-background img{ /* Style the profile background image */
width:100%; /* Make the background image cover the entire container */
height:480px; /* fixed height of Background image */ /* Set a fixed height for the background image */
}
.profile-header .profile-picture{ /* Style the profile picture container */
position:absolute; /* Position the profile picture absolutely */
bottom:0; /* Align the profile picture to the bottom */
left:3%; /* Set a 3% distance from the left edge of the container */
transform:translateY(15%); /* 15% below the bottom of nearest ancestor */ /* Adjust vertical positioning */
width:256px; /* fixed width - 256px (Same as height)*/ /* Set the width of the profile picture */
height:256px; /* fixed height - 256px (Same as width)*/ /* Set the height of the profile picture */
max-width:256px; /* fixed width - 256px (Same as height)*/ /* Make fixed maximum width */
max-height:256px; /* fixed height - 256px (Same as width)*/ /* Make fixed maximum height */
border-radius:10%; /* Make container round - NEEDED */ /* Apply a border-radius to create a slightly rounded appearance */
/* box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color] */
box-shadow:0 0 5px 5px rgba(0,0,0,0.5); /* Add a shadow effect */
}
.profile-header .profile-picture img{ /* Style the profile picture itself */
/*width:100%; /* Make the image inside the profile picture container take up its entire space */
border-radius:10%; /* Apply a border-radius to create a slightly rounded appearance */
width:256px; /* fixed width - 256px (Same as height)*/ /* Set the width of the profile picture */
height:256px; /* fixed height - 256px (Same as width)*/ /* Set the height of the profile picture */
max-width:256px; /* fixed width - 256px (Same as height)*/ /* Make fixed maximum width */
max-height:256px; /* fixed height - 256px (Same as width)*/ /* Make fixed maximum height */
}
.profile-header .profile-name{
position:absolute; /* Position the profile picture absolutely */
left:25%;
top:85%; /* Align the profile picture to the bottom */
}
.profile-header .profile-name h1{
text-align:left; /* Text alignment */
color:rgba(255,255,255,1.0); /* Text Color */
/* text-shadow: [horizontal offset] [vertical offset] [blur radius] color] */
text-shadow:0px 0px 8px rgba(0,0,0,0.9); /* Add text shadow */
}
.profile .profile-noticeBox{/* -------------- Notice Box ---------------------- */
margin:60px 5px 10px 5px;/* margin: [top] [right] [bottom] [left]; padding outside the box */ /* margin outside the box */
padding:1px 50px 1px 50px; /* padding: [top] [right] [bottom] [left]; padding inside the box */ /* padding inside the box */
/*border-radius:5px; /* Use a 10px radius for all corners */
/*background:rgba(234,67,53,0.9); /* Set background color to red */
color:rgba(234,67,53,0.9);/*#fff;*/ /* Set text color to red */
}
.profile .profile-noticeBox p{ /* paragraph settings */
font:normal 400 Arial, sans-serif; /* Normal weight and specified font family */
text-align:justify; /* Make font justify */
}
.profile .profile-mainBox{/* -------------- Main Profile Box ---------------------- */
margin:10px; /* margin outside the box */
padding:1px 15px 1px 15px; /* padding: [top] [right] [bottom] [left]; padding inside the box */ /* padding inside the box */
/*border-radius:5px; /* Use a 10px radius for all corners */
/*background:rgba(234,67,53,0.9); /* Set background color to red */
color:rgba(0,0,0,1.0);/*#fff;*/ /* Set text color to red */
}
.profile .profile-mainBox p{ /* paragraph settings */
font:normal 400 Arial, sans-serif; /* Normal weight and specified font family */
text-align:justify; /* Make font justify */
/*font-weight:400;/*bold;*/ /* Normal weight */
/*font-size:16px; /* Set font size to 16 pixels */
}
.profile .profile-social{/* ---------------- Social links style ---------------- */
margin:10px; /* margin outside the box */
padding:5px 15px 5px 15px; /* padding: [top] [right] [bottom] [left]; padding inside the box */ /* padding inside the box */
text-align:center; /* Center-align text */
justify-content:center; /* Center-align items horizontally */
align-items:center; /* Center-align items vertically */
}
.profile .profile-social h1{ /* Style for headding */
text-align:center; /* Make font alignment center */
font-weight:400;/*bold;*/ /* Normal weight */
font-size:20px; /* Set font size to 16 pixels */
}
.profile .profile-social .fa-mobile, /* Style for phone icon */
.profile .profile-social .fa-twitter, /* Style for twitter icon */
.profile .profile-social .fa-linkedin, /* Style for linkedin icon */
.profile .profile-social .fa-facebook, /* Style for facebook icon */
.profile .profile-social .fa-instagram, /* Style for instagram icon */
.profile .profile-social .fa-youtube, /* Style for youtube icon */
.profile .profile-social .fa-github, /* Style for github icon */
.profile .profile-social .fa-link{ /* Style for link (website) icon */
color:rgba(234,67,53,0.9); /* Set color to red*/
padding:10px 25px; /* top/bottom left/right */ /* Add pading */
width:30px; /* Set width of text */
height:30px; /* Maintain a square shape */
font-size:40px; /* Control the size of the icon */
font-weight:5; /* Make fount bold / make thiner */
justify-content:center; /* Center content horizontally */
align-items:center; /* Center content vertically */
text-align:center; /* Make text align center */
}
.profile .profile-social .fa-mobile:hover{ /* Change color on hover for twitter icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
.profile .profile-social .fa-twitter:hover{ /* Change color on hover for twitter icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
.profile .profile-social .fa-linkedin:hover{ /* Change color on hover for linkedin icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
.profile .profile-social .fa-facebook:hover{ /* Change color on hover for facebook icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
.profile .profile-social .fa-instagram:hover{ /* Change color on hover for instagram icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
.profile .profile-social .fa-youtube:hover{ /* Change color on hover for youtube icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
.profile .profile-social .fa-github:hover{ /* Change color on hover for github icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
.profile .profile-social .fa-link:hover{ /* Change color on hover for link (website) icon */
color:rgba(251,188,5,1.0); /* Change the icon's color to yellow on hover */
}
/* ------------------ Code for slide show ---------------------- */
.profile .image-slideshow-container{ /* Styling for the container of the image slideshow */
position:relative; /* Relative positioning for absolute positioning of arrows */
width:100%; /* Set a specific width for the container */
margin:auto; /* Center the container */
}
.profile .image-slideshow-container .subConatiner{ /* Sub-container within the main container */
/* This divison is only for slide show image to prevent from overflow from pages */
overflow:hidden; /* Hide any content that overflows this sub-container */
max-height:360px; /* Fixed else big image height becomes too large */ /* Fixed the height of container */
}
.profile .image-slideshow-container .subConatiner .image-slideshow{ /* Styling for the actual image slideshow */
position:relative; /* Relative positioning for absolute positioning of arrows */
display:flex; /* Display images in a row */
transition:transform 0.5s ease-in-out; /* Smooth transition for image sliding */
}
.profile .image-slideshow-container .image-slideshow img{
height:360px; /* Fixed to container size */ /* Fixed the height of image to height of container */
width:auto; /* Set width to full image width */
}
.profile .image-slideshow-container .right-arrow,/* Set Style for left and right arrows */ /* right arrow - ">" */
.profile .image-slideshow-container .left-arrow, /* left arrow - "<" */
.profile .image-slideshow-container .fa-arrow-circle-right, /* fa-arrow facing towards right */
.profile .image-slideshow-container .fa-arrow-circle-left{ /* fa-arrow facing towards left */
position:absolute; /* Arrows positioned absolutely within the container */
top:50%; /* Vertically center the arrows */
transform:translateY(-50%); /* Position the arrows at the center vertically */
font-size:40px; /* Adjust arrow size */
font-weight:400;/*bold;*/ /* Normal weight */
cursor:pointer; /* Add pointer cursor - change cursor style */
opacity:0.50; /* Initially transparent */
transition:opacity 0.3s ease; /* Adding transition for smooth visibility change */
}
.profile .image-slideshow-container .left-arrow,/* Set arrow alignment - left */
.profile .image-slideshow-container .fa-arrow-circle-left{
left:10px; /* Adjust left position of the left arrow */
}
.profile .image-slideshow-container .fa-arrow-circle-left:hover{/* Set hover Style for fa arrow circle left */
color:rgba(255,255,255,1.0); /* Change color on hover */
}
.profile .image-slideshow-container .left-arrow:hover{/* Set hover Style for left arrow */
color:rgba(255,255,255,1.0); /* Change color on hover */
}
.profile .image-slideshow-container .right-arrow,/* Set arrow alignment - right */
.profile .image-slideshow-container .fa-arrow-circle-right{
right:10px; /* Adjust right position of the right arrow */
}
.profile .image-slideshow-container .fa-arrow-circle-right:hover{/* Set hover Style for fa arrow circle right */
color:rgba(255,255,255,1.0); /* Change color on hover */
}
.profile .image-slideshow-container .right-arrow:hover{/* Set hover Style for right arrow */
color:rgba(255,255,255,1.0); /* Change color on hover */
}
.profile .image-slideshow-container .pop-up-container{ /* Set Style for Pop up container */
display:none; /* Position the modal */
position:absolute; /* Positions the modal relative to its containing block */
top:-20%; /* Fixed else big images goes below the page boundary */ /* Adjust the vertical position */
left:50%; /* Position at the horizontal center */
transform:translate(-50%,-50%); /* Center the modal precisely */
background-color:transparent; /* Set background color to transparent */
padding:25px; /* Set padding around image */
/* box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color] */
box-shadow:0px 0px 10px rgba(0,0,0,0.3); /* Add shadow box */
max-width:1024px; /* Fixed - else image go out of page */ /* Set the maximum width of container */
height:auto; /* Set height to auto (according to width) */
}
.profile .image-slideshow-container .pop-up-container-content{ /* Set Style for Pop up container content */
margin:auto; /* Center the image horizontally */
width:auto; /* Set width to auto */
padding:5px; /* Make close button proper */ /* Set padding around image */
max-width:1024px; /* Fixed - else image go out of page */ /* Set the maximum width of container */
height:auto; /* Set height to auto (according to width) */
}
.profile .image-slideshow-container .close-button{
position:absolute; /* Positions the modal relative to its containing block */
/* Set close button to top right side */
top:10px; /* Set top margin */
right:10px; /* Set right margin */
font-size:24px; /* Set close button size */
cursor:pointer; /* Change cursor Style */
}
.profile .image-slideshow-container .close-button:hover{
color:rgba(234,67,53,1.0); /* Change color on hover */
}
/* -------------------------------------------- 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;/*fixed;*/ /* 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 */
}