<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="hi">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="UTF-8">
<head>
<title>
TheRealFact
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
<link rel="stylesheet" type="text/css" href="<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<script>
</script>
<body>
<section class="top">
<div class="top-color">
<header class="header">
<ul class="navigation">
<li class="logo" ><a href="index.html"></i>TheRealFact</a></li>
<div class="nav">
<li><a href="about us.html">About Us</a></li>
<li><a href="#" >Contact</a>
</li>
<li><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Services
</a>
<div class="dropdown-menu">
<a href="H" class="dropdown-item">Workshop/training</a>
<a href="#" class="dropdown-item">Robotics Components</a>
<a href="#" class="dropdown-item">Project Asistance</a>
<a href="#" class="dropdown-item">Summer training Program</a>
<div class="dropdown-divider"></div></li>
<li><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Product</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Arduino boards</a>
<a href="#" class="dropdown-item">Microcontroller</a>
<a href="" class="dropdown-item">Modules</a>
<a href="#" class="dropdown-item">Sensors</a>
</div></li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABX0lEQVRIS9WV4TEEQRCFv4uAEIgAESADIiADRIIIkAERkAEZHBkQAfWpbjXW7Mxe1d4P/eeqdnree/26p2/BmmOxZnxaBFvAGXAA7IaQF+AJuAZep4gbI7gK8BaGORc9khqBKnfi4h0gkN8MKzkHToqK9lokQ4JU/hHWJPAQQyKt2gi7JK1GSaDny8hSleCbwGWQeSSotrxHNc+Rvz3Wk5Ig1dvAVHQK3AykCS6gv7dhV3nnV3pJkN6n+kw8Knog4D7wAPhdq6zCu9VelASfgdgbXW10RK3CaN5blaDWyMkEYxa1pjAtegMckj/Ra3LvHa3U5NqYTlFvzqQxNTFH1RE8LKan9tAe452MjqiXeqtCCwQoV4UL0PeR4ZliFNXsQXk4ZdlJ7KZ1b42S9GbeF50gCnBa7sNK34KrxPUxSjLHH06TZA4CKytJjqPKb8vnIkgS7dTCn5iToPpm/j/BFw/XUxlWaiIXAAAAAElFTkSuQmCC"/></button>
</form>
</div>
</ul>
</header>
</section>
<section class="middle">
<h1><i></i>Where to next?</h1>
<p>This is just somwe random wording that maes no sense, but its cool right. Makes it nicer and more organized so thats why I am doing this.This is just somwe random wording that maes no, but its cool right. </p>
<a href="#start" class="example">Get Started</a></br>
</div>
</section>
<section class="collage">
<img class="item" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F1.bp.blogspot.com%2F-WcRBRSqEiI4%2FVctbOw0CO5I%2FAAAAAAAABn4%2FRM6_fRQRNOE%2Fs1600%2Frc-drones-for-sale.jpg&f=1&nofb=1" alt="Example image">
<div>
</div>
</section>
<section class="bottom">
<div class="bottom-color">
<div class="bottom-content">
<!--Footer-->
<footer class="page-footer text-center font-small mt-4 wow fadeIn">
<!--Call to action-->
<div class="pt-4">
</a>
</div>
<!--/.Call to action-->
<hr class="my-4">
<!-- Social icons -->
<div class="pb-4">
<a href="#" target="_blank">
<i ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABZUlEQVRIS8WVTUoDQRCFvywFEW+g3kBvYE6g7sXEhYgIEk+g3iCYLEQXScgB9AbmBtEb6BFEcKs8qZZO2ZOZRJvUppnpqXr1Xv1MjcxWyxyfhQFsAw1A53oJyxdgBAzsnPg8xaAJ9OaU7hDox74eQBk/zhk8uNVjJh5A6JKmqr2ZjLvAhTlJKqnwbR5Aeq4VRJfjk91tWiJ63gIEcG934V0S4DMR/NkCCDw2gYixfNQIq9HlT+KeQQpgA1DwO+DAAorNMSCQcSKpygBBz1vgyAW6AU6Mha9bZYBzoA18AEsO4B1YAS6jAv+qbZlEVxZAwZYdgDpIuv8JIEjUBU4dQAc4Ax6AHXdXWSL5qQ3VetfAvhV5CLT+o8gCUAftRTMQklUHaerj9iytwbRBkxTxoGm4Uqa5EXhy0GZdFSmAqasi+7JTRlnXdaAsJgLSWbT8wrevtp4lr348E7awX2ZBg8z+OjuDL/74SRnfTb48AAAAAElFTkSuQmCC"/></i>
</a>
<a href="#" target="_blank">
<i ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABTElEQVRIS92V4TGEMRCGn6uAEnSAClABKkAF6IAK6IAO0IEOUAEqQAfmMclNvlySS8zcn9uZ+3PZ3Xf33d33m7Fim604P+sHsAl8d9B2BJwD+8AHcA9chzjfHmOOnCKddXhtgFwAN4V3Y3aAswD455IC+PgSOjgGngtJtoD3Brggb8BtLDIFkJ6vJDi2bVfR7O6hAfATaJszkFNk1XtZAvn0J9BuhZ4Y8hQonqfIO3BoVr7RMeiSi4O+Sh9aFP0H4zLwX+zAP0sUjQBJ4WQD8xm4JfK9PZI1+H4Cxk+sJBXOwSNyY0ZsgZ78DmKyU+BuJDNg9d7RggrUxM5DsYteO6gcZlNN5dOVO1mCMpGGnhnoY7t2IF0182rVJe+mailFDteAww5evFh9UxkphpVmYNWC2UVcVwXMAaay0VHHVE27Akad1u+TOcrAUv9fv6M4GaSJj2wAAAAASUVORK5CYII="/></i>
</a>
<a href="#" target="_blank">
<i ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA6UlEQVRIS+2V3REBMRSFv62ADuiADlABHdABHVCCDtABFaADOlDCqoA5JDPZHfbGsg9mdmfysJOT8+X+JEmo+Esq9qcGmBnOp6gPTIGmG13T4Sk4ON0F2AT/mRrIfB9paMkGHhJGsAWG1srI+R0wkjYEKMxepIElOwLKSAZwM1Yp7DXQstzd/GPzYQQWwGsXwAxoGKDSAPmqy5bAuADyNWDuInnHKA1QemSuKIq+jwEq8gpoRxT56jcQFvkEdCIWx0hetukvD5qui0m+TSu/KgQURGSf59iTfQZSN9S+/vKrHxy7of7/Tb4DbzUiGRUhFMMAAAAASUVORK5CYII="/></i>
</a>
<a href="#" target="_blank">
<i ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABiUlEQVRIS72VjTEEQRCF30WACBABIkAEiAARIAJEgAi4CMgAESADIqG+rWn1rs3+XdXqqqm73enp1/P6de9ME9ts4vgaAnAiaVfSdlnk9F7Wi6R5V5JdAIeSbiRt9NzyU9KFpKeaXxvAraSzkfRxBqAFqwEsEzyC3kk6d4QMAC2PIzPP7kdOVwaAz3U78SWJQvKeIh8MAMd3M/wcALXcW4BrSVcpIAVHQSs9QKeSHvBxAF4cl4PBJQEvi5LY3zefwECm7D0bKO9IeAGAzLaK01r5fRsg07jptwEQaycDhMNH4dspQ34cCkMM1GQvUcVz3KRhxykKgEB3AKih2GFIkT6BmteyR70QSENNxHaAGkUowgsadHiv1CgKFgYVmcwoNjeI/9RmtWRKEiynq1rkLFOCkZ0bQDQi/HdZVaYcyI3GszcaWUbmbQA05++A/PdRQVaTDru49jIgfyZp7oPMKc0EkA+/Gu9wTl+M+uB4INRFcVFOjBJ0Tt8ggGaotdmQb3KPIru3Jwf4AexlVRk6JE/kAAAAAElFTkSuQmCC"/></i>
</a>
<a href="#" target="_blank">
<i ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABbUlEQVRIS9WU4TEEQRBG30WACBABIkAEXASIABEgAyJABIjgyIAIEAEioF5Vt1pbs7tzV66K+XO7e9P9Tb/+ekbMeY3mnJ8/IbAI7AG7wFZU/AI8AhfAfR+FoQpMegko4nqI381G0lvgAHgvCfUJ7Edy486A81YS//fbAqDIeBqBFeA5ArZ7MIhsEvus4qot0lWBG+V+DXjSdeAmUG0A9iCXPRDZXfTph0aXgA1cA/L0ItiJSHGdNrLkYRRdra3gMzYuBfd893MbWQp8NMzwrTNUgTisJisysB2TiHRY2nhQQHccNnqQiNqcte9bZHMmjmoRGShTva2jfF4Ouzb5+3wSSbPaqia7ycSZPC0rKnugsM7Soh6miKfEszQrOXA20aHKyhRwPQX7qSc5xdIl8rcXYhHXawxWe8KrEeXGdNBxXA2lKju/DV12BuYMFJs4pFYr0NnE3xLou/B6NWoqsMk6aaZVIzBT4gz6/wJfNfhPGc824u8AAAAASUVORK5CYII="/></i>
</a>
<a href="#" target="_blank">
<i ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABl0lEQVRIS7WVgTEFUQxF768AFaACVIAKUAEqQAWoAB1QwacCVIAO6IAKmDOT7ORnsvvfmtnM7Ozum5d7k/uSvJkmttnE+GohOJR0IGnbHmJ6t+dF0sNQkEMEAN9I2liS5aekC0mP1b4+gitJlyPluzWiBbeK4D/gDnon6TwyZII9Sc+24UkSZCeSzmztw95b9kb/e9tzbGtHUa5MgJ7rtvHaCPhdlfSdJItrMWswNn1vJOBQ5wGE6Ii+xbKsp5bZQpmSqqcJ6L4kyrDFKOG3KriYAWC7QWucxlj0p092cI4EaLxiiK+SOPAxFgk67EjwG9AmIYgRkM3amPCtylyBL58AMYN8yLQ/3dliNBdjxa2rwL4y/bHzoPzoztwDDkQvUHk5kLJMcaJJSJMSJSovW7qannAigMmYquM7WidPriL+fVQARJk5SOxqB8uS+vpC/1TDzvUsp2MItRqKS4ed+zsJDUM2PtSiFJmgynLwRkMuZGD4Vc5OgOacTzlWWq5MiMiCbKIxSrjtypvMN7YQtPRB757JCf4AiSVWGfPUO+kAAAAASUVORK5CYII="/></i>
</a>
<a href="#" target="_blank">
<i ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABTElEQVRIS7WVgU3DMBBFXydgBMoEwATtCDABdAJgAugEtBMAEwAbMALdADaACUA/sq3DtX0OUk6yIiX2vfP5+2fGxDGbOD89gEtgAZyEoZrew3gBXltFtgBnwD0wd3b5AdwAgu1FDbABrka2T2sE+hMlwH+Sx6Rb4NoScoDa8tyo/DMksO24A27NmnPbrhygfh5WAN/hkDXHRg7Q96M4wQKklodG9U+A5sRYBnXpqWEj7cICHoGLBmANqFqF18pUjAVI28edgLwt+TLlOtVLC/hxZGl34AFS7h6Ad9vfwlnk9Q3r7OKagjzAF3CQZd9FW+k5ZA9Qam3xkD2ZjjmDFSBV7rlp66L1AnTbk0GOsYpeQNMqtKua2fUAXLOLYijdag+QW8mQy/vhaDfR/GqAksMm1XoS1ESpS2amCzUoo/KuaAQ9AMdB2p8nB/wCsmVJGU6bMtcAAAAASUVORK5CYII="/></i>
</a>
</div>
<a class="Login" href="file:///C:/Users/shivam%20srivastava/OneDrive/Desktop/Mr.%20project/Login_v14/login.html">Login</a>
<!-- Social icons -->
<!--Copyright-->
<div class="footer-copyright py-3">
© 2018 Copyright:
<a class="Copyright" href="www.therealfact.in" target="_blank"> therealfact.in </a>
</div>
<!--/.Copyright-->
</div>
</div>
<div
</section>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body, html {
height: 100%;
font-family: 'Pacifico', cursive;
}
.top{
background: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fksr-ugc.imgix.net%2Fassets%2F003%2F552%2F975%2Fa0ef4c89d6f65e20fb531d488adef7f9_original.gif%3Fw%3D680%26fit%3Dmax%26v%3D1428052342%26auto%3Dformat%26gif-q%3D50%26q%3D92%26s%3D622a33af1f98b2c003b3521ce4b05369&f=1&nofb=1");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: relative;
overflow:hidden;
}
.top-color{
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header{
font-family: 'Pacifico', cursive;
position: fixed;
width:100%;
opacity:.65;
}
ul.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
}
ul.navigation li{
float: left;
}
ul.navigation li a {
display: block;
color: black;
text-align: center;
padding: 13px 25px;
text-decoration: none;
}
ul.navigation li.logo{
float: right;
}
.logo{
font-size:30px;
font-family: 'Amatic SC', cursive;
}
.nav{
padding-top:5px;
}
.middle{
position: fixed;
top: 40%;
left: 10%;
font-family: 'Great Vibes', cursive;
}
.middle h1{
color: white;
font-size: 60px;
text-transform: uppercase;
padding-bottom: 20px;
opacity:.65;
letter-spacing:8px;
}
.middle p{
color: white;
font-size: 15px;
line-height: 1.5em;
width: 590px;
padding-bottom: 30px;
opacity:.65;
letter-spacing:.5px;
}
.example{
padding: 10px;
font-size: 17px;
border: none;
float: left;
background:none;
width: 200px;
color: rgba(0, 0, 0, 0.8);
background: lightblue;
cursor: pointer;
text-align:center;
}
a{
text-decoration: none;
}
.example:hover{
opacity:.85;
}
form.example button:hover {
background:lightgrey;
}
form.example::after {
content: "";
clear: both;
display: table;
}
.collage {
display: flex;
align-items: center;
}
.item {
padding: 0;
width: 100%;
}
.bottom{
background: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fs3.envato.com%2Ffiles%2F128053850%2F01_Theme.jpg&f=1&nofb=1");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
position: relative;
}
.bottom-color{
background-color: rgba(0, 0, 0, 0.7);
}
.bottom-content h2{
font-size: 30px;
text-align: center;
color: white;
padding: 40px 0 20px;
}
form{
text-align: center;
}
label{
color: white;
opacity: .75;
}
#location{
padding:10px 30px;
border-radius: 5px;
background: none;
opacity:.75;
}
.formcontent{
margin-right:5px;
display: inline-block;
text-align: left;
}
.bottom-content h2{
font-size:45px;
opacity:.75;
}
select{
color: white;
opacity: .75;
background: none;
border: 2px solid white;
padding: 10px 60px;
-moz-appearance: none;
-webkit-appearance: none;
border-radius: 5px;
}
.find{
color: white;
background: lightblue;
padding: 8px 30px;
margin-bottom:70px;
margin-left:2px;
}
input{
color: white;
}
@media screen and (max-width: 900px) {
.logo{
font-size:18px;
}
.nav{
padding:0;
font-size:15px;
}
header{
position: fixed;
width:100%;
font-family: 'Great Vibes', cursive;
}
.collage{
display: block;
padding-top: 5px;
align-items: center;
}
.top{
background-position:initial;
}
.middle{
color: black;
position: fixed;
font-family: 'Pacifico', cursive;
top: 200px;
left: 5px;
}
.middle h1{
font-size:30px;
padding-bottom:10px;
}
.middle p{
width:300px;
}
.example{
width:150px;
}
.bottom{
margin-bottom:20px;
}
}
jQuery:
$(document).ready(function(){
$("#left").mouseover(function(){
addClass('.red');
});
});
#myVideo {
position: fixed;
right: 0;
bottom: 0;}
.site-footer {
background-color: #838383;
text-align: center;
margin: 10px 0;
padding: 10px 0;
}
#social-wrapper {
text-align: center;
}
/*Social Media Icons*/
.social-wrapper {
text-align: center;
}
.social-wrapper ul li {
display: inline;
margin: 0 5px;
}
.twitter-icon,
.facebook-icon,
.instagram-icon,
.linkedin-icon,
.googleplus-icon,
.youtube-icon,
.foursquare-icon{
margin-top: .625em;
width: 40px;
height: 40px;
opacity: .6;
filter: alpha(opacity=60); /* For IE8 and earlier */
border-radius: 25px;
}
.twitter-icon:hover,
.facebook-icon:hover,
.instagram-icon:hover,
.linkedin-icon:hover,
.googleplus-icon:hover,
.youtube-icon:hover,
.foursquare-icon:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.footer-nav p {
text-align: center;
}.zoom {
padding: 50px;
transition: transform .2s;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.container{
float: right;
text-orientation: none;
margin-right: 15px;
display: block;
position: absolute;
}
.container a
{
width: 100%;
list-style: none;
float:left; width:150px; font-weight:bold;padding:0;float:none; padding:5px 0; font-weight:normal;bottom: 0;
}
.footer-copyright py-3{
color: black;
align-items: right;
justify-content: right;
}
