styling update
This commit is contained in:
parent
f6ebf7b4fa
commit
3c33a88fe0
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 55 KiB |
@ -63,14 +63,14 @@ header {
|
||||
|
||||
.logo p {
|
||||
font-size: 32px;
|
||||
color: #f8f8f2;
|
||||
color: #999999;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.logo-name {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #f8f8f2;
|
||||
color: #999999;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
@ -99,21 +99,22 @@ header {
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search-button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
background-color: #fd971f;
|
||||
background-color: #D7011D;
|
||||
color: #f8f8f2;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background-color: #f4bf75;
|
||||
background-color: #FF3D5A;
|
||||
}
|
||||
|
||||
.notification-overlay {
|
||||
@ -121,7 +122,7 @@ header {
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #ff5795c7;
|
||||
background-color: #D7011D;
|
||||
color: #f8f8f2;
|
||||
border: 5px solid #272822;
|
||||
padding: 20px;
|
||||
@ -166,11 +167,12 @@ header {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #f8f8f2;
|
||||
background-color: #fd971f;
|
||||
background-color: #D7011D;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
background-color: 0.3s ease;
|
||||
}
|
||||
|
||||
.wrapper .button-text {
|
||||
@ -191,7 +193,7 @@ header {
|
||||
}
|
||||
|
||||
.wrapper:hover {
|
||||
background-color: #f4bf75;
|
||||
background-color: #FF3D5A;
|
||||
}
|
||||
|
||||
.wrapper:hover .button-text {
|
||||
@ -234,7 +236,7 @@ header {
|
||||
}
|
||||
|
||||
.listed-items {
|
||||
border: 1px solid #a0d170;
|
||||
border: 1px solid #333333;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
@ -242,7 +244,7 @@ header {
|
||||
}
|
||||
|
||||
.listed-items:hover {
|
||||
border: 1px solid #d1d1d1;
|
||||
border: 1px solid #FFD3E0;
|
||||
background-color: #f0f0f007;
|
||||
}
|
||||
|
||||
@ -252,11 +254,12 @@ header {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #f8f8f2;
|
||||
background-color: #fd971f;
|
||||
background-color: #D7011D;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
background-color: 0.3s ease;
|
||||
}
|
||||
|
||||
.load-more-button .button-text {
|
||||
@ -277,7 +280,7 @@ header {
|
||||
}
|
||||
|
||||
.load-more-button:hover {
|
||||
background-color: #f4bf75;
|
||||
background-color: #FF3D5A;
|
||||
}
|
||||
|
||||
.load-more-button:hover .button-text {
|
||||
@ -298,16 +301,20 @@ header {
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #fd971f;
|
||||
background-color: #D7011D;
|
||||
color: #f8f8f2;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease, background-color 0.3s ease;
|
||||
z-index: 9999;
|
||||
}
|
||||
.scroll-to-top-button:hover {
|
||||
background-color: #FF3D5A;
|
||||
|
||||
}
|
||||
|
||||
.scroll-to-top-button.show {
|
||||
opacity: 1;
|
||||
|
@ -1,15 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="description" content="Servant Hearts, Working for the Lord. The Biblically based job search board.">
|
||||
<meta name="keywords" content="heartily, Christian jobs, Biblically based, christian job opportunities, Job openings in Christian organizations ">
|
||||
<meta name="author" content="heartily">
|
||||
<title>Heartily</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ url_for('static', filename='style.css') }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
|
||||
<link rel="apple-touch-icon" href="{{ url_for('static', filename='heartily1.gif') }}">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -94,6 +95,50 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Define an array of placeholder texts
|
||||
var placeholderTexts = [
|
||||
"Search for jobs",
|
||||
"Seize every task",
|
||||
"Glorify the Lord with your work",
|
||||
"Explore job listings",
|
||||
"Search by job title or keywords",
|
||||
"Labor diligently for the Lord",
|
||||
"Make an eternal impact",
|
||||
"Work as unto the Lord",
|
||||
"Boldy share your testimony",
|
||||
"Take a step of Faith",
|
||||
"Discover joy in your work",
|
||||
"Give Jesus your every hour",
|
||||
// Add more placeholder texts as needed
|
||||
];
|
||||
|
||||
// Get the search input element
|
||||
var searchInput = document.querySelector(".search-input");
|
||||
|
||||
// Function to simulate typing effect for the placeholder text
|
||||
function typePlaceholderText(text, index) {
|
||||
if (index < text.length) {
|
||||
searchInput.placeholder = text.substring(0, index + 1);
|
||||
setTimeout(function() {
|
||||
typePlaceholderText(text, index + 1);
|
||||
}, 100); // Adjust the typing speed (milliseconds per character)
|
||||
}
|
||||
}
|
||||
|
||||
// Function to set a random placeholder text with typewriter effect
|
||||
function setRandomPlaceholderText() {
|
||||
var randomIndex = Math.floor(Math.random() * placeholderTexts.length);
|
||||
var randomText = placeholderTexts[randomIndex];
|
||||
typePlaceholderText(randomText, 0);
|
||||
}
|
||||
|
||||
// Call the function initially to set a random placeholder text
|
||||
setRandomPlaceholderText();
|
||||
|
||||
// Call the function periodically to change the placeholder text
|
||||
setInterval(setRandomPlaceholderText, 5000); // Change the text every 5 seconds (adjust as desired)
|
||||
|
||||
// JavaScript code for displaying the notification overlay
|
||||
function showNotification(message) {
|
||||
var overlay = document.getElementById("notification-overlay");
|
||||
|
Reference in New Issue
Block a user