Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<html lang="en">
<head>
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=5aa7e2883593720013618457&product=sticky-share-buttons"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="/css/asgn.css">
   
    <title>Joel Harrison Graphic Designer</title>
</head>
 
<body> 
    <h1 class="main">Joel Harrison Graphic design</h1>
    <nav>
   <ul>
<li><a href="/assignment/asigp2.html">About</a></li>
<li><a href="/digitalproject/portfoliod.html">Portfolio</a></li>
<li><a href="/digitalproject/contacts.html">Contact</a></li>
<li><a href="/assignment/blog.html">Blog</a></li>
</ul>  
  </nav>
<img src="https://i.imgur.com/QcNsgHn.png" alt="portfolio work of exhibition" class="workimg">
    
    <div class="wrap">
    <div class="flex-container">
    <div class="box"> 
     <h2>News Feed</h2>
      <p>The Graphics of Punk is actually part of a wider movement — Punk London, which is an entire year to celebrate the subversive culture of punk. Although the year-long celebration is coming to an end in January 2017, it’s still worth checking out this cool exhibition to get inspired by some of the most iconic graphic design work ever. You’ll see album artwork, posters, underground magazines and more.</p> 
      </div>
<div class="box">  
   <h2>Likes and Dislikes</h2>
    <p>“Augmented Reality (AR) came back big this year and will continue to grow as one of the major trends in 2018. The comeback didn’t happen just because of all the hype related to Apple introducing it’s own framework ARkit to create AR experiences: With over two billion people currently using some kind of smartphone, AR growth came as a natural extension to 2D content we interact with on our screens.</p> 
    </div>
    <div class="box">
    <h2>Industry</h2>
    <p>What to do When the Client Doesn’t Like the Work, It’s inevitable. Even if you’ve been a designer for years, you’ll encounter a client who isn’t satisfied with the work you deliver. It happens to everyone and, unfortunately, more than once. So it’s essential for the preservation of your reputation and your business to deal with it professionally.
      </p>
      </div>
        </div>
    </div>
<footer>
<a href="https://www.instagram.com/?hl=en">
  <img src="http://i63.tinypic.com/120rx38.jpg" alt="instagram" class="linkinsta">
</a>
<a href="https://en-gb.facebook.com/">
  <img src="http://i68.tinypic.com/3096asp.jpg" alt="Facebook" class="linkfacelinked">
</a>
<a href="https://uk.linkedin.com/">
  <img src="http://i66.tinypic.com/1zvs8eg.jpg" alt="LinkedIn" class="linkfacelinked">
</a>
 <img src="http://i64.tinypic.com/r1eq6w.jpg" class="footerimg" alt="Image and video hosting by TinyPic"><div class="footerpar"> Copyright &copy; 2018 Joel Harrison  All Rights Reserved </div>
</footer>
</body>
</html>

              
            
!

CSS

              
                /************Page no1 main page*************/

/************************header*****************************/

h1 {
    
    margin:0;
    padding:0;
    
}
.main {

    font-family: sans-serif;
    font-size:2.800em;
    padding-bottom: 20px;
    padding-top: 20px;
    margin: 0 auto;
    width:800px;
    text-align: center;
    font-weight:bold;
    
    
}

.alinkdecor {
    text-decoration: none;
    color: black;
}


/***************************************navigation bar***************************************

Idea of how a nav bar is made was taken from the w3school.com and from our module slides as well. However, the nav bar is custome made for this webpage. Using the HTML5 <nav> element to create it. */



nav ul {
    width: 800px;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: white;
    text-decoration: none;
    color: black;
    
}
nav li {
    display: inline-block;
    
}

nav li a {
    display: block;
    color: black;
    text-align:center;
    padding: 0 50px;
    text-decoration: none;
    font-size: 1.850em;
    font-family:sans-serif;
}


li a:hover {
    background-color: red;
}


.marknavtag {
    background-color:lightgrey;
    color: black;
    text-align:center;
    padding: 0 50px;
    text-decoration: none;
    font-size: 1.850em;
    font-family:sans-serif;   
    
}

@media screen and (max-width: 600px) {
 .main, img, ul {
        width: 100%;
        margin-top: 0;
        
    }
   
    
}
/********************** content image possitioning ************************/

.workimg { 
    display: block;
    padding-top: 50px;
    margin-bottom: 10px;
    width:1100px; height:620px;
    margin: 0 auto;
    
}

/*paragraph positioning* reference https://www.youtube.com/watch?v=ux4h6pejCSM&index=2&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG 

I used the Net Ninja CSS Tutorial to see how an example of a flex box is made using the container technic. The code below is NOT a copy of the code used in the tutorial. I have only used the tutorial to learn hwo paragraphs are usualy put in a container div and then positioned using CSS code. The Source youtube channel is used as a reference in other places as well.*/

.wrap {
    
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    
    
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    

}
.box {
    height: 400px;
    flex-basis: 300px;
    padding: 20px;
    width: 70%;
    margin: 0 auto;  
}


.box p {
     text-align: justify;
}

.box h2 {
    text-align: center;
}

/********************************footer*******************************/

footer {
    width:100%;
    text-align: right;
    background-color:white;
    border: 0;
    padding: 0;
    margin: 0;
    
}

.footerimg {
    width: 90px;
    height: 110px;
    float:right;
    padding: 0;
    margin-right: 100px;
    margin-bottom: 150px;
    margin-left: 10px;
   
    
}

.footerpar {
    
    float: right; 
    margin-left: 30px;
    margin-top: 40px;
    
   
   
}

.linkfacelinked {
    margin-top: 20px;
    width: 30px;
    height:30px;
    float: left;
    margin-right: 5px;
    padding: 0;
    
}

.linkinsta {
    margin-top: 20px;
    width: 35px;
    height:35px;
    float: left;
    margin-left: 100px;
    padding: 0;
    
}


/**************page No2 About****************/

.about {
    display: block;
    margin: 0 auto;
    width:82%;
    height:40%;
    text-align: center;
    margin-top: 20px;
    
}
.me {
    position: absolute;
    width: 100%;
    height:100%;
    top:270px;
    margin: 0 auto;
    text-align: center;
    font-family: sans-serif;
    font-size: 5.000em;
    color: white;
}
/*paragraph reference https://www.youtube.com/watch?v=W77geg_3B5o&index=7&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh Net Ninja Text Columns tutorial 

The tutorial provided the idea for trying to position the text in the paraghraps. just like in the reference in the first page I had only used the source to see an example of how a column-count is being used. The idea being positioning without floats. */

.cv{
   column-count:2;
    column-gap: 30px;
   text-align: justify;
    font-family: sans-serif;
    font-size: 0.938em;
    padding-top: 15px;
    
    
}
.cv p{
    padding-top: 20px;
    padding: 50px;
    margin: 0;
    
}
.cv h2{
    position: relative;
    text-align: center;
    font-size:1.250em;
    color: red;
    top:40px;
    left:52px;
}
.cv h3{
    position: relative;
    text-align:center;
    top:40px;
    padding-top: 40px;
   
    
    
}


/*************************adjusting titles and the paragraphs***************/
.inbriefparagh {
    position: relative;
    left:60px;
}
.adobeparagh {
    position: relative;
    right:60px;
}
.titlesparagh {
    position: relative;
    right:50px;
}
.brieftitle{
    position: relative;
    left:50px;
} 

/****************Blog page page No3***********/
img {
    width: 100%;
    height: auto;
    
}

.wrapper2 {
    
    
    width: 100%;
    max-width: 1200px;
    margin-bottom: 20px;
    
    
}


.flex-container2 {
    
    padding-top: 100px;
    margin: 0;
    display: flex;
    flex-flow: column;
    
    
}



.posts {
    display: flex;
    flex-flow: column;
    height:250px; 
    font-size: 0.900em;
    padding: 0;
    width: 300px;
    float: right;
    margin-top: 200px;
    text-decoration: none;  
    
}



.posts h2 {
   
    padding-left: 35px;
    font-family: monospace;
}

.posts a {
    text-decoration: none;
    color: black;
}

.liofposts {
    font-size: 1.300em;
    font-family: monospace;
    list-style-type: none;
}

.liofdates {
    font-size: 0.800em;
    list-style-type: none;
    
}







.box-blog {
    
    padding-left:30px;
    padding-top: 20px;
    width: 700px;
    height: 750px;  
    font-family:monospace;
    font-size: 1.100em;  
    text-align: justify;
    margin-bottom: 40px;
    margin: 0 auto;
    

}
 
.box-blog h2 {
    padding-top: 10px;
    text-align: center;
    margin: 0 auto;
}

.box-blog h5 {
    
margin: 0 auto;
text-align: center;
padding-bottom: 10px;
padding-top: 5px;
}


.box-blog p {
    
    
    
    padding-top: 0;
    padding-bottom: 0;
    

}

.box-blog a {
    
    
    
    padding-bottom:10px;
    border: 1px solid;
    text-transform: uppercase;
    font-size: 0.699em;
    letter-spacing: 2px;
    text-align: center;
    margin: 0 auto;
    padding: 10px;
    color: black;
    text-decoration: none;
}


.astyle{
    
    margin: 0 auto;
    text-align: center;
}
.box-blog a:hover {
    background-color: red;
    text-decoration: none;
    }

.blogimg {
  padding-right: 20px;
  width: 100%;
  padding-top:20px;
  height:400px;
  
    
  
}


.footerblog {
    width:100%;
    text-align: right;
    background-color:white;
    border-top-width:0px;
    border-bottom-width:0px;
    border-color: black;
    border-style: solid;
    border-left-width: 0px;
    border-right-width: 0px;
    padding-top: 140px;
}

 @media screen and (max-width: 600px) {
.box-blog {
        width: 100%;
        margin-top: 0;
        padding-left:30px;
        padding-top: 20px;
        width: 300px;
        height: 1100px;  
        font-family:monospace;
        font-size: 1.100em;  
        text-align: justify;
        margin-bottom: 50px;
        margin: 0 auto;
    }
     .posts {
         
         display: none;
         
  }
     .fb-like {   width: 100%;
         margin-top: 0;
     }

}



/*****************************full blog page styling*******************************/

.full {
    
    width: 100%;
    max-width: 1500px;
    padding-top: 50px;
    background-color:white;
    height: 2000px;
   
}
.blogside {
    
    
    margin-top:300px;
    width:300px;
    height:1900px;
    padding: 0;
    margin:0;
    float:right;
    margin-right: 180px;
    
}

.wow {
    
    margin-top:100px;
    width:300px;
    height:200px;
}

.twitter {
    
   width:300px;
   height:400px; 
   padding-bottom: 100px;
   padding-top: 70px;
}
.sidesocial {
    
    
    margin-top: 500px;
    width:300px;
    height:100px;
    text-transform: uppercase;
    font-family: monospace;
    font-size: 0.999em;
    letter-spacing: 2px;
    text-align: center;
    color: black;
    text-decoration: none;
    padding-bottom: 0;
}
.box-blogfull {
    
    
    padding-left:30px;
    padding-top: 20px;
    width: 700px;
    height: 1750px;  
    font-family:monospace;
    font-size: 1.000em;  
    text-align: justify;
    margin-bottom: 40px;
    float: left;
   

}
 
.box-blogfull h2 {
    text-align: left;
    font-size: 3.000em;
}

article h3 {
text-align: center;    
margin: 0 auto;
padding-bottom: 10px;
padding-top: 5px;
}
article h4 {
    
    padding-left: 70px;
    
    
}

.box-blogfull p {
    
    text-align: justify;
    padding: 80px;
    padding-top: 0;
    padding-bottom: 0;
}

.box-blogfull a {
    
    
    padding: 50px;
    padding-top: 0;
    margin-left: 360px;
    padding-bottom:10px;
    border: 1px solid;
    text-transform: uppercase;
    font-size: 0.699em;
    letter-spacing: 2px;
    text-align: center;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    margin: 0 auto;
}
.box-blogfull a:hover {
    background-color: red;
    text-decoration: none;
    }
article h3 {
    
    margin: 0 auto;
}

.fb-comments {
text-align: left;
padding-bottom: 400px;

}
/*.fb-like {
    text-align: center;
    margin: 0 auto;
    padding-top: 50px;
    align-content: center;
    padding-left: 300px;
}*/


@media screen and (max-width: 600px) {
.box-blogfull, .blogimg {
       
        width: 100%;
        margin-top: 0;
       
    }
    .footerblog {
        
        margin-top: 600px;
        
    }
    
    .fb-comments {
        width: 300px;
        margin-top:0;
    }
        
    
    
    .box-blogfull {
        
    
    height: 3250px;  
    font-family:monospace;
    font-size: 1.000em;  
    
    
    
   
        
    }
    .blogside {
         
         display: none;
         
     }

}
     
     
/****************Contacts page page No4***********/

.contact-container {
    padding-right: 210px;
}
form  {
    width: 50%;
    height:70%;
    background-color: white;
    font-family: monospace;
    padding-top:80px;
    margin: 0 auto;
    padding-left: 300px;
    padding-bottom: 100px;
    background-image: url("http://i67.tinypic.com/2natb9k.jpg");
    background-position: 180px;
    background-size: 80%;
    background-repeat: repeat-y;
    
}
form p {
    
    
margin-bottom: 20px; 
    
}



form textarea {
    width: 60%;
    height: auto;
    background-color: beige;
    border: 2px solid lightblue;
    resize: vertical;
}
form input[type="text"]    {
    
    width: 20%;
    height: auto;
    padding: 10px 10px 10px 50px;
    background-color: beige;
    border: 2px solid lightblue;
    resize: none;
    resize: vertical;
}


form input[type="submit"]{
    
    
    
    padding: 10px;
    border: 1px solid;
    text-transform: uppercase;
    font-size: 0.699em;
    letter-spacing: 2px;
    text-align: center;
    color: black;
    margin-left: 100px;
    margin-top: 10px;
    cursor: pointer;
}


input[type="submit"]:hover {
    background-color: red;
    text-decoration: none;
    }



@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
        float:left;
    }
    
}
/****************Portfolio page page No4***********/


/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */
/** /!!! core css Should not edit !!!/**/ 

.lSSlideOuter {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.lightSlider:before, .lightSlider:after {
    content: " ";
    display: table;
}
.lightSlider {
    overflow: hidden;
    margin: 0;
}
.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.lSSlideWrapper > .lightSlider:after {
    clear: both;
}
.lSSlideWrapper .lSSlide {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s;
    -webkit-transition-property: -webkit-transform,height;
    -moz-transition-property: -moz-transform,height;
    transition-property: transform,height;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade {
    position: relative;
}
.lSSlideWrapper .lSFade > * {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9;
    margin-right: 0;
    width: 100%;
}
.lSSlideWrapper.usingCss .lSFade > * {
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade > *.active {
    z-index: 10;
}
.lSSlideWrapper.usingCss .lSFade > *.active {
    opacity: 1;
}
/** /!!! End of core css Should not edit !!!/**/

/* Pager */
.lSSlideOuter .lSPager.lSpg {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
    background-color: #222222;
    border-radius: 30px;
    display: inline-block;
    height: 8px;
    overflow: hidden;
    text-indent: -999em;
    width: 8px;
    position: relative;
    z-index: 99;
    -webkit-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #428bca;
}
.lSSlideOuter .media {
    opacity: 0.8;
}
.lSSlideOuter .media.active {
    opacity: 1;
}
/* End of pager */

/** Gallery */
.lSSlideOuter .lSPager.lSGallery {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}
.lSSlideOuter .lSPager.lSGallery li {
    overflow: hidden;
    -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
    /*transition: border-radius 0.12s linear 0s 0.35s linear 0s;*/
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-radius: 5px;
}
.lSSlideOuter .lSPager.lSGallery img {
    display: block;
    height: auto;
    max-width: 100%;
}
.lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
    content: " ";
    display: table;
}
.lSSlideOuter .lSPager.lSGallery:after {
    clear: both;
}
/* End of Gallery*/

/* slider actions */
.lSAction > a {
    width: 320px;
    display: block;
    top: 60%;
    height: 320px;
    background-image: url('../img/controls.png');
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
    opacity: 1;
}
.lSAction > .lSPrev {
    background-position: 0 0;
    left: 10px;
}
.lSAction > .lSNext {
    background-position: -32px 0;
    right: 10px;
}
.lSAction > a.disabled {
    pointer-events: none;
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}


/* vertical */
.lSSlideOuter.vertical {
    position: relative;
}
.lSSlideOuter.vertical.noPager {
    padding-right: 0px !important;
}
.lSSlideOuter.vertical .lSGallery {
    position: absolute !important;
    right: 0;
    top: 0;
}
.lSSlideOuter.vertical .lightSlider > * {
    width: 100% !important;
    max-width: none !important;
}

/* vertical controlls */
.lSSlideOuter.vertical .lSAction > a {
    left: 50%;
    margin-left: -14px;
    margin-top: 0;
}
.lSSlideOuter.vertical .lSAction > .lSNext {
    background-position: 31px -31px;
    bottom: 10px;
    top: auto;
}
.lSSlideOuter.vertical .lSAction > .lSPrev {
    background-position: 0 -31px;
    bottom: auto;
    top: 10px;
}
/* vertical */


/* Rtl */
.lSSlideOuter.lSrtl {
    direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    padding-left: 0;
    list-style: none outside none;
}
.lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
    padding-right: 0;
}
.lSSlideOuter .lightSlider > *,  .lSSlideOuter .lSGallery li {
    float: left;
}
.lSSlideOuter.lSrtl .lightSlider > *,  .lSSlideOuter.lSrtl .lSGallery li {
    float: right !important;
}
/* Rtl */

@-webkit-keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@-webkit-keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
@keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
.lSSlideOuter .rightEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
.lSSlideOuter .leftEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .rightEnd {
    -webkit-animation: topEnd 0.3s;
    animation: topEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .leftEnd {
    -webkit-animation: bottomEnd 0.3s;
    animation: bottomEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .rightEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .leftEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
/*/  GRab cursor */
.lightSlider.lsGrab > * {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lightSlider.lsGrabbing > * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

.portfoot{
    
    position: relative;
    top:1000px;
}

.portfoliotext {
    position: relative;
    top: 750px;
    width:85%;
    left:80px;
    column-count:2;
    column-gap: 100px;
   text-align: justify;
    font-family: sans-serif;
    font-size: 0.938em;
    padding-top: 15px;
    padding-bottom: 0px;
    background-color: lightsteelblue;
    
    }


              
            
!

JS

              
                
              
            
!
999px

Console