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>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/main_box/mobile_general_structure.css"></link>
</head>
<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>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/phone_box/mobile_general_structure.css"></link>
</head>
<body>
<div class="cacb_phone_box">
<a class="cacb_phone_link" href="tel:NUMBER">
<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>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/email_box/mobile_general_structure.css"></link>
</head>
<body>
<div class="cacb_email_box">
<a class="cacb_email_link" href="/contact_form.php">
<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%;
}
.cacb_phone_link {
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%;
}
.cacb_email_link {
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;
}