
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0">
<title>My app - anbilarabi.com</title>
<style>
html,
body {
padding: 0px;
margin: 0px;
}
.main-wrapper {
background-image: url(./images/people.jpeg);
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
display: block;
width: 100vw;
height: 100vh;
clear: both;
position: relative;
margin: 0px !important;
float: left;
padding: 0px !important;
}
.main-wrapper::before {
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
background: #000000b3;
}
.logo-container {
width: 80%;
height: 100px;
/* background: #FF5722; */
margin: 10px auto auto;
position: relative;
}
body>div>div.logo-container>img {
width: 100%;
}
.middle-section {
display: block;
height: 120px;
/* background: #2196F3; */
margin-top: 50%;
width: 80%;
margin-left: auto;
margin-right: auto;
position: relative;
}
body>div>div.middle-section>h3 {
font-size: 72px;
text-align: center;
color: white;
font-weight: bold;
}
body>div>div.middle-section>h3 span {
font-weight: normal;
margin-right: 20px;
}
.footer {
position: fixed;
bottom: 50px;
display: block;
height: 320px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.footer-buttons {
position: relative;
display: block;
height: 120px;
/* background: #9C27B0; */
width: 80%;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
body>div>div.footer>div.footer-buttons>a {
display: block;
width: 100%;
font-size: 3.5em;
text-align: center;
text-decoration: none;
color: white;
background: #03A9F4;
padding: 15px;
padding-top: 20px;
padding-bottom: 20px;
border: 1px solid gray;
}
.footer-bottom {
position: relative;
display: block;
height: 120px;
/* background: #FFEB3B; */
width: 80%;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
body>div>div.footer>div.footer-bottom>p {
font-size: 3em;
text-align: center;
color: #fffffe;
padding: 10px;
}
body>div>div.footer>div.footer-bottom>p>a {
color: white;
font-style: italic;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
}
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/*
=============================================== 01. BASE STYLES (1140px) ===============================================
*/
.logo-container {
width: 300px;
height: 100px;
}
.footer-buttons{
width: 300px;
height: 60px;
}
.footer-bottom {
height: 60px;
}
body>div>div.footer>div.footer-bottom>p {
font-size: 1.2em;
text-align: center;
color: #fffffe;
padding: 10px;
}
body>div>div.footer>div.footer-buttons>a {
display: block;
width: 100%;
font-size: 1.5em;
height: 50px;
text-align: center;
text-decoration: none;
color: white;
background: #03A9F4;
padding: 10px;
padding-top: 8px;
padding-bottom: 8px;
border: 1px solid gray;
}
.footer {
position: fixed;
bottom: 0px;
display: block;
height: 320px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.middle-section {
display: block;
height: 120px;
margin-top: 80px;
width: 80%;
margin-left: auto;
margin-right: auto;
position: relative;
}
body>div>div.middle-section>h3 {
font-size: 42px;
text-align: center;
color: white;
font-weight: bold;
}
/*
=============================================== 01.5. #DESKTOP wide (1139+++px) ===============================================
*/
@media only screen and (min-width: 1139px) {
.AhmadNaser-Item {
/*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
}
}
/*
=============================================== 02. #DESKTOP (960px) ===============================================
*/
/* Note: Design for a width of 960px */
@media only screen and (min-width: 959px) and (max-width: 1140px) {
.AhmadNaser-Item {
/*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
}
}
/*
=============================================== 03. #Tablet (Portrait) ===============================================
*/
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.AhmadNaser-Item {
/*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
}
}
/*
=============================================== 04. #Mobile (Portrait) ===============================================
*/
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.logo-container {
width: 70%;
height: 80px;
}
body>div>div.middle-section>h3 {
font-size: 26px;
}
.footer {
position: fixed;
bottom: -130px;
}
body>div>div.footer>div.footer-buttons>a {
display: block;
width: 90%;
font-size: 1.2em;
height: 40px;
text-align: center;
text-decoration: none;
color: white;
background: #03A9F4;
padding: 10px;
padding-top: 8px;
padding-bottom: 8px;
border: 1px solid gray;
margin: 0 auto;
}
.footer-buttons {
width: 300px;
height: 60px;
position: relative;
top: 50px;
}
}
/*
=============================================== 05. #Mobile (Landscape) ===============================================
*/
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.AhmadNaser-Item {
/*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
}
}
</style>
</head>
<body>
<div class="main-wrapper ">
<div class="logo-container ">
<img src="https://hub.anbilarabi.com/assets/logo-oixdnb1f.png " />
</div>
<div class="middle-section ">
<h3><span>learn</span>Programming</h3>
</div>
<div class="footer ">
<div class="footer-buttons ">
<a href="# " class="main-button ">Get Started</a>
</div>
<div class="footer-bottom ">
<p>Have an account <a href="# " class=" ">Login</a></p>
</div>
</div>
</div>
<!-- /Main Layout-->
</body>
</html>