I'm currently designing a landing page for one of my clients with their logo placed prominently in the center. Right below the logo, they want their catchy slogan to appear on page load with a fading effect. To achieve this, I have included the slogan as a paragraph in the HTML code.
Now, I am facing a challenge in making sure that the text stays responsive and aligned directly below the centered image. I want to ensure that it looks perfect on all devices regardless of the screen size.
Here is the structure of my HTML code:
<div class="viewport1">
<div class="center-wrapper">
<div class="image-wrapper">
<a href="home.html"><img src="images/landing_logo2.png" /></a>
<div id="test"><p>enter the sunshine state</p></div>
</div>
</div>
</div>
Additionally, here is the CSS styling I have implemented:
<style>
div.viewport1 {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
overflow: hidden;
z-index: -9999;
}
div.center-wrapper {
max-width: 100%;
height: 100%;
float: left;
position:relative;
left: 50%;
}
div.image-wrapper {
left: -50%;
position: relative;
max-width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
img {
top: 50%;
left: 50%;
position: relative;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
*, *:before, *:after {
box-sizing: border-box;
}
.image-wrapper p {
width: 100%;
padding-top: 200px;
margin-left: 10px;
font-family: segoe;
font-size: 21px;
text-align: center;
color: #fff;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 5s; /* Firefox < 16 */
-ms-animation: fadein 5s; /* Internet Explorer */
-o-animation: fadein 5s; /* Opera < 12.1 */
animation: fadein 5s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>