Project Showcase Idea

What is a project showcase idea How do you make a project showcase idea? This script and codes were developed by Jerusha Johnson on 26 December 2021, Sunday.

How do I make an project showcase idea?
  1. Project Showcase Idea Previews
  2. Project Showcase Idea HTML Codes
  3. Project Showcase Idea CSS Codes
  4. Project Showcase Idea JS Codes
Project Showcase Idea Previews

Project Showcase Idea HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Project Showcase Idea</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <section class="container-fluid">
  <article class="col-lg-2 col-md-2 col-sm-12 col-xs-12 title">
    <h1>UX<br/>Projects</h1>
    <ul class="list-unstyled shout-outs">
      <h3>Shout Outs</h3>
      <li class="btn">Matt Queen</li>
      <li class="btn">Jerusha Johnson</li>
      <li class="btn">Erin Gallup</li>
    </ul>
  </article>
  <article class="ux-projects"></article>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>

Project Showcase Idea CSS Codes

.title{
  position:fixed;
  top:10px;
  left:10px;
  color:#c1c1c1;
}
	.title h1{
  	font-weight:300;
    font-size:4em;
	}
.shout-outs{
  padding-top:40px;
}
.shout-outs h3{
  font-weight:300;
}
.btn{
  background:#c1c1c1;
  color:#fff;
}
.btn:hover{
  color:#cc00cc;
}
.tile{
  height:auto;
  margin-top:15px;
  margin-bottom:15px;

}
	.tile img{
  	border-top: 1px solid #c1c1c1;
	}
	.tile h5{
  	font-weight: 300;
  	letter-spacing:.05em;
  	text-align: center;
  	color:#8e8e8e;
	}

Project Showcase Idea JS Codes

var projects = (function() {
  var _projects = {
    projList: ['https://31.media.tumblr.com/6286deaf210b47a4c67cdbc4293b7093/tumblr_n7yhfyKJgf1st5lhmo1_1280.jpg','http://38.media.tumblr.com/ce044b7c552a59beeb778b38bc527a65/tumblr_n7yhe1sTa41st5lhmo1_1280.jpg','http://38.media.tumblr.com/09c8a485996628c6349e6afa376b2c42/tumblr_n7yh01HyPI1st5lhmo1_1280.jpg','http://33.media.tumblr.com/db092b1795916eb81a0a87f6d5473d0e/tumblr_n7yidlujvS1st5lhmo1_1280.jpg','http://37.media.tumblr.com/c93e3fc500d1ff310d7755fd13276a58/tumblr_n7yhiyUa3l1st5lhmo1_1280.jpg','https://31.media.tumblr.com/d851e225242e4d90baada35ba4d996f5/tumblr_n7yif13ZKl1st5lhmo1_1280.jpg','http://37.media.tumblr.com/26f1db79797aaf8577a32e288c5afefd/tumblr_n7yhhvUQtx1st5lhmo1_1280.jpg','http://38.media.tumblr.com/4e9d8c075b15f5922682bfaa13a8125c/tumblr_n7yhezarqF1st5lhmo1_1280.jpg','http://38.media.tumblr.com/c042979551e9563f9f824c6a64e3b677/tumblr_n7yhl9Zdm81st5lhmo1_1280.jpg','http://33.media.tumblr.com/5be6a52372f622728adb07566fc1e305/tumblr_n7fgokF2Ul1st5lhmo1_1280.jpg'],
    tile: function() {
      var $projImg = (_projects.projList[Math.floor(Math.random()*_projects.projList.length)]);
      var $tile = $('<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 tile"><img src="'+$projImg+'" class="img-responsive"/><h5>Project Name / Date Completed</h5></div>');
      
      return $tile;
    },
    container: function(n) {
      var $container = $('<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12 pull-right"></div>');
      for (i=0; i<n; i++){
        $container.append(_projects.tile());
      }
      return $container;
    }
  }
  
  return{
    showOff: function(num){
      return _projects.container(num);
    }
  }
})();

$('.ux-projects').append(projects.showOff(12));
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.