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

//Html Login Page Starts here

<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");

  });

}

venereology answered 10 months ago
Next > < Previous

Related 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 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...
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...
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...
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...
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...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and...
Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and JavaScript # Sign in/SignUp page should work # CSS HTML and javaScript should be in separate files # Add images # post a picture of your output and code as well
Use CSS to format the appearance of a web page containing several literary quotes marked as...
Use CSS to format the appearance of a web page containing several literary quotes marked as blockquote elements. Figure 2–54 shows a preview of the formatted page. Figure 2-54 Do the following: 1.Open the files code2-1.html and code2-1.css and in the comment section enter your name (First + Last) and the date (MM/DD/YYYY) into the Author: and Date: fields of each file. 2. Go to the code2-1.html file and within the head section insert a link element linking the page...
Write an HTML file for a web page that contains the items below. Use an internal...
Write an HTML file for a web page that contains the items below. Use an internal style sheet to specify all fonts, sizes, colors, and any other aspects of the presentation. Your page should contain the following items: 1) A header with white text on dark green background (just for the header, not the entire page), in Impact font, bold, and centered. 2) Two paragraphs of text, each with dark gray text in Tahoma font, on a light blue background,...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT