Scribd
Upload
12 views3 pages

!DOCTYPE HTML

The document contains HTML and CSS code to create a webpage with a header, search bar, and actresses displayed in a grid. There is JavaScript code to filter the displayed actresses based on the search term entered in the search bar. The header is fixed to the top of the page while the main content scrolls underneath. Styles are applied to format elements and add interactivity like hover effects.

Uploaded by

sohamjain551
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views3 pages

!DOCTYPE HTML

The document contains HTML and CSS code to create a webpage with a header, search bar, and actresses displayed in a grid. There is JavaScript code to filter the displayed actresses based on the search term entered in the search bar. The header is fixed to the top of the page while the main content scrolls underneath. Styles are applied to format elements and add interactivity like hover effects.

Uploaded by

sohamjain551
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll To Top With Scroll Progress</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="progress">
<span id="progress-value">&#x1F815;</span>
</div>
<h1></h1>
<h3></h3>
<title>Actresses</title>
<style>
body {
margin: 0;
padding: 0;
}

header {
background-color: #ff6f6f; /* Example background color */
color: white; /* Example text color */
text-align: center;
padding: 5px;
position: sticky;
width: 100%;
top: 0;
z-index: 1000; /* Ensure the header is above other elements */
}

/* Adjust the content to avoid being overlapped by the fixed header */


main {
margin-top: 60px; /* Adjust according to the header's height */
padding: 20px;
}

/* Your existing styles for other sections */

footer {
background-color: #ff6699; /* Example background color */
color: white; /* Example text color */
text-align: center;
padding: 10px;
}

body {
background: linear-gradient(to bottom right, #ff6699 ,#ff6699 );
font-family: 'Berlin Sans FB Regular'; /* Change the font family */
color: #FBA145;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.actress {
display: inline-block;
margin: 10px;
text-align: center;
}

h2 {
margin-top: 40px;
cursor: pointer;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.actress-image {
width: 150px;
height: 200px;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
}
.actress a {
text-decoration: none; /* Remove underline */
color: inherit; /* Inherit the color from the parent (usually black or as
specified) */
}

.actress a:hover {
text-decoration: underline; /* Add underline on hover if desired */
}
h2 {
margin-top: 10px;
cursor: pointer;
}
#search-box {
margin-top: 20px; /* Adjust the top margin as needed */
margin-bottom: 10px; /* Adjust the bottom margin as needed */
width: 200px; /* Adjust the width as needed */
padding: 8px; /* Adjust the padding as needed */
font-size: 14px; /* Adjust the font size as needed */
border: none;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
#search-box:focus {
outline: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
<input type="text" id="search-box" onkeyup="searchActresses()"
placeholder="Search for Pornstars">
<script>
function searchActresses() {
var input, filter, actresses, actress, i, txtValue;
input = document.getElementById("search-box");
filter = input.value.toUpperCase();
actresses = document.getElementsByClassName("actress");

for (i = 0; i < actresses.length; i++) {


actress = actresses[i];
txtValue = actress.getElementsByTagName("h2")[0].textContent ||
actress.getElementsByTagName("h2")[0].innerText;

if (txtValue.toUpperCase().indexOf(filter) > -1) {


actress.style.display = "";
} else {
actress.style.display = "none";
}
}
}
</script>
<title>Your Page Title</title>

</head>
<!-- Script -->
<script src="script.js"></script>

<body>
<header>
<h1>PornStars⭐</h1>
<!-- Add any additional header content -->
</header>
<div class="actress-container">

You might also like