diff --git a/Html-Files/Css-Files/style.css b/Html-Files/Css-Files/style.css index a856acd5..1fcf89da 100644 --- a/Html-Files/Css-Files/style.css +++ b/Html-Files/Css-Files/style.css @@ -1,384 +1,126 @@ - @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); + /* Import Font (Optional) */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); -/* Default (Light) Mode */ -:root { - --background-color: #ffffff; /* Light background color */ - --text-color: #333333; /* Dark text color */ - --card-background: rgba(128, 128, 128, 0.204); /* Card background color */ - } - - /* Dark Mode */ - body.dark-mode { - --background-color: #333333; /* Dark background color */ - --text-color: #ffffff; /* Light text color */ - --card-background: rgba(0, 0, 0, 0.24); /* Dark card background color */ - } - body { - background-color: var(--background-color); - color: var(--text-color); - } - .head { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding: 12px; - margin: 12px auto; +/* Base Styles */ +body { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + color: #333; /* Default text color */ + background-color: #fff; /* Light background color (default) */ + transition: background-color 0.3s ease-in-out; /* Smooth background color transition */ } - -.card-body{ - padding: 1rem; +/* Dark Mode Toggle (Optional) */ +.dark-mode-toggle { + position: fixed; + top: 10px; + right: 10px; + padding: 10px; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s ease-in-out; } -.card-title{ - color: rgb(248, 65, 14); - letter-spacing: 1px; - font-size: 16px; - font-weight: bold; - font-family: 'Poppins', sans-serif; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - max-height: 80px; /* 4 lines at 20px per line */ - white-space: normal; - overflow: hidden; - - -} -.card-text{ - max-height: 100px; /* 4 lines at 20px per line */ - overflow: hidden; - text-overflow: ellipsis; - letter-spacing: 1px; - font-family: 'Poppins', sans-serif; - white-space: normal; - font-size: 13px; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; +.dark-mode-toggle:hover { + background-color: rgba(0, 0, 0, 0.2); /* Slightly darken on hover */ } - -.card-author{ - font-weight: bold; - font-family: 'Poppins', sans-serif; - letter-spacing: 1px; - padding-top: 12px; - font-size: 12px; +/* Dark Mode Styles */ +body.dark-mode { + background-color: #333; /* Dark background color */ + color: #fff; /* Light text color for dark mode */ } -.card-date{ - font-family: 'Poppins', sans-serif; - letter-spacing: 1px; - font-size: 10px; -} - -#newsBox { - display: flex; - justify-content: center; -align-items: center; - gap: 2rem; - flex-wrap: wrap; +/* Container (for overall site layout) */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; } -.newsCard { - display: flex; - flex-direction: column; - background-color: var(--card-background); - height: 450px; - width: 360px; - border-radius: 9px; - overflow: hidden; - box-sizing: border-box; -} -.thumnail{ - width: 100%; - height: 100%; +/* Header */ +header { + text-align: center; + padding: 20px; } -.imageWrapper{ - width: 100%; - height: 180px; - object-fit: cover; +header h1 { + font-size: 2em; + margin-bottom: 0; } -#img { - height: 406px; - width: 721px; +/* Navigation (Optional) */ +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: #eee; /* Light background for navigation (optional) */ + border-bottom: 1px solid #ddd; /* Light border for navigation (optional) */ } -.line { - width: 30vw; - border: 1px solid black; - margin: 7px; - background-color: black; - height: 4px; - border-radius: 24px; +nav ul { + list-style: none; + margin: 0; + padding: 0; } -footer { - position: fixed; - left: 0; - bottom: 0; - width: 100%; +nav li { + display: inline-block; + margin-right: 20px; } -.mySpin { - margin: 50px auto; - display: block; - height: 10vh; - ; - width: 10vh; - ; - visibility: visible; +nav a { + text-decoration: none; + color: inherit; /* Inherit text color from body */ + font-weight: bold; + transition: color 0.3s ease-in-out; } -.card-header{ - border: none; +nav a:hover { + color: #f00; /* Red hover color (optional) */ } -/* Media Quries */ +/* News Box */ +#newsBox { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0; +} -@media only screen and (min-width:844px) and (max-width:1142px){ - - .newsCard { - display: flex; - flex-direction: column; - background-color: rgba(128, 128, 128, 0.204); - height: 380px; - width: 250px; - border-radius: 9px; - overflow: hidden; - box-sizing: border-box; - } - .card-title{ - color: rgb(248, 65, 14); - letter-spacing: 1px; - font-size: 14px; - font-weight: bold; - font-family: 'Poppins', sans-serif; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - max-height: 80px; /* 4 lines at 20px per line */ - white-space: normal; - overflow: hidden; - - - } - .card-author{ - font-weight: bold; - font-family: 'Poppins', sans-serif; - letter-spacing: 1px; - padding-top: 12px; - font-size: 8px; - } - .card-text{ - max-height: 100px; /* 4 lines at 20px per line */ - overflow: hidden; - text-overflow: ellipsis; - letter-spacing: 1px; - font-family: 'Poppins', sans-serif; - white-space: normal; - font-size: 11px; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - } - .imageWrapper{ - width: 100%; - height: 150px; - object-fit: cover; - } - .card-body{ - padding: 0.5rem; - } - +.newsCard { + display: flex; + flex-direction: column; + background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */ + border-radius: 10px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */ + overflow: hidden; + margin: 10px; + width: 30%; /* Adjust width as needed */ + transition: transform 0.3s ease-in-out; } -label { - width:50px; - height:25px; - position: relative; - display: block; - background: #fffdf3; - border-radius: 50px; - box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4); - cursor: pointer; - } - label:after { - content: ""; - width:23px; - height: 23px; - position: absolute; - top:1px; - left:1px; - background: linear-gradient(180deg,#ffcc89,#d8860b); - border-radius: 50px; - box-shadow: 0px 5px 10px rgba(0,0,0,0.2); - } - input { - width: 0; - height: 0; - visibility: hidden; - } - input:checked + label { - background: #242424; - } - input:checked + label:after { - left: 49px; - transform: translateX(-100%); - background: linear-gradient(180deg, #777, #3a3a3a); + +.newsCard:hover { + transform: scale(1.02); /* Slight zoom on hover */ } - label, label:after { - transition: 0.3s - } - label:active:after{ - width: 30px; - } - label svg { - position: absolute; - width: 20px; - top: 4.5px; - left:2px; - z-index: 100; - } - label svg.sun { - opacity: 1; - transition: 0.3s; - } - label svg.moon { - opacity: 0.5; - left:28px; - transition: 0.3s; - } - input:checked + label svg.sun { - opacity: 0.2; - } - input:checked + label svg.moon { - opacity: 1; - } - .form-switch{ - padding-left: 0; - } - .form-check{ - padding-left: 0; - } -@media only screen and (min-width:492px) and (max-width:842px){ - - .newsCard { - display: flex; - flex-direction: column; - background-color: rgba(128, 128, 128, 0.204); - height: 360px; - width: 230px; - border-radius: 9px; - overflow: hidden; - box-sizing: border-box; - } - .imageWrapper{ - width: 100%; - height: 130px; - object-fit: cover; - } - .card-title{ - color: rgb(248, 65, 14); - letter-spacing: 1px; - font-size: 13px; - font-weight: bold; - font-family: 'Poppins', sans-serif; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - max-height: 80px; /* 4 lines at 20px per line */ - white-space: normal; - overflow: hidden; - - - } - .card-text{ - max-height: 100px; /* 4 lines at 20px per line */ - overflow: hidden; - text-overflow: ellipsis; - letter-spacing: 1px; - font-family: 'Poppins', sans-serif; - white-space: normal; - font-size: 10px; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - } - .card-author{ - font-weight: bold; - font-family: 'Poppins', sans-serif; - letter-spacing: 1px; - padding-top: 12px; - font-size: 8px; - } +/* Image Wrapper */ +.imageWrapper { + position: relative; /* Necessary for hover effect */ + width: 100%; + height: 180px; + overflow: hidden; } -@media (prefers-color-scheme: dark) { - body { - background-color: var(--background-color); - color: var(--text-color); - } - /* Add dark mode specific styles here */ -} -@media only screen and (min-width:400px) and (max-width:490px){ - - .newsCard { - display: flex; - flex-direction: column; - background-color: rgba(128, 128, 128, 0.204); - height: 360px; - width: 80%; - border-radius: 9px; - overflow: hidden; - box-sizing: border-box; - } - .imageWrapper{ - width: 100%; - height: 130px; - object-fit: cover; - } - .card-title{ - color: rgb(248, 65, 14); - letter-spacing: 1px; - font-size: 13px; - font-weight: bold; - font-family: 'Poppins', sans-serif; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - max-height: 80px; /* 4 lines at 20px per line */ - white-space: normal; - overflow: hidden; - - - } - .card-text{ - max-height: 100px; /* 4 lines at 20px per line */ - overflow: hidden; - text-overflow: ellipsis; - letter-spacing: 1px; - font-family: 'Poppins', sans-serif; - white-space: normal; - font-size: 10px; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - } - .card-author{ - font-weight: bold; - font-family: 'Poppins', sans-serif; - letter-spacing: 1px; - padding-top: 12px; - font-size: 8px; - } +.imageWrapper img { + width: 100%; + height: 100%; + object-fit: cover; /* Ensure image fills container */ + transition: transform 0.3s ease-in-out; } + +.newsCard:hover .imageWrapper img { + transform: scale(1.1); /* Slight image zoom diff --git a/Html-Files/ent.html b/Html-Files/ent.html index 8ab2e6b1..6f5f55fd 100644 --- a/Html-Files/ent.html +++ b/Html-Files/ent.html @@ -18,11 +18,11 @@ top: 10px; right: 10px; z-index: 1000; - background-color: #007074d5; + background-color: #09cad1d5; cursor: pointer; } .home-button:hover { - background-color: #02969bd5; + background-color: #09abb1d5; } @@ -51,7 +51,7 @@