Move the check mark to the middle of the screen

I am a beginner in HTML and I am trying to create a logout page that should have a design similar to this:

https://i.sstatic.net/ld1R1.png

I attempted to create it but I am struggling to position the icon correctly and I also want the whole content to be enclosed in a box, which I am finding challenging. Below is the code I have written for this.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Thank you!</title>
</head>
<i class="bi bi-check-circle"></i>
<svg xmlns="http://www.w3.org/2000/svg"  width="125" height="125" fill="#5D883C"  class="bi bi-check-circle" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>    
    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
  </svg>

<body>
    <div style="Width: 800px;
            Height: 300px;         
            margin: 10px;">          
</div>

<span style=
    "font-size: 35px;
    color: #707070;
    margin-left: 30%;
    text-align: center;"> Thank you! We value your support and partnership.</span>
    
<h4>
    <span style="font-size: 16px; font-family:Calibri; color: #707070; text-align: center; margin-left: 45%;">Click here to log back in: 
    </span>
    <a href="/App/Login.aspx"><span style="font-size: 16px; color:#5D883C;text-align: center;">Login</span></a>
</h4>
</body>
</html>

I'm in need of assistance with this. Thank you in advance.

htmlcss

Answer №1

All you have to do is include this snippet in your CSS file

 svg {
        display: block;
        margin: 0 auto;
      }

Feel free to reach out if you have any questions or if you need further assistance.

Answer №2

Here is the completed code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Thank you!</title>
    <style>

html, body
{
    font-family: sans-serif;
}

#center
{
    margin: 0 auto;
    margin-top: 100px;
    width: 1000px;
    text-align: center;
}

#ty
{
    font-size: 35px;
    color: #707070;
    display: blocK;
}

#bottom
{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    font-size: 16px;
    border-top: 1px solid #555;
    background-color: #ddd;
    line-height: 40px;
}

svg
{
    display: block;
    margin: 50px auto;
}

    </style>
</head>
<body>
<div id="center">
    <i class="bi bi-check-circle"></i>
    <svg xmlns="http://www.w3.org/2000/svg"  width="125" height="125" fill="#5D883C"  class="bi bi-check-circle" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
        <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
    </svg>
    <span id="ty"> Thank you! We appreciate your support and collaboration.</span>
    <div id="bottom">
        <span>Click here to return to the login page:</span>
        <a href="/App/Login.aspx"><span style="font-size: 16px; color:#5D883C;text-align: center;">Login</span></a>
    </div>
</div>

</body>
</html>

View the code in a full page:

Answer №3

Using inline styles for a similar implementation:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Appreciation!</title>
  </head>
  <i class="bi bi-check-circle"></i>

  <body>
    <div style="width: 100%; text-align: center;">
      <div
        style="
          border: 5px solid #f7f7f7;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.19);
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="125"
          height="125"
          fill="#5D883C"
          class="bi bi-check-circle"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
          />
          <path
            d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
          />
        </svg>
        <div>
          <span style="font-size: 35px; color: #707070; text-align: center;">
            Gratitude for your continuous support and collaboration!</span
          >
        </div>

        <div style="background-color: #f7f7f7; padding: 1px; margin-top: 20px;">
          <h4>
            <span
              style="
                font-size: 16px;
                font-family: Calibri;
                color: #707070;
                text-align: center;
              "
              >Feel free to log in again:
            </span>
            <a href="/App/Login.aspx"
              ><span
                style="font-size: 16px; color: #5d883c; text-align: center;"
                >Login</span
              ></a
            >
          </h4>
        </div>
      </div>
    </div>
  </body>
</html>

Access the CodeSandbox here

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

Using PHP to send emails with embedded images and background images

I am struggling to send an email with a single image placed on top of another background image. I have managed to make it work using the following code: $message .= "<tr><td background='https://path-to-background/image.jpg'><img s ...

phphtml

Troubleshooting my CSS navigation bar - What am I missing?

I've been developing a navigation bar using a combination of HTML, CSS, and JavaScript. After writing the code and setting the display of the bar to fixed, I encountered an issue where the content of the page was overlapping the nav bar. Below you&ap ...

javascripthtmlcssnavigationbar

Can a JavaScript framework be created to ensure all browsers adhere to standards?

As someone who isn't an expert in JavaScript, I wonder if it's feasible to create a comprehensive embeddable JavaScript file that ensures all browsers adhere to standards. Could there be a compilation of known JavaScript hacks that compel each br ...

javascriptcssdomstandards

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...

javascripthtmlcssvideo

Desktop sharing in HTML5/H.264 format for optimal performance and compatibility across all

Looking to showcase my desktop through live streaming over http to multiple users. The initial plan is to provide a real-time read-only view of the desktop for various users. In the future, we may consider granting users access to control the desktop using ...

asp.netencodinghtmlh.264screensharing

Is it possible to dynamically render css using Express.js?

I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...

csslessexpressstylus

Struggling to properly reference an item within an array

Struggling to create an HTML page for a class project that utilizes a drop-down menu to display relevant information from an array? Check out my jsfiddle for the full HTML section. Any assistance would be greatly appreciated. I must admit, I'm not we ...

javascripthtmlarraysimageobject

What causes the burger dropdown to be concealed by additional content?

While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content. https://i.sstatic.net/7K9FD.png I am using Mantine wit ...

cssreactjsnext.jsoverflowmantine

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

Representation of a family tree in CSS showcasing multiple sub-parents (both many to one and one to many relationships)

I've come across various family tree presentations. I'm curious if it's possible to display a one-to-many and then many-to-one structure? Currently, the flow is linear stop after stop, but I'd like to incorporate multiple steps that con ...

cssfamily-tree

Exploring elements using dynamic xpaths in selenium

When working with Selenium WebDriver, I am facing difficulties selecting the <input class="cs-autocomplete-input" tabindex=""> element due to its fluid ID. This is because there are multiple items with the same class name on the web page, making it c ...

htmlcssselenium

positioning of multiple buttons in a customized header for mui-datatables

I'm currently using mui-datatables in my app and have customized the table toolbar to include additional buttons. However, I've encountered an issue where adding a second button causes it to be displayed below the first one, despite there being e ...

cssreactjsmaterial-uimui-datatable

Changing $scope does not automatically refresh the selected option when using ng-options with <select> in AngularJS

My select element is structured like this: <select ng-model="exportParam" ng-options="item as item.lib for item in allExportParams | orderBy:'lib'" class="form-control"> </select> To save its state for later display, I sto ...

javascripthtmlangularjsdrop-down-menu

Ways to duplicate a letter in HTML?

How can a character be printed repeatedly within a table cell using only HTML or HTML and CSS (excluding HTML5)? *(limiting to only HTML or a combination of HTML and CSS) ** The goal is to print the character "." across the entire length of the cell, wit ...

htmlcss

Issue: In Firefox, resizing elements using position:absolute does not work as expected

My resizable div code looks like this: #box { height: 10rem; width: 10rem; resize: both; overflow: hidden; border: solid black 0.5rem; position: absolute; pointer-events: none; } <div id="item"></div> While it works perfectly ...

javascripthtmlcss

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

javascriptjqueryhtml

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

javascripthtmlcssbutton

The absence of image input was evident in the POST request

Within my Django template, I have an input field linked to a Django ImageField. Once rendered, the HTML code appears as follows: <form action="/accounts/username/" method="post" id="profile_form" enctype="multipart/form-data"> &l ...

htmldjangopostdjango-templates

The active class in the Bootstrap carousel is not updating when trying to change

I am struggling to make the Twitter Bootstrap carousel function properly. Although the slides automatically change after the default timeout, the indicators do not switch the active class, resulting in my carousel failing to transition between slides. Ini ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

The utilization of HTML in Laravel for generating PDF documents

I'm currently in the process of developing a website using Laravel, where I need to include a functionality that allows users to download a PDF containing details related to the specific page they are viewing (such as a training course). For this pur ...

phphtmllaravelpdfdompdf