Question

In: Computer Science

Please use HTML and CSS - Create the overlay and popup: Note: this is my original...

Please use HTML and CSS - Create the overlay and popup:

Note: this is my original code just add it to to make the next steps please:

HTML:

<nav>
<ul class="Login-button"> LOG IN</ul>
</nav>

CSS:

*{
margin: 0;
padding: 0;
list-style-type: none;
}
nav {
height: 50px;
background: #DEDFE0;
display: flex;
align-items: center;
padding: 0 20px;
}

.login-button {
padding: 5px 8px;
cursor: pointer;}
.login-button: hover {
background: #BCBDC0;
}

PLEASE do the following:

Create a transparent grey overlay over the screen. Here the background of the overlay is rgba(192,192,192, 0.5)

and

Once the overlay is done, center a white box (which will be the popup) on the screen.

Solutions

Expert Solution

<HTML>

<nav>
<ul class="Login-button"> LOG IN</ul>
</nav>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
        $(document).ready(function(){
                $("#myModal").modal('show');
        });
</script>

<style> 

body{
margin: 0;
padding: 0;

background-color:rgba(192,192,192, 0.5)

}
nav {
height: 50px;
background: #DEDFE0;
display: flex;
align-items: center;
padding: 0 20px;
}

.login-button {
padding: 5px 8px;
cursor: pointer;}
.login-button: hover {
background: #BCBDC0;
}

</style>

<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">popup</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proiden</p>
                
            </div>
        </div>
    </div>
</div>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Once the overlay is done, center a white box (which will be the popup) on the screen.
</body>

</HTML>

venereology answered 2 years ago
Next > < Previous

Related Solutions

Please write "my account" page program by using HTML and CSS
Please write "my account" page program by using HTML and CSS
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in 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...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel and tourism company. Use between 8 and 12 pictures that will automatically change every 1 to 3 seconds. You may use the pictures from Assignment 1 and add more to the collection. The slide show will have the following features: Use a background image. The pictures must use a type of ‘transition’ ie Fade in/Fade out when the pictures change. Each picture must include...
Given the html below, create css to produce the following illustrated color page output: Red for...
Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above">   I'm...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write a website for the fictitious company Game Gurus. The website will have a home page that you will design, as well as pages created by each "guru." (At least 2 gurus are required). The home page will include: o A description of the site o A quote from each guru o Links to manufacturers websites o Links to the TopTen.html and GameOfTheWeek.html pages for...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT