What is the process for updating the HTML login page?

Hey there, I'm new to HTML and currently working on an online payment system. I've been struggling with updating the UI of the web app, specifically trying to transform the login page from the first image (pic 1) to the second image (pic 2). Here are the links to the images:

https://i.sstatic.net/ujncD.png The 1st pic

https://i.sstatic.net/YPVSK.png The 2nd pic

I've also included the code I've been working on and would really appreciate your help in achieving this transformation. Here is the link to the UI login page that I'm aiming for: https://codepen.io/ainalem/pen/EQXjOR

Code.gs

 
// JavaScript and Google Apps Script code here

WebAppLogin


// HTML and CSS code for the WebAppLogin interface goes here

CssLogin


// Custom styling using CSS for the WebAppLogin interface

JavaScript


// JavaScript functions and animations for the WebAppLogin interface
javascripthtmlcssuser-interfacegoogle-apps-script

Answer №1

Construct a flexbox wrapper and place both divs inside it, then utilize flex properties to align the two divs horizontally using flexbox. Refer to the example below.

html


 <section class='login-section'>
    <div class="left">
    Your content here
    </div>
    <div class="right">
    Form goes here
    </div>
  </section>

css

 .login-section {
    display:flex;
    justify-content: space-around
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mapping over an array and ignoring any undefined properties in a dynamic object

Looking for a way to dynamically create objects in the 'map' function to reduce the final array size. The goal is to avoid adding properties with undefined values. For example, if 'offst: undefined', skip this property but add others wi ...

javascriptarraysvue.js

Using Twig in combination with Ajax to send requests using the Get method

Trying to utilize the Get method to send an Ajax request, I have encountered an issue. Despite adding an alert to my request function to confirm the link, no alert is displayed! Here is my code: Below is my html.twig view: <a href="#" onclick="reques ...

javascriptajaxsymfonytwig

How can I only replace every second occurrence in a JS string?

Looking for help with JavaScript: "a a a a".replace(/(^|\s)a(\s|$)/g, '$1') I thought the result would be '', but it's showing 'a a' instead. Can someone explain what I'm missing? To clarify, I want to r ...

javascriptregex

Error encountered in Next JS with Firebase: TypeError - firebase_app__WEBPACK_IMPORTED_MODULE_1__.storage not recognized as a function

import * as firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/storage'; Someone had the foresight to add the firestore import already which fixed most of the issues for everyone else const clientCred ...

javascriptfirebasenext.jsfirebase-storage

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

javascripthtmlcssbootstrap-5

Declare an array with only one element using RegisterArrayDeclaration

While working on my code backend, I encountered a peculiar issue with the JavaScript array registration. At times, instead of registering the actual values, commas are being placed in the array. Here are two scenarios showcasing different outcomes: oD ...

javascript.netarraysvb.net

Adjust the dimensions within the class in bootstrap

Objective: My goal is to adjust a CSS code to be 700 instead of 870, based on the second image. Challenge: Currently, the default value is set at 870 (as shown in picture 1), but I need to use CSS to change it to 700. I attempted to make this adjustm ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to adjust my CSS so that the height of my textarea always mirrors the height of its parent div?

My goal is to have a textarea adjust its height to match the height of the containing div. Currently, the width is perfect, but the empty textbox only takes up around 20% of the div's height. Even when text is added via an ajax call, the textarea rem ...

htmlcss

Establish the starting time for the timer and use the setInterval() function according to the seconds stored within the object

How can I configure the values of timerOn, timerTime, and timerStart to make the watch start counting from 120 seconds? Currently, the clock starts counting from 3 minutes and 22 seconds, but it should start from 2 minutes. You can find all the code here: ...

javascriptreactjs

Setting up JW Player with a YouTube Embed URL

Embed link Is it possible to embed a YouTube link in my JW Player without disrupting the design? I have a specific design for the JW Player frame that I need to retain while incorporating the YouTube link. I have searched extensively but haven't foun ...

javascripthtmlyoutubejwplayer

Discover the method used to determine the vertical dimensions of a button

Check out my code snippet (here): <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-8 p-0"> <form class="form-group"> <form> <input type="t ...

htmlcssbootstrap-4

Having trouble with some JS and Jquery codes not functioning properly in IE until the page is refreshed a few times. Any suggestions on how to fix this issue?

My code seems to be experiencing issues in Internet Explorer where some of the JS and jQuery codes are not functioning correctly initially, but start working after refreshing the page a few times. Any thoughts on why this could be happening? Here is the ...

javascriptjqueryhtml

Incorporating an HTTP header into d3.json using queue.js

I know that I can include a header in a D3 JSON request by using the following code: d3.json("http://localhost:8080/data") .header("Application-ID", "1") However, I'm uncertain about how to add this header when utilizing queue's defer method. ...

javascriptd3.jsqueue.js

Update all Vue component imports to include the .vue extension at the end

The Vue CLI has decided to no longer support extensionless imports, causing compatibility issues with certain VS Code extensions like Vetur. In order to address this issue, I require all default component imports from a .vue file to include the file exten ...

javascriptvue.jsvisual-studio-coderefactoringes6-modules

Retrieve all Data from Table Using AJAX

I'm encountering an issue with a program I've developed. It utilizes AJAX to send a user id to a php script that searches a table for matching records. However, the problem lies in only returning one row when it should be fetching all rows that m ...

phpjavascriptmysql

Customizing CSS for Internet Explorer browsers

I am looking to target specific CSS styles for Internet Explorer only, without affecting other browsers. Initially, I tried using conditional comments: <!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]--> <!--[if IE 7 ]><html cl ...

htmlcssinternet-explorerconditional-comments

Creating a Persistent Top Navigation Bar using Bootstrap and Angular

I am struggling to implement a fixed top navbar in Angular. The structure of my main app.component template is as follows: <page-header></page-header> <router-outlet></router-outlet> The bootstrap navbar is included within my ...

csstwitter-bootstrapangularbootstrap-4

What is the most efficient way to select all checkboxes with jQuery?

I'm not proficient in jQuery, but I attempted to create a script for my application to check all checkboxes, with no success. I first tried using the attr method, and then attempted the prop method, but it seems I'm missing something. Here is my ...

javascriptjquerycheckbox

Incorrectly resolving routes in the generate option of Nuxt JS's .env configuration file

Having trouble using Nuxt JS's 2.9.2 generate object to create dynamic pages as static files by referencing a URL from my .env file: nuxt.config.js require('dotenv').config(); import pkg from './package' import axios from 'a ...

javascriptvue.jsvuejs2nuxt.js

Permanent Solution for HTML Textbox Value Modification

https://i.sstatic.net/nB58K.pngI'm currently working on a GPS project where I am attempting to capture the altitude (above sea level) value in textbox1 and convert it into a ground level value displayed in textbox2. In this scenario, the GPS Altitude ...

javascripthtml