Simple card UI for professionals

HTML
<div class="card"> <div class="card-header"> <h3>Last works</h3> </div> <div class="card-content"> <div class="projects"> <div class="project"> <a href="#" target="_blank"> <img src="http://img0.gm.gtsstatic.com/wallpapers/0f7cf2c5a0915e035fbc5037e8e14214_large.jpeg" width="400px"> <div class="project-details"> <p>Project 1</p> </div> </a> </div> <div class="project"> <a href="#" target="_blank"> <img src="http://img1.gm.gtsstatic.com/une/slide747-w960.jpg" width="400px"> <div class="project-details"> <p>Project 2</p> </div> </a> </div> <div class="project"> <a href="#" target="_blank"> <img src="http://img0.gm.gtsstatic.com/une/slide744-w480.jpg" width="400px"> <div class="project-details"> <p>Project 3</p> </div> </a> </div> </div> </div> <div class="card-footer"> <div class="card-footer-content"> <div class="profile"> <div class="profile-group"> <div class="name">Cesar Nogueira</div> <div class="job">Software Developer</div> </div> </div> <div class="skills"> <div class="skills-group"> <div class="skill"> <img src="https://www.w3.org/html/logo/downloads/HTML5_Badge_512.png" width="50px" alt="" /> </div> <div class="skill"> <img src="http://cdn.designcrowd.com.s3.amazonaws.com/blog/2016/January/2016-web-design-trends/CSS3Logo_300.png" width="50px" alt="" /> </div> <div class="skill"> <img src="https://upload.wikimedia.org/wikipedia/fr/archive/b/b3/20090715101242!Jquery-logo.png" width="50px" alt="" /> </div> <div class="skill"> <img src="http://blog.octo.com/wp-content/uploads/2015/12/react-logo-1000-transparent.png" width="50px" alt="" /> </div> </div> </div> </div> </div> <div class="card-img"> <img src="http://cesarnogueira.me/images/profilepicCesar2.jpg" width="100px" alt="card-img" /> </div> <div class="canvas-container"> <canvas id="circles"></canvas> </div> </div>
SCSS
@import 'https://fonts.googleapis.com/css?family=Roboto'; $font-family: 'Roboto', sans-serif; *, *:before, *:after{ margin: 0; padding: 0; box-sizing: border-box; } html, body{ height: 100%; width: 100%; font-size: 16px; font-family: $font-family; } a{ color: inherit; text-decoration: none; } .card{ background: #2d2d2d; position: relative; height: 300px; width: 600px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5); -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5); } .card-header{ background: transparent; padding: 0 20px; width: 100%; height: 80px; line-height: 80px; h3{ color: #fff; font-size: 1.4rem; text-shadow: 1px 1px 0px rgba(0, 0, 0, .65); } } .card-content{ position: relative; height: 160px; width: 100%; } .projects{ background: transparent; width: 100%; height: 100%; } .project{ position: relative; display: block; float: left; height: 112px; width: 30%; margin-left: 1.6666%; margin-right: 1.6666%; overflow: hidden; img{ width: 100%; } &:hover .project-details{ top: 85%; opacity: 1; } .project-details{ background: rgba(0,0,0,.8); padding: 10px; opacity: 0; position: absolute; width: 100%; top: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: top .5s ease, opacity .3s ease; -moz-transition: top .5s ease, opacity .3s ease; transition: top .5s ease, opacity .3s ease; & p{ color: #fff; } } } .card-footer{ color: #fff; background: rgba(0,0,0,.65); position: absolute; height: 60px; width: 100%; bottom: 0; border-top: 2px solid rgba(0,0,0,.5); -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; overflow: hidden; } .profile{ width: 60%; float: left; .profile-group{ margin-left: 135px; } .name{ font-size: 1.8rem; text-shadow: 1px 1px 0px rgba(0,0,0,.5); text-transform: capitalize; } .job{ color: #a5a5a5; position: relative; margin-top: -5px; margin-left: 10px; font-size: 1rem; } } .skills{ width: 40%; float: right; padding: 10px; .skills-group{ float: right; } .skill{ width: 40px; height: 40px; float: left; margin-right: 2px; img{ width: 100%; } } } .card-img{ background: #f9f9f9; border: 2px solid #111; position: absolute; bottom: -25px; left: 25px; width: 100px; height: 100px; margin-right: 10px; float: left; -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); -o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); overflow: hidden; img{ width: 100%; } } .canvas-container{ position: absolute; top: 0; width: 600px; height: 300px; border-radius: 10px; overflow: hidden; z-index: -1; } #circles{ position:absolute; top: 0; left: 0; height: 300px; width: 600px; z-index: -1; }
JAVASCRIPT
//Create canvas and initialize context var canvas = document.getElementById("circles"); var ctx = canvas.getContext("2d"); //Set the dimensions of canvas equal to the dimensions of the card var W = canvas.width = 600; var H = canvas.height = 300; //Number of circles var circleNbr = 10; // Gradient - http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg; var bgColor1 = 'rgba(153, 83, 85, 1)'; var bgColor2 = 'rgba(52, 9, 80, 1)'; //Create an array of circles var circles = []; for(var i = 0; i < circleNbr; i++ ){ circles.push(new circle()); } //Function to create a circle function circle() { //Random Position this.x = Math.random()*W; this.y = Math.random()*H; //Random Velocities this.vx = 0.2 + Math.random()*0.5; this.vy = -this.vx; //Random Radius this.r = 3 + Math.random()*10; //Random opacity color this.color = "rgba(200, 116, 82,"+(Math.random()*(1 - .5) + .5).toFixed(1)+")"; } //Function to draw the gradient background with the circles function draw() { var grd = ctx.createLinearGradient(0, 0, W, H); grd.addColorStop(0, bgColor1); grd.addColorStop(1, bgColor2); //Fill the canvas with the gradient ctx.fillStyle = grd; ctx.fillRect(0, 0, W, H); //Fill the canvas with the circles for(var j = 0; j < circles.length; j++) { var c = circles[j]; //Draw the circle ctx.beginPath(); ctx.arc(c.x, c.y, c.r, Math.PI*2, false); ctx.fillStyle = c.color; ctx.fill(); //Velocity c.x -= c.vx; c.y += c.vy; //When the circles are out of the canvas if(c.x < -20) c.x = W+20; if(c.y < -20) c.y = H+20; } } setInterval(draw, 30);
Expand for more options Login