Question
In: Computer Science
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for more information. Because I don't have. It's just imagination.
Solutions
Expert Solution
Answer : Given data
* It's a web page after you log in to your account, use CSS, java and HTML to make a charity admin page.
<html>
<head>
<link rel="stylesheet" href="anyname.css">
</head>
<title>login account</title>
<body>
<div class="MainContainer">
<header
class="page-header">
<nav>
<a
href="#0">
<img
class="logo"
src="logo.svg"
alt="forecastr
logo">
</a>
<button
class="toggle-mob-menu"
aria-expanded="false"
aria-label="open
menu">
<svg
width="20"
height="20"
aria-hidden="true">
<use
xlink:href="#down"></use>
</svg>
</button>
<ul
class="admin-menu">
<li
class="menu-heading">
<h3>Admin</h3>
</li>
<li>
<a
href="#0">
<svg>
<use
xlink:href="#pages"></use>
</svg>
<span>Pages</span>
</a>
</li>
<!--
more list items here -->
<li>
<button
class="collapse-btn"
aria-expanded="true"
aria-label="collapse
menu">
<section
class="search-and-user">
<form>
<input
type="search"
placeholder="Search
Pages...">
<button
type="submit"
aria-label="submit
form">
<svg
aria-hidden="true">
<use
xlink:href="#search"></use>
</svg>
</button>
</form>
<div
class="admin-profile">
<span
class="greeting">...</span>
<div
class="notifications">
<span
class="badge">...</span>
<svg>
<use
xlink:href="#users"></use>
</svg>
</div>
</div>
</section>
<svg
style="display:none;">...</svg>
<header
class="page-header">...</header>
<section
class="page-content">...</section>
<svg
aria-hidden="true">
<use
xlink:href="#collapse"></use>
</svg>
<span>Collapse</span>
</button>
</li>
</ul>
</nav>
</header>
</body>
</div>
//Html Login Page Ends here
Css of above page
/*CUSTOM VARIABLES HERE*/
.page-header {
position:
fixed;
top:
0;
left:
0;
right:
0;
bottom:
0;
overflow:
auto;
padding-top:
20px;
width:
var(--page-header-width);
color:
var(--page-header-txtColor);
background:
var(--page-header-bgColor);
}
.page-header nav {
display:
flex;
flex-direction:
column;
min-height:
100%;
}
.page-header .toggle-mob-menu {
display:
none;
}
/*CUSTOM VARIABLES HERE*/
.search-and-user {
display:
grid;
grid-template-columns:
1fr auto;
grid-column-gap:
50px;
align-items:
center;
background:
var(--page-content-bgColor);
margin-bottom:
30px;
}
.search-and-user form {
position:
relative;
}
.search-and-user form button {
position:
absolute;
top:
50%;
right:
15px;
transform:
translateY(-50%);
}
.search-and-user .admin-profile {
display:
flex;
align-items:
center;
}
.search-and-user .admin-profile .notifications
{
position:
relative;
}
.search-and-user .admin-profile .badge {
display:
flex;
align-items:
center;
justify-content:
center;
position:
absolute;
top:
-10px;
right:
-3px;
width:
18px;
height:
18px;
border-radius:
50%;
font-size:
10px;
color:
var(--white);
background:
var(--red);
}
///Tooltip of above html admin page Using Js
const body = document.body;
const menuLinks =
document.querySelectorAll(".admin-menu
a");
const collapsedClass =
"collapsed";
for (const link of menuLinks) {
link.addEventListener("mouseenter",
function() {
body.classList.contains(collapsedClass)
&&
window.matchMedia("(min-width:
768px)").matches
?
this.setAttribute("title",
this.textContent)
:
this.removeAttribute("title");
});
}
______________THE
END________________
venereology answered 10 months agoRelated Solutions
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and...
Use CSS to format the appearance of a web page containing several literary quotes marked as...
Write an HTML file for a web page that contains the items below. Use an internal...
- Based on the loanable funds theory, explain how each of the following changes should impact interest...
- research paper: each student will be responsible for writing an argumentative research paper discussion a topic...
- In java based on the classes provided finish the program per the requirements: ----------------------------------------------Class1 package cardgame;...
- Identify two cultures and analyze the nurturing process within each culture and discuss the impact the...
- Digital security is an increasing concern is the Internet age. In order to protect sensitive information...
- the challenges experienced by companies considering full application of customer retention strategy in the face of...
- Respond to the following in a minimum of 175 words: The flow of a program is...