Test - faux mobile tweets mockup

In this example below you will see how to do a Test - faux mobile tweets mockup with some HTML / CSS and Javascript

Not finished! Just a test setup

Thumbnail
This awesome code was written by GraphicsGrove, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright GraphicsGrove ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Test - faux mobile tweets mockup</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="phone">
    <!-- label -->
    <div class="label">
      <p>Scroll or click to drag</p>
    </div>
  
    <div class="hide-scrollbars">
      
      <div class="dragscroll scrollarea">

       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            This is a line of text
          </p>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
      </div><!-- item -->
       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            This is a line of text
          </p>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
      </div><!-- item -->
       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            A longer line of text to switch it up and see what happens. 
          </p>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
      </div><!-- item -->
       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            This is a line of text
          </p>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
      </div><!-- item -->
       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            This is a line of text
          </p>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
      </div><!-- item -->
       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            This is a line of text
          </p>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
            </div><!-- item -->
       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            Hey check this out!
          </p>
          <div class="inline-img">
            <!--<a href="http://via.placeholder.com/500x350">-->
              <img src="http://via.placeholder.com/350x200" alt="" onclick="openModal();">
           <!-- </a>-->
          </div>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
      </div><!-- item -->
       <div class="item">
        <div class="img-holder">
          <img src="http://via.placeholder.com/50x50" alt="">
        </div>
        <div class="content-holder">
          <h5>Username <span>@handle ● 1m</span></h5>
          <p>
            This is a line of text
          </p>
          <div class="icons">
            <img src="http://via.placeholder.com/20x20" alt=""> <span>4</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>10</span>
            <img src="http://via.placeholder.com/20x20" alt=""> <span>54</span>
            <img src="http://via.placeholder.com/20x20" alt="">
          </div>
        </div>
            </div><!-- item -->
        
        <div id="myModal" class="modal">
          <span class="close cursor" onclick="closeModal()">close</span>
          <div class="slides">
            <img src="http://via.placeholder.com/500x350" alt="">
            <p>A little hidden lightbox for fun</p>
          </div>
        </div>
     
  </div><!-- // scrollarea-->
  </div> <!-- // hide-scrollbars -->  
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/GraphicsGrove/test-faux-mobile-tweets-mockup-OOKzgr */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.phone {
  font-family: "segoe ui", "helvetica neue", arial, sans-serif;
  font-size: 14px;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

/* scroll area*/
.hide-scrollbars {
  width: 345px;
  height: 550px;
  margin: 0 auto;
  overflow: hidden;
  border: 20px solid;
  border-radius: 10px;
}

.scrollarea {
  width: 320px;
  height: 510px;
  background-color: red;
  overflow-y: scroll;
}

/* item styling */
.item {
  display: flex;
  padding: 10px;
  height: auto;
  background-color: white;
  transition: all 0.5s ease-out;
  border-bottom: 1px solid #e6ecf0;
  align-items: flex-start;
}
.item .img-holder {
  min-width: 50px;
}

.img-holder img {
  border-radius: 50%;
}

.content-holder {
  margin-left: 10px;
}
.content-holder h5 {
  margin: 0 0 2px 0;
  background-color: black;
}
.content-holder h5 span {
  font-weight: normal;
}
.content-holder p {
  background-color: black;
  display: inline;
  transition: all 0.5s ease-out;
}
.content-holder .inline-img {
  margin-top: 5px;
  background: black;
}
.content-holder .inline-img img {
  cursor: pointer;
  opacity: 0;
  display: block;
}
.content-holder .icons {
  margin: 15px 0 0 0;
  display: flex;
}
.content-holder .icons img {
  padding-right: 5px;
}
.content-holder .icons span {
  padding-right: 10px;
}

/* hover effect */
.item:hover {
  background-color: #ebf0f4;
  transition: all 0.5s ease-out;
}
.item:hover h5 {
  background-color: transparent;
  transition: all 0.5s ease-out;
}
.item:hover p {
  background-color: transparent;
  transition: all 0.5s ease-out;
}
.item:hover .inline-img img {
  opacity: 1;
  transition: all 0.5s ease-out;
}

/* label */
.label {
  margin-top: 25px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: tomato;
  padding: 0 10px;
  font-weight: bold;
}

/* lightbox stuff*/
.modal {
  display: none;
  position: absolute;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.5);
}


/*Downloaded from https://www.codeseek.co/GraphicsGrove/test-faux-mobile-tweets-mockup-OOKzgr */
/**
 * @fileoverview dragscroll - scroll area by dragging
 * @version 0.0.8
 * 
 * @license MIT, see http://github.com/asvd/dragscroll
 * @copyright 2015 asvd <heliosframework@gmail.com> 
 */


(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports'], factory);
    } else if (typeof exports !== 'undefined') {
        factory(exports);
    } else {
        factory((root.dragscroll = {}));
    }
}(this, function (exports) {
    var _window = window;
    var _document = document;
    var mousemove = 'mousemove';
    var mouseup = 'mouseup';
    var mousedown = 'mousedown';
    var EventListener = 'EventListener';
    var addEventListener = 'add'+EventListener;
    var removeEventListener = 'remove'+EventListener;
    var newScrollX, newScrollY;

    var dragged = [];
    var reset = function(i, el) {
        for (i = 0; i < dragged.length;) {
            el = dragged[i++];
            el = el.container || el;
            el[removeEventListener](mousedown, el.md, 0);
            _window[removeEventListener](mouseup, el.mu, 0);
            _window[removeEventListener](mousemove, el.mm, 0);
        }

        // cloning into array since HTMLCollection is updated dynamically
        dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
        for (i = 0; i < dragged.length;) {
            (function(el, lastClientX, lastClientY, pushed, scroller, cont){
                (cont = el.container || el)[addEventListener](
                    mousedown,
                    cont.md = function(e) {
                        if (!el.hasAttribute('nochilddrag') ||
                            _document.elementFromPoint(
                                e.pageX, e.pageY
                            ) == cont
                        ) {
                            pushed = 1;
                            lastClientX = e.clientX;
                            lastClientY = e.clientY;

                            e.preventDefault();
                        }
                    }, 0
                );

                _window[addEventListener](
                    mouseup, cont.mu = function() {pushed = 0;}, 0
                );

                _window[addEventListener](
                    mousemove,
                    cont.mm = function(e) {
                        if (pushed) {
                            (scroller = el.scroller||el).scrollLeft -=
                                newScrollX = (- lastClientX + (lastClientX=e.clientX));
                            scroller.scrollTop -=
                                newScrollY = (- lastClientY + (lastClientY=e.clientY));
                            if (el == _document.body) {
                                (scroller = _document.documentElement).scrollLeft -= newScrollX;
                                scroller.scrollTop -= newScrollY;
                            }
                        }
                    }, 0
                );
             })(dragged[i++]);
        }
    }

      
    if (_document.readyState == 'complete') {
        reset();
    } else {
        _window[addEventListener]('load', reset, 0);
    }

    exports.reset = reset;
}));


/* super simple lightbox */

// Open the Modal
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

// Close the Modal
function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

Comments