index.html

<html>
    <!--HEAD-->
    <head>
        <title>ReiMagination INK.</title>
        <link rel="stylesheet" href="styles.css" type="text/css" />
        
        <!-- FAVICON -->
        <link rel="apple-touch-icon" sizes="180x180" href="logo.png">
<link rel="icon" type="image/png" sizes="32x32" href="logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="logo.png">
<link rel="mask-icon" href="logo.png" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
        
        
       <!-- NEW NAVBAR-->
        <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Responsive Sticky Navbar</title>
      <link rel="stylesheet" href="styles.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
   
   
    <!--BODY-->
    <body>
        <div class="wrapper">
            
           
            <!--HEADER-->
        <header>
          <nav>

                        <div class="menu-icon">
                              <i class="fa fa-bars fa-2x"></i>
                        </div>

                        <div class="logo">

                            ReiMagination INK
                        </div>

                        <div class="menu">
                              <ul>
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="submitform.html">Submit</a></li>
                                    <li><a href="mylife.html">Contact</a></li>
                              </ul>
                        </div>
                  </nav>
        </header>
        
            <!--NAVBAR WRAP-->
            
            
            <!--SLIDING TEXT-->
            <div class="sliding-text">
              <marquee behavior="scroll" direction="right" scrollamount="10" >Are you bored of normal photos ?</marquee> 
                <marquee behavior="scroll" direction="left" scrollamount="10" >Ready for something new !</marquee>

            </div>
          
            <!--TEXT UNDER LOGO IMG-->
            <div class="background-image">
            <div class="container">
               <div class="content">
                 <h1>ReiMagination INK.</h1>
                   
                     
              
               </div>
            </div>
        </div>
        
        
        
        <!--EXAMPLE IMGS-->
          <div class="section-two">
              <ul class="example-photos">
                  <li>
                  <img class="example-image" src="images/image_04.png" />
                 <p>Before</p>
                  </li>
                   <li>
                  <img class="example-image" src="images/image_03.png" />
                 <p>After</p>
                  </li>
              </ul>
              <button class="insta-link">
                  <a href="https://www.instagram.com/_.mynamechar" class="show">Follow Her On Instagram</a>
             <a href="https://www.instagram.com/_.mynamechar" class="hide">Follow Her On Instagram</a>
              </button>
         </div>
       
        
         <div class="section-three">
           <ul class="example-photos">
                  <li>
                  <img class="example-image" src="images/image_01.png" />
                 <p>Before</p>
                  </li>
               <li>
                  <img class="example-image" src="images/image_02.png" />
                 <p>After</p>
                  </li>
              </ul>
              <button class="insta-link">
                  <a href="https://www.instagram.com/xkillerking" class="">Follow Him On Instagram</a>
              </button>
       
        
        
        <!-- this is what i learnt at the coded by kids place one add photos for people that want to know the process two make sure that you make things nice and sweet three make sur you add sliding text at the home page like a hook or something four make a note to users about the offer as a artist and tell the the way to submit is either making a submit for with an example of there work and there name or they can contact me on social media and show me there work (that is very important that they show there work) last but important make everyone understand why your doing this so they dont think your a creep but dont bore them with details and have fun doing it and WORK ON VIDEO seriously man jeez-->
        
        </div>
            
            
            
            <!-- Wrapper Ends Here -->
            </div>
    
    
      <!-- hello this website is to help you get a new style of your photos it is a non-profit website that allows you to impress your friends with a cool photo. 
        this is my way to show the world my skills in a way but i really enjoy drawling and with this i can share my love of art with everyone.
        i hope that with this website every one will be happy with the out put and will do with what they will with said photo.
        it will be a simple website introduction page reasuring people that there photos are safe and that i am total only doing this for them.
        also on the first page it will be examples of my work and how i work and how it is meant to look and show them the limits of my work -->
       
        <!--FOOTER-->
        <footer>
           <!--UCLA
            Kentucky University
            Villanova-->
            &copy; 2018 ReiMagination INK.
        </footer>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <script type="text/javascript">
          // Menu-toggle button

          $(document).ready(function() {
                $(".menu-icon").on("click", function() {
                      $("nav ul").toggleClass("showing");
                });
          });

          // Scrolling Effect

          $(window).on("scroll", function() {
                if($(window).scrollTop()) {
                      $('nav').addClass('black');
                }

                else {
                      $('nav').removeClass('black');
                }
          });
      </script>
    </body>
</html>