I hope everyone is doing well and enjoying their lives. As before we have completed our HTML and CSS work in four lectures. And Alhamdulillah we have come to know very well and have performed our task very well. Similarly from today, we have started working with javascript so for this we have to handle our objects with the help of javascript. As we are told in the task the web layout has five zones. I will explain these five zones separately.

Before this, I want to thank my teachers who have given us a detailed lecture on JavaScript. Its elements its properties tell us everything with the help of which we easily know which elements we have to use where. So using this using the same color combination and similarly using the same height and width I have created a layout of my own.

ZONE 01

First, let's talk about Zone One. Zone one is where we have to prepare our header. In the background of this header, we have to add an image. I have used the image that was posted in the challenge post. Same image I have downloaded and placed in my folder and its source path I have given here. With its help, I created a structure of it through HTML and then I designed it with the help of CSS.

HTML

CSS

OUTPUT

ZONE 02

Before creating zone two I created a container to do all the work inside. I have given class to this container as a container. After giving it a container I then worked on zone two in which I created a new bar. To create the new bar that is showing on our left side, I have written it in the anchor tag, given its identity, and given a link to it. After giving the link I designed it with the help of CSS. It has been given a background color of green and similarly the white color of its text. Padding etc is given, font size is set and I have given it a margin from the bottom. After setting them like this, they are hovered over, which you can see in color. And then with it, I added its javascript so that it runs perfectly.

HTML

CSS

JavaScript

The javascript code is given at the end of the post. You can access it from there.

OUTPUT

ZONE 03

The third zone is our zone which shows us in the middle. Which we know as a display area. It will have all our type of equations solo in which we have also added a captcha where we are see everything from identification confirmation. Our third zone is where we have to solve the equation as well as check the prime factor and we have to login to the user. This is our third zone, we first created it using HTML and then designed it using CSS. In which we set its background color, padding, and width, and align items to the center. Similarly, we have given the background color and redid it nicely. We also added JavaScript.

These are the elements that we cannot run without JavaScript. All javascript code is given below in the final output you can teleport from there.

HTML

CSS

JavaScript

The javascript code is given at the end of the post. You can access it from there.

OUTPUT

ZONE 04

The last zone of our main content is zone number four. In which we have added a quote by Einstein. Which is an informative Einstein quote with which we are covering our area anyway. This has nothing to do with this layout but we are using this code to complete our zone four so we can complete our zone. It is being shown to us on our right side which is written in red color with white color text. We'll call it Zone Four, so we've used HTML and CSS and designed it.

HTML

CSS

JavaScript

The javascript code is given at the end of the post. You can access it from there.

OUTPUT

ZONE 05

This is the final step of the layout of our web page where we have added our footer. The fitter is simple as you can see in the output. In this, I have given my email for my contact so that people can contact me through this email. So this was our final step which we called zone five and in that, we created the footer. This is the final step of our layout, after which all our work is done.

HTML

CSS

OUTPUT

Final Layout

You can see the final output of my layout generated in the image below. So with more explanation, I have made a video so that through this video you can check how we solve our equations. Here is how we have to log in the user or how we have to check the prime factors then the detailed video is also given below. That helps you understand all of his zones and his equations, and how they're supposed to run.

Final Video Layout