This is my main code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*SLIDESHOW*/
body {
background-color: #150a35;
}
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 100%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
/* SLIDESHOW */
/* Navigation list */
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7c4dff;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#hyperkeys">Hyper-Keys</a></li>
<li>Home</li>
<li>Games</li>
<li class="right">Terms of Service</li>
<li class="right">Contact</li>
<li class="right">FAQ</li>
</ul>
<br>
<br>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<br>
</body>
</html>
And this is what it looks like:
But when I add this to the <head>:
div {
padding: 15px 30px;
background: #7c4dff;
width: 430px;
border-radius: 8px;
}
This happens to the site:
All the things just overlap, and you can't understand anything. What am I doing wrong?
Using
div {
padding: 15px 30px;
background: #7c4dff;
width: 430px;
border-radius: 8px;
}
Changes each and every div on the page to match those properties. All 5 of them, regardless of any class.
You need to be more specific with your CSS selector.
div.thisdiv {
padding: 15px 30px;
background: #7c4dff;
width: 430px;
border-radius: 8px;
}
<div class="thisdiv" style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
Related
I am working on a project and I want to make it look as sleek as possible, I want the website to look beautiful while also being responsive and functioning, I am trying to animate text emelents to appear so that when you scroll to them, they slide in from the sides, or something like that, I have tried Fireship's method but thtat does not seem to be working.
Here is my code:
#import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#700&display=swap');
html body {
background: #0e1212;
font-family: 'Roboto Mono', monospace;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
font-family: 'Roboto Mono', monospace;
}
.main {
display: grid;
justify-content: center;
min-height: 100vh;
text-align: center;
position: absolute;
top: 25%;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: #DBDBDB;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: #622cd8;;
transition: 0.5s;
animation-name: example;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.active {
color: #808080;
}
.active:hover {
color: #808080;
animation-name: active;
}
#keyframes active {
0% {
color: #808080;
}
100% {
color: #808080;
}
}
#keyframes example {
0% {
color: #DBDBDB;
}
100% {
color: #622cd8;
}
} .hidden{
opacity: 0;
filter: blur(5px);
transform: translateX(-100%);
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css">
<script src='script.js'> </script>
<title>Home</title>
</head>
<body>
</head>
<body>
<ul id='menu' >
<li><a class="active" href="#home" id="home">.home()</a></li>
<li><a class="inactive" href="#news">.about()</a></li>
<li><a class="inactive" href="#contact">.stuffs()</a></li>
<li><a class="inactive" href="#about">.apply()</a></li>
</ul>
<div class="main">
<section>
<h1 style="text-align: center; color:#DBDBDB; font-size: 100px" >cosmic<span style="color: #622cd8">.club()</span></h1>
<p style="font-size: 25px; color: #ABACAC; position: relative; top: -5%">a modern, advanced, and minimalistic web service</p>
</section>
<section>
<h1>More</h1>
<p>this is also a centered section</p>
</section>
</div>
</body>
</html>
Can I use pure CSS or do I have to use Javascript
html file :
<section>
<div class="container reveal">
<div class="text-container">
<p>
Lorem ipsum dolor sit amet consectetur .
</p>
</div>
</div>
</section>
CSS file:
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: 1s all ease;
}
.reveal.active{
transform: translateY(0);
opacity: 1;
}
js file:
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
My HTML page is blinking with a scroller. when <p> tag is not there, it is not occurring. How to stop and how to add move content?
<!DOCTYPE html>
<html>
<title>testing</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js.css">
<style>
* {box-sizing: border-box;}
.mySlides {display: none;}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height:auto;
width: auto;
/*margin: 0 2px;*/
background-color: #FF0000;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
position: absolute;
}
.active {
background-color: #FF0000;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="header">
<div class="hinner">
<img src="Logo.png" alt="alternatetext" width="136px" height="84px">
<table class="hinnertext">
<tr>
<td style=" font-size: 14px; color:#139ea0; border-right-style: solid; border-width: 0.1em; padding: 0px 30px 0px 30px;"><span style="color:#139ea0; line-height: 20px;">Mon - Fri 8.30 AM - 5.00 PM </span><br><span style="color:#fff; inline-height:20px; ">Weekend Closed</span></td>
<td style="width:350px; color:#139ea0; border-right-style: solid; border-width: 0.1em; padding: 0px 30px 0px 30px;">
<div style="float:left;"> <img src="outline_local_phone_white_24dp.png"> </div>
<div><span style="font-size: 14px; line-height: 20px;">call us: </span> <br>
<span style="font-size: 18px; inline-height:20px; "> <a style="color:#D4D4D4;" href="tel:+94 11 2676858">+94 11 2676858</a> <a style="color:#D4D4D4;" href="tel:+94 113642727">+94 113642727</a></span> </div>
</td>
</tr>
</table>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="FEL-slideshow1.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="FEL-slideshow2.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="FEL-slideshow3.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="FEL-slideshow4.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Three</div>
</div>
</div>
<div>
<!-- this is the problem area -->
<p>
hi
</p>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
#font-face {
font-family: 'Open Sans',sans-serif;
src: url(/font/OpenSans/OpenSans-Regular.ttf);
}
body {
margin: 0 !important;
font-size: 14px;
display: block;
}
div{
overflow:hidden;
}
.header{
/* display: block; */
background: #0a1940;
/*height: 150px;
width: 100%;*/
/* overflow: hidden; */
}
/*Styleing for inside of header - where company logo is*/
.hinner{
max-width: 1140px;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
padding: 35px 0;
}
.hinnertext{
padding: 4px 0;
float: right!important;
}
.hinnerdivider{
padding-right: 20px;
vertical-align: middle;
color: #fff;
}
Can anyone help ? This happens when the paragraph tag is included. When it is not there, webpage is not blinking and the scroller is not showing up. I have marked it with comment, where I have added the <p> tag.
So I have made a simple HTML and CSS website with the background image currently set as the ocean picture.
Here is the code for this website
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li>Cooking</li>
<li>Writing</li>
<li>Creative</li>
<li>Photography</li>
</ul>
</div>
<div class="title">
<h1>Nila Palmo Ram</h1>
</div>
<div class="button">
ARTICLES
ARTWORK
</div>
</header>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: Century Gothic; }
header{
background-image: url(../2.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
ul li.active a{
background-color: #fff;
color: rgb(115, 196, 233);
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 10%;
left: 20%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
For this website I want the background image to be a slider showing three images. I have built the slider separately. Here is the code for the slider:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website2</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for(i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
CSS:
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
Could someone please tell me how I can make the slider of pictures the background of my website?
Thank you!
Make use of position:absolute and set the container height and width to 100%. (I used vh & vw to take the device/view height and width).
I hope you can take it forward. Cheers!!!
// no change here
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none;
/* added */
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
}
/* added */
.mySlides img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
box-sizing: border-box;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!-- image urls changed -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1422246654994-34520d5a0340?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1523706120980-3f90ca135ad6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
(I created a post that was taken down because I don't think I gave enough info or something? I added more here, including the html code that I put together. Please let me know if this is not acceptable.)
I am trying to create a horizontal carousel where you can click the images that are linked to other pages. I have tried multiple types of carousels through HTML that I found on w3schools.com and other websites, but none of them were exactly what I was looking for. Here is what I was able to put together but it just isn't what I'm looking for. It doesn't scroll through the images like a carousel. I would also like to make the images links. Any suggestions?
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<div class="container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Lagoon">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Airport">
</div>
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Plants">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Jeep">
</div>
<div class="column">
<img class="demo cursor" src="image5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Lagoon Again">
</div>
<div class="column">
<img class="demo cursor" src="image6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Airport Again">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Here is a second one that I tried but it's just not right:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<div class="pagination">
«
<img src="https://example.com/image1.jpg" alt="Throw" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image2.jpg" alt="room" style="float: left; width: 22%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image3.jpg" alt=" sectional" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image4.jpg" alt="1970" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image5.jpg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://exmple.com/image6.jpeg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
»
</div>
</body>
</html>
Here are two examples of what I would want it to look like:
Edit: I'll send first person to solve the problem 5$ via cash app.
edit: ok here I added the code. If you look at the area with the robot, it has white space on y-axis as pictured in Samsung mobile browser. Why is this happening? How do I get get mobile samsung browser to look like firefox?
html, body { height: 100%; font-size: 14px;}
#banner
{
width: 100%;
height: 328px;
background: url(http://rawmoneycrew.com/2teso/img/banner_background.jpg) repeat center fixed;
position: relative;
padding-top: 25px;
overflow: hidden;
}
.flex-container
{
display: flex;
justify-content: center;
}
#menubutton
{
position: fixed;
top: 80px;
right: 20px;
background: url(http://rawmoneycrew.com/2teso/img/menubutton.jpg) no-repeat center ;
height:68px;
width:68px;
display: block;
z-index: 2;
}
#menubutton:hover
{
position: fixed;
top: 80px;
right: 20px;
background: url(http://rawmoneycrew.com/2teso/img/menuup.jpg) no-repeat center ;
height:68px;
width:68px;
display: block;
z-index: 2;
}
#biglogo
{
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 0.7s;
}
#keyframes example {
0% {margin-top: 200px;}
100% {margin-top: 0px;}
}
#work
{
width: 100%;
height: 94px;
background-color: #3de1ff;
padding-top: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
#work a
{
margin-left: 10px;
color: white;
text-decoration: none;
}
#logoscrolls
{
width: 100%;
}
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 0%;
width: 100%;
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 1.0); /* Black w/opacity */
overflow-y: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
z-index: 11;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#first
{
min-height: 527px;
background: url(http://rawmoneycrew.com/2teso/img/gbackgroundtest.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font:25px/30px 'Nanum Gothic', sans-serif;
flex-direction: column;
position: relative;
z-index: 0;
}
#second
{
background-color: #ffffff;
width: 100%;
justify-content: center;
align-items: center;
display: flex;
}
#second2
{
background-color: #ffffff;
width: 100%;
}
.row {
width: 100vw;
box-sizing: border-box;
}
.fluid-container
{
background: red;
}
.remove-padding
{
padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0
}
.underline
{
text-decoration: underline;
}
#firstoverlay
{
position: absolute; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3de1ff;
opacity: 0.5;
cursor: pointer; /* Add a pointer on hover */
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: bluefade;
animation-duration: 0.5s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}
#firstoverlayv2
{
position: absolute; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3de1ff;
opacity: 0.5;
cursor: pointer; /* Add a pointer on hover */
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: bluefade;
animation-duration: 0.5s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}
#keyframes bluefade {
0% {opacity: 0;}
100% {opacity: .5;}
}
#firstoverlay22
{
position: absolute; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3de1ff;
opacity: 0.5;
cursor: pointer; /* Add a pointer on hover */
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: bluefade;
animation-duration: 0.5s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}
#firstoverlay2
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:3;
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: btw;
animation-duration: 0.5s;
animation-play-state: paused;
color: white;
}
#firstoverlay2v2
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:3;
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: btw;
animation-duration: 0.5s;
animation-play-state: paused;
color: white;
}
#firstoverlay2two
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:3;
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: btw;
animation-duration: 0.5s;
animation-play-state: paused;
color: white;
}
#keyframes btw {
0% {color: white;}
100% {color: green;}
}
#line
{
width: 0px;
height: 0px;
margin-bottom: 0px;
border-bottom: 1px solid white;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: linegrow;
animation-duration: 0.2s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}
#line2
{
width: 0px;
height: 0px;
margin-bottom: 0px;
border-bottom: 1px solid white;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: linegrow;
animation-duration: 0.2s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}
#keyframes linegrow {
0% {width: 0px;}
100% {width: 200px;height: 10px;
margin-bottom: 10px;}
}
#firstoverlay2:hover > #line
{
display: block;
}
#firstoverlay2v2:hover > #line2
{
display: block;
}
.spacebelow
{
margin-bottom: 5px;
}
.wlink, .wlink:hover
{
color: white;
font-style: italic;
text-decoration: none;
}
body
{
-webkit-font-smoothing: antialiased; /* fixes anti-alias issue */
}
#listservice
{
list-style: none;
margin-top: 10%;
}
#listservice2
{
list-style: none;
width: 250px;
padding-top: 2%;
margin: 0 auto;
margin-top:20px;
}
#listservice li
{
margin-bottom: 10px
}
.listfix
{
margin-right: 5px;
}
#First2
{
height: 270px;
width: 100%;
background: url(http://rawmoneycrew.com/2teso/img/gbackgroundtest.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font:25px/30px 'Nanum Gothic', sans-serif;
flex-direction: column;
position: relative;
z-index: 0;
}
#row2left, #row2right
{
min-height: 527px;
justify-content: center;
align-items: center;
display: flex;
position: relative;
z-index: 1;
}
#row2left
{
background-color: #ffffff;
}
#row2right
{
background-color: #dbdbdb;
}
#blueOverlay
{
opacity: 0;
background-color: #3de1ff;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
#blueOverlay:hover
{
display: block;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 0.7s; /* Safari 4.0 - 8.0 */
animation-name: backgroundOv;
animation-duration: 0.7s;
animation-play-state: running;
animation-fill-mode: forwards;
}
#keyframes backgroundOv{
0% {opacity: 0;}
100% {opacity: 0.5;}
}
#robot
{
height: 309px;
width: 320px;
background-size:contain;
background-position:center;
position: absolute;
z-index: 3;
}
#robotsquare
{
width: 120px;
height: 100%;
background: url(http://rawmoneycrew.com/2teso/img/bluerobot.png) no-repeat center;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
#row2right:hover #blueOverlay
{
display: block;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 0.7s; /* Safari 4.0 - 8.0 */
animation-name: backgroundOv;
animation-duration: 0.7s;
animation-play-state: running;
animation-fill-mode: forwards;
}
#row2right:hover #robotsquare
{
width: 120px;
height: 100%;
background: url(http://rawmoneycrew.com/2teso/img/redrobot.png) no-repeat center;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
#webaudit
{
display: block;
clear: float;
max-width: 270px;
height: 100px;
float:left;
top:45%;
left: 35%;
position: absolute;
}
#bubble
{
float: left;
width: 60%;
display: inline-block;
}
#auditb
{
margin-left: 37px;
margin-top: 10px;
}
#ROItext
{
height: 240px;
background-color: #3b3f3f;
justify-content: center;
align-items: center;
display: flex;
}
#biggerROI
{
font:3.5em/1em 'Nanum Gothic', sans-serif;
color: white;
}
#smallerROI
{
font:2em/2em 'Nanum Gothic', sans-serif;
color: white;
}
#biggerROI2
{
font: 7vw/1vw 'Nanum Gothic', sans-serif;
color: white;
}
#below_ROI
{
min-height: 800px;
background: url(http://rawmoneycrew.com/2teso/img/bgfadedesignblue.jpg) no-repeat top center;
}
.centersme
{
font: 10vw/1em 'Nanum Gothic', sans-serif;
color: #000000;
text-align: center;
margin-top: 10px;
}
.monthsbox
{
width: 242px;
height: 80px;
background: url(http://rawmoneycrew.com/2teso/img/monthbg.png) no-repeat;
margin:0 auto;
font: 2em/1em 'Nanum Gothic', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.center-align-thingo
{
display: flex;
justify-content: center;
align-items: center;
padding: 5%;
margin-top: 30px;
flex-direction: column;
}
.listy
{
font: 1.4vw/2em 'Nanum Gothic', sans-serif;
font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
.texty
{
font:bold 1.2em/1em 'Nanum Gothic', sans-serif;
width: 250px;
height: 50px;
margin-top:10px;
padding-top: 10px;
display: flex;
justify-content: left;
align-items: center;
padding-left: 10px;
}
.textfield
{
width: 250px;
height: 50px;
background: url(http://rawmoneycrew.com/2teso/img/formbg1.jpg) no-repeat;
border: none;
color: #ffffff;
padding-left: 21px;
font: 1.2em/1em 'Nanum Gothic', sans-serif;
margin-top:10px;
}
.textfieldB
{
margin-top:10px;
width: 250px;
height: 73px;
padding-left: 21px;
background: url(http://rawmoneycrew.com/2teso/img/formbgbig.jpg) no-repeat;
border: none;
color: #ffffff;
font: 1.2em/1em 'Nanum Gothic', sans-serif;
}
#submitB
{
width: 107px;
height: 80px;
background: url(http://rawmoneycrew.com/2teso/img/sendbutton.jpg) no-repeat;
border: none;
margin-top:10px;
}
#formWrapper
{
width: 252px;
}
.colorMe
{
background: green;
}
#formtext
{
font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
footer
{
margin-top: 20px;
background: url(http://rawmoneycrew.com/2teso/img/footer.jpg) repeat;
height: 296px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
footer a
{
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>New Hartford Digital Marketing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- START Google Analytics -->
<!-- END Google Analytics -->
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli%7CNanum+Gothic" rel="stylesheet">
</head>
<body>
<a href="javascript:void();" id="menubutton" onclick="openNav()" ></a>
<section class="flex-container" id="banner">
<img class="img-fluid" src="http://rawmoneycrew.com/2teso/img/logo.png" alt="Digital Marketing - 2Teso" height="282" width="282">
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
</section>
<section id="work">
<img src="http://rawmoneycrew.com/2teso/img/spalogo.png" alt="Shangrila Massage Spa" height="72" width="116">
View Our Work
</section>
<div class="fluid-container d-none d-sm-block d-md-block d-lg-block d-xl-block">
<div class="row remove-padding">
<div id="first" class="col" onmouseover="on();" onmouseout="off();" >
<div id="firstoverlay" >
</div>
<div id="firstoverlay2" >
<span id="textfade" class="spacebelow">Your Business. Online.</span>
<div id="line"></div>
<a class="wlink" href="#">View Our Services</a>
</div>
</div> <!-- First End-->
<div id="second" class="col">
<ul id="listservice">
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/seoicon.jpg" alt="seoicon">SEO</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/webdevicon.jpg" alt="web development" >Web Development</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/ppcicon.jpg" alt="ppc icon" >PPC</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/gdicon.jpg" alt="graphic design" >Graphic Design</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/movieicon.jpg" alt="video & cartoon" >Video & Cartoon</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/cwicon.jpg" alt="copy writing">Copy Writing</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/smicon.jpg" alt="social media">Social Media</li>
</ul>
</div> <!-- Second end -->
</div> <!-- row end -->
</div> <!-- fluid container end -->
<div id="First2" onmouseover="on();" onmouseout="off();"
class="d-block d-sm-none d-md-none d-lg-none d-xl-none">
<div id="firstoverlayv2" >
</div>
<div id="firstoverlay2v2" >
<span class="spacebelow">Your Business. Online.</span>
<div id="line2"></div>
<a class="wlink" href="#">View Our Services</a>
</div>
</div> <!-- Second First END -->
<!-- Mobile Second2 START -->
<div id="second2" class="d-block d-sm-none d-md-none d-lg-none d-xl-none" >
<ul id="listservice2">
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/seoicon.jpg" alt="seoicon">SEO</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/webdevicon.jpg" alt="web development" >Web Development</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/ppcicon.jpg" alt="ppc icon" >PPC</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/gdicon.jpg" alt="graphic design" >Graphic Design</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/movieicon.jpg" alt="video & cartoon" >Video & Cartoon</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/cwicon.jpg" alt="copy writing">Copy Writing</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/smicon.jpg" alt="social media">Social Media</li>
</ul>
</div> <!-- Mobile Second2 end -->
<!-- SECOND ROW BELOW "View Our Services" -->
<div class="container-fluid">
<div class="row">
<div id="row2left" class="col-sm-12 col-md-6"><img class="img-fluid" src="http://rawmoneycrew.com/2teso/img/googlekeywords.jpg" alt="Google Keywords" /></div>
<div id="row2right" class="col-sm-12 col-md-6">
<div id="blueOverlay">
</div>
<div id="robot">
<div id="robotsquare"></div>
<div id="bubble">
<img src="http://rawmoneycrew.com/2teso/img/robotbubble.png" alt="bubble" />
</div>
<form id="webaudit">
<input type="text" name="website" />
<input type="image" src="http://rawmoneycrew.com/2teso/img/auditbutton.jpg" id="auditb" alt="Submit" width="127" height="26">
</form>
</div>
</div>
</div>
</div>
<!-- SECOND ROW BELOW "View Our Services" -->
<div id="ROItext" >
<p id="biggerROI2" class=" ">Our Strategy = Positive ROI</p>
<!-- <p id="biggerROI" class="d-none d-sm-none d-md-block d-lg-block d-xl-block">Our Strategy = Positive ROI</p>
<p id="smallerROI" class="d-block d-sm-block d-md-none d-lg-none d-xl-none">Our Strategy = Positive ROI</p> -->
</div>
<!-- Our Strategy = Positive ROI Area Below-->
<div class="container-fluid" id="below_ROI">
<h2 class="centersme">SEO Time Line</h2>
<div class="monthsbox ">Month 1</div>
<div class="row">
<!--SIDE L M1 -->
<div class="col-md-6 col-lg-6 center-align-thingo">
<img src="http://rawmoneycrew.com/2teso/img/seoimac.png" class="img-fluid" alt="computer" />
</div>
<!--END SIDE L M1 -->
<!-- SIDE R M1 -->
<div class="col-md-6 col-lg-6 center-align-thingo">
<ul class="listy">
<li>In-depth site analysis</li>
<li>Competition analysis</li>
<li>Keyword research</li>
<li>On-page optimization: add meta titles, description, image alt tags, website reponsiveness, UX, etc.</li>
<li>Set up webmaster tools & submit the website & sitemap</li>
<li>Website speed analysis</li>
<li>Review social media accounts and connect with the website</li>
<li>Initial traffic & ranking report</li>
</ul>
<!--END SIDE R M1-->
</div>
</div>
<div class="monthsbox ">Month 2</div>
<div class="row">
<!-- SIDE L M2 -->
<div class="col-md-6 col-lg-6 center-align-thingo">
<ul class="listy">
<li>Inbound link analysis</li>
<li>Submission to national & local directories</li>
<li>Review online reviews</li>
<li>Prepare link building plan</li>
<li>Review indexing report & sitmap submission</li>
<li>Analyse Google Analytics report</li>
<li>Monthly progress report</li>
</ul>
</div>
<!--END SIDE L M2 -->
<!-- SIDE R M2 -->
<div class="col-md-6 col-lg-6 center-align-thingo">
<img src="http://rawmoneycrew.com/2teso/img/chart2.png" class="img-fluid" alt="chart2" />
</div>
<!-- END SIDE R M2 -->
</div>
<div class="monthsbox ">Month 3</div>
<div class="row">
<!-- SIDE L M3-->
<div class="col-md-6 col-lg-6 center-align-thingo">
<img src="http://rawmoneycrew.com/2teso/img/chart3.png" class="img-fluid" alt="chart3" />
</div>
<!--END SIDE L M3 -->
<!-- SIDE R M3-->
<div class="col-md-6 col-lg-6 center-align-thingo">
<ul class="listy">
<li>Review search engine crawling & indexing report</li>
<li>Verification of the sitemap</li>
<li>Link analysis & building</li>
<li>Social media review</li>
<li>Optimize any new website content</li>
<li>Monthly reporting</li>
</ul>
<!--END SIDE M3-->
</div>
</div>
<div class="monthsbox ">N<sup>th</sup> Month</div>
<div class="col-lg-12 center-align-thingo">
<ul class="listy">
<li>SEO consultation as needed</li>
<li>Ongoing review of crawling errors</li>
<li>SEO optimize new content</li>
<li>Link Building</li>
</ul>
<!--END SIDE M3-->
</div>
<div class="row">
<div class="col-md-5 center-align-thingo ">
<div id="formWrapper">
<div class="texty">Interested?</div>
<form method="post" action="#">
<input type="text" class="textfield" id="name" name="fname" placeholder="Name">
<input type="text" class="textfield" id="email" name="email" placeholder="E-Mail">
<input type="text" class="textfieldB" id="message" name="message" placeholder="Message">
<input type="submit" class="" id="submitB" name="submit" value="" />
</form>
</div>
</div>
<div class="col-md-7 center-align-thingo">
<p id="formtext">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”
</p>
</div>
</div>
</div>
<footer>
<img src="http://rawmoneycrew.com/2teso/img/twitter.jpg" class="img-fluid" alt="twitter"/>
<img src="http://rawmoneycrew.com/2teso/img/facebook.jpg" class="img-fluid" alt="facebook"/>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
function on() {
document.getElementById("firstoverlay").style.display = "block";
document.getElementById("firstoverlayv2").style.display = "block";
}
function off() {
document.getElementById("firstoverlay").style.display = "none";
document.getElementById("firstoverlayv2").style.display = "none";
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Here is the link: Link to the page
It looks fine on mobile Firefox, and Desktop internet browsers.
Mobile Samsung Internet 5.2.20-24:
It looks like this --
Why? How do I fix this?
It needs to behave like Firefox: