diff --git a/css/blogs.css b/css/blogs.css index 43874e4..997167b 100644 --- a/css/blogs.css +++ b/css/blogs.css @@ -1 +1,315 @@ /* ======================== CSS file for blogs.html ======================== */ + +/*Linear gradient */ +.header-background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 50vh; /* Adjust the height as needed */ + z-index: -1; + background: linear-gradient( + 90deg, + rgba(6, 47, 61, 0.8), + rgba(255, 123, 27, 0.8), + rgba(255, 123, 27, 0.8), + rgba(116, 64, 225, 0.8) + ); + filter: blur(200px); /* Adjust the blur value as needed */ +} + +body { + font-family: "Bentham", serif; + background-color: #07303e; + color: white; +} + +* { + margin: 0; + padding: 0; +} + +html { + overflow-x: hidden; + scroll-padding-top: 6rem; + scroll-behavior: smooth; +} + +/* NAVIGATION BAR GOES HERE!!!! */ +.dropdown { + position: relative; + } + + /* Hide the dropdown by default */ + .dropdown-content { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #07303e; + padding: 10px; + } + + /* Style the individual dropdown items */ + .dropdown-content li { + margin: 5px, 0; + } + + /* Show the dropdown when hovering over the "Event" link */ + .dropdown:hover .dropdown-content { + display: block; + } + + /* Links inside the dropdown */ + .dropdown-content a { + color: white; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: center; + } + /* Change color of dropdown links on hover */ + .dropdown-content a:hover { + background-color: #ff7b1b; + } + + /* Change the background color of the dropdown button when the dropdown content is shown */ + .dropdown:hover .dropbtn { + background-color: #3e8e41; + } + + /* -------------*/ + header { + display: flex; + flex-direction: row; + /* justify-content: end; */ + justify-content: space-between; + gap: 200px; + padding: 20px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + align-items: center; + background-color: transparent; /* Make the navbar background transparent */ + transition: box-shadow 0.3s; /* Add a smooth transition to the box-shadow property */ + } + + /* Intersection observer */ + .nav-scrolled { + color: #fff; + background-color: #07303e; + } + + .logo { + display: flex; + align-items: center; + } + + .logo img { + height: 25px; + margin-right: 10px; + } + + #menu-bar { + display: none; + cursor: pointer; + } + + .nav-container { + display: flex; + flex-direction: row; + margin-right: 42px; + } + + .nav-container ul { + list-style-type: none; + padding: 0; + } + + .nav-container span { + padding-bottom: 10px; + border-bottom: 2px solid rgb(255, 123, 27); + } + + .nav-list :hover { + border-bottom: 2px solid #ff7b1b; + } + + .nav-list { + display: inline; /* Display list items in a horizontal line */ + margin-right: 40px; /* Add spacing between list items */ + } + + .nav-list a { + text-decoration: none; + color: #fff; /* Set link color to white */ + } + + .nav-container button { + background-color: #ff7b1b; + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 20px; + } + + #blogs:hover { + border-bottom: none; + } + + .nav-container button:hover { + background-color: white; + color: #ff7b1b; + } + + /* NAVIGATION BAR ENDS HERE!!!! */ +/* NAVIGATION BAR ENDS HERE!!!! */ + +form { + margin: 0; + padding: 0; + margin: 20px auto; +} + +.coming-soon { + max-width: 75%; + margin: 150px auto; + padding: 20px; + justify-content: center; + align-items: center; + text-align: center; +} + +h1 { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 80px; + letter-spacing: 16px; +} + +.coming-soon p { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 16px; + margin-top: 50px; +} + +input[type="email"] { + width: 500px; + padding: 10px; + margin-bottom: 20px; + border-radius: 5px; + font-size: 16px; +} + +input[type="submit"] { + width: 130px; + padding: 10px; + border-radius: 5px; + font-size: 16px; + border: none; + background-color: #ff7b1b; + color: #fff; +} + +/* Media Query for Tablets and Smaller Desktops */ +@media only screen and (max-width: 1200px) { + /* Adjust your styles for tablets and smaller desktop screens here */ + header { + font-size: 14px; + } + + .nav-list { + margin-right: 20px; /* Add spacing between list items */ + } +} + +@media (max-width:991px){ + /* For tablets */ + header { + gap: 50px; + padding-right: 0; + } + +} + +@media (max-width: 775px){ + /* For mobile phones */ + /* Responsieness menubar */ + .responsiveness { + position: relative; + display: contents; + margin-right: auto; + } + + div #menu-bar { + display: flex; + } + + /* Dropdown menu */ + .dropdown-content li { + display: none; + } + + /* Navbar */ + .nav-container { + position: absolute; + top: 100%; right: 0; left: 70%; + background-color: transparent; + clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); + } + + .nav-container span { + padding-bottom: 0; + border-bottom: none; + } + + .nav-list a { + display: block; + padding: 10px; + margin: 4px 0; + background-color: #07303e; + box-shadow: 0 3px 20px rgba(255, 123, 27, 0.8); + } + + .nav-container button { + background-color: white; + color: #ff7b1b; + } + + .nav-container button:hover { + color: white; + background-color: #ff7b1b; + } + + /* Header */ + header { + font-size: 20px; + padding: 20px; + background-color: #07303e; + } + + header .nav-container.active{ + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + } + + .coming-soon { + display: flex; + flex-direction: column; + margin: 150px auto; + justify-content: center; + align-items: center; + text-align: center; + } + + h1 { + font-size: 40px; + } + + input[type="email"] { + width: 300px; + } + + +}