# PHP processed, HTML-CSS, CMS-agnostic, contact now panel

I develop a CMS-agnostic PHP formatted HTML-CSS "contact now" panel, sticky in the bottom of a website screen.
The code is tested and works as can be seen from the following image.
I ask a review of the code, primarily about the everything-first CSS.

Sidenote: I format the HTML in PHP because PHP supports include which I use a lot to well organize the code, generally without caring about the output if the code works, especially in a simple project.

## Files

### main_box.php

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div dir="rtl" class="cacb_main_box">
<?php
include './phone_box.php';
include './email_box.php';
?>
</div>
</body>
</html>


## phone_box.php

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div class="cacb_phone_box">
<img class="cacb_phone_icon" src="./images/whatsapp.svg"></img>
<span class="cacb_phone_text">WhatsApp call</span>
</a>
</div>
</body>
</html>


### email_box.php

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div class="cacb_email_box">
<img class="cacb_email_icon" src="./images/email.svg"></img>
<span class="cacb_email_text">Send an email</span>
</a>
</div>
</body>
</html>


### css/main_box/general_mobile_structure.css

.cacb_main_box {
display: flex;
flex-direction: row; /* column */
justify-content: center;
align-items: center;
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: auto;
width: 100%;
height: 60px;
overflow: hidden;
text-align: center;
text-decoration: none;
font-size: 120%;
font-weight: bold;
color: #fff;
background: #2a4b8d;
text-shadow: 0 1px 0px rgb(0 0 0 / 18%);
}


### css/phone_box/general_mobile_structure.css

.cacb_phone_box {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}

color: white;
text-decoration: none; /* Fixes continuing line problem */
}

.cacb_phone_icon {
width: 50px;
height: 50px;
vertical-align: middle;
}

.cacb_phone_text {
vertical-align: middle;
}


### css/email_box/general_mobile_structure.css

.cacb_email_box {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}

color: white;
text-decoration: none; /* Fixes continuing line problem */
}

.cacb_email_icon {
color: white;
width: 50px;
height: 50px;
vertical-align: middle;
}

.cacb_email_text {
vertical-align: middle;
}


The CSS looks good to me, although I would reconsider using z-index: auto;. I assume you want your contact-now panel to always appear on top of other content, even if it is not included as the last element? In that case a high valid for z-index is needed. If you always put your contact-now panel last in the <body> tag, and no other elements have a positive z-index, then z-index: auto; is not needed. See: z-index.

I don't quite understand why you need to repeat the CSS for the phone_box and the email_box?. Those are virtually the same. Having one file will be enough and saves some resources.

Your use of PHP's include() doesn't seem to work out as it should. If you were to look at the source code in your browser, you would see this:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div dir="rtl" class="cacb_main_box">
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div class="cacb_phone_box">
<img class="cacb_phone_icon" src="./images/whatsapp.svg"></img>
<span class="cacb_phone_text">WhatsApp call</span>
</a>
</div>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div class="cacb_email_box">
<img class="cacb_email_icon" src="./images/email.svg"></img>
<span class="cacb_email_text">Send an email</span>
</a>
</div>
</body>
</html>        </div>
</body>


This HTML is clearly not well-formed. You should not have nested <!DOCTYPE html> and <html> tags. Yes, it works, but only because your browser is fault tolerant.

Once you've opened the <body> you only need to use content tags. For instance, email_box.php could be like this:

<div class="cacb_email_box">

• I don't understand why you said "You seem to misunderstand how PHP's include() works", I used it to include other HTML files because HTML doesn't have an include internal function of its own, which is perfectly fine if HTML is putted inside a PHP frame. Sep 18, 2021 at 7:53
• I think you should change the phrasing of what you said about me in regard to include() because a special use doesn't mean someone doesn't understand how something works (or should work for that matter). Sep 18, 2021 at 8:03