Project 2 front-end developer

<header id="BACK TO TOP">
        <h1>Vikrant Kaushal</h1>
        <nav class="mobile-nav">
            <ul class="top-bar">
                <li><a href="#Home"     class="mobile-a">Home</a></li>
                <li><a href="#PORTFOLIO"class="mobile-a">PORTFOLIO</a></li>
                <li><a href="#CONTACT"  class="mobile-a">CONTACT</a></li>
            </ul>
        </nav>
        <nav class="desktop-nav">
            <ul>
                <li class="desktop"><a href="#Home">Home</a></li>
                <li class="desktop"><a href="#PORTFOLIO">PORTFOLIO</a></li>
                <li class="desktop"><a href="#CONTACT"  >CONTACT</a></li>
            </ul>
        </nav>
        <img src="images/vik1.jpg" class="pic-move" alt="image of Vikrant Kaushal">
        <p class="aboutMe">Hi, I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!
        </p>
    </header>
    <div>
        <div>    
            <h2 id="PORTFOLIO" class="top-space">PORTFOLIO</h2>
            <img src="images/portfolio-1.png" alt="Marketing Page">
            <h3>Marketing Page</h3>
            <p class="projects">This Project shows the front page of a marketing website meant for a spevific bussiness I'm interested in.</p>
        </div>
        <div>
            <img src="images/portfolio-2.png" alt="Search Page">
            <h3>Search Page</h3>
            <p>This Project searches through a specifc database to find information that the user is trying to look up.</p>
        </div>
        <div>
            <img src="images/portfolio-3.png" alt="">
            <h3>Travel App</h3>
            <p class="projects">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aut odit sequi veniam corporis possimus pariatur adipisci iure illo.
            </p>
        </div>
        <div>
            <img src="images/portfolio-4.png" alt="">
            <h3>Map of Favorite Spots</h3>
            <p class="projects">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aut odit sequi veniam corporis possimus pariatur adipisci iure illo.
            </p>
        </div>
        <div>
            <img src="images/portfolio-5.png" alt="">
            <h3>Photo Gallery</h3>
            <p class="projects">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aut odit sequi veniam corporis possimus pariatur adipisci iure illo.
            </p>
        </div>
        <div>
            <img src="images/portfolio-6.png" alt="">
            <h3>Calculator</h3>
            <p class="projects">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aut odit sequi veniam corporis possimus pariatur adipisci iure illo.
            </p>
        </div>    
    </div>
    <div class="contact">
        <h2 id="CONTACT">CONTACT</h2>
        <p class="contact-spacing">If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!.</p>
        <p class="word-space">Phone <a href="#blank" class="contact-list">+1(555)555-5555</a></p>
        <p class="word-space">Email <a href="#blank" class="contact-list">email@yoursite.com</a></p>
    </div>
    <div class="line"></div>
    <footer>
        <p class="bottom-page left">Vikrant Kaushal</p>
        <p class="bottom-page right"><a href="#BACK TO TOP" class="top">BACK TO TOP</a></p>
        <nav>
            <p class="bottom-design">Vikrant Kaushal</p>
            <ul class="mobile-display">
                <li><a href="#Home"     >Home</a></li>
                <li><a href="#PORTFOLIO">PORTFOLIO</a></li>
                <li><a href="#CONTACT"  >CONTACT</a></li>
            </ul>
        </nav>
    </footer>

//CSS
*{
    box-sizing: border-box;
    text-align: center;
}
body{
    padding: 2%;
}
header{
    background-color: lightgray;
    padding-bottom: 1.5em;

}
h1{
    margin: 0px;
    padding-top: 20px;
}
.top-bar{
    margin: 40px 0px;
    padding: 0px;
}
.top-bar li{
    display: block;
    background-color: white;
    margin-bottom: 10px;
    padding: 7px;
}

.desktop-nav {
  display: none;
}

.desktop-nav ul {
  list-style: none;
}

.desktop-nav ul li {
  padding: 5px;
}

.desktop-nav ul li a {
  text-decoration: none;
}

img{
    max-width: 100%;
}
.mobile-a{
  display: block;  
  text-decoration: none;  
}
.top-space{
    padding: 40px;
}
.aboutMe{
    padding: 5px 0px 16px;
    margin: 14px;
}
.contact{
     padding: 27px 0px 19px;
}
.contact-list{
    display: inline-block;
}
.word-space{
    word-spacing: 15px;
}
.bottom-page{
    position: relative;
}
.left{
    position: absolute;
    left: 10px;
}
.right{
    position: absolute;
    right: 10px;
}
.contact-spacing{
    margin: 0px 15px;
}
.mobile-display li{
    display: none;
}
.line{
    border-top: solid 1px gray;
    margin-left: 15px;
    margin-right: 15px;
}
.bottom-design{
    display: none;
}
@media (min-width:320px){
.mobile-hide{
    display: none;
    }
}
@media (min-width:768px){
    .bottom-page{
        display: none;
    }
    .mobile-display{
        float: right;
        margin-right: 29px;
    }
    .mobile-display li{
        display: inline;
        padding-right: 27px;
    }
    .bottom-design{
        display: inline;
        float: left;
        clear: left;
        margin-left: 50px;
    }
    .line{
        border-top: solid 1px gray;
        margin-left: 48px;
        margin-right: 60px;
    }

/*     .top-bar,
    .top-bar li,
    .mobile-a{           
        display: none;
    } */

    .mobile-nav {
      display: none;
    }
    .desktop-nav {
      display: block;
    }

    .mobile-hide{
        list-style: none;
    }
    .mobile-hide li{
        display: inline;
    }
@media (min-width:1024px){
    body{

    }
}