Profile Cards

Developer
Chris Evans
Size
4,913 Kb
Views
8,096
  1. Profile Cards Previews
  2. Profile Cards HTML Codes
  3. Profile Cards CSS Codes
  4. Profile Cards JS Codes

How do I make an profile cards?

What is a profile cards? How do you make a profile cards? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.

Profile Cards Previews
IQ Test

Profile Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Profile Cards</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> </head> <body> <header></header> <main><a class="button" href="javascript:;">View All Profiles</a> <div class="wrapper"> <div class="card"> <div class="card__date"> <h1>3<br/><small>Jul</small></h1> </div> <div class="card__summary"><strong>Introductory Profile</strong><br/><i class="material-icons">card_giftcard</i> by Sally Chambers</div> <div class="card__detail card__detail--hidden"> <p><i class="material-icons">lock</i><br/><strong>Who can see my profile?</strong></p> <ul class="list--tag"> <li>You</li> <li>Sally Chambers</li> <li>John Smith</li> <li>Edit</li> </ul> </div> <div class="card__action card__action--warning">Assessment Incomplete</div> </div> <div class="card"> <div class="card__date"> <h1>24<br/><small>Feb</small></h1> </div> <div class="card__summary"><strong>Expert Profile</strong><br/><i class="material-icons">card_giftcard</i> by John Smith</div> <div class="card__detail card__detail--hidden"> <p><i class="material-icons">lock</i><br/><strong>Who can see my profile?</strong></p> <ul class="list--tag"> <li>You</li> <li>John Smith</li> <li>Edit</li> </ul> </div> <div class="card__action card__action--complete">Your top realised strength is <strong>PRIDE</strong></div> </div> </div> </main> <footer></footer> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Profile Cards - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
html,
body { min-height: 100%;
}
body { background: #36D89D; font-family: 'Open Sans', sans-serif;
}
main { position: relative; margin: 64px auto; width: 414px; border: 2px solid #EFEFEF; border-top: none; border-bottom: none; padding: 32px; overflow: hidden;
}
.wrapper { width: 860px;
}
.card { float: left; cursor: pointer; display: flex; flex-flow: row wrap; box-sizing: border-box; position: relative; width: calc(50% - 32px); margin: 16px 16px 16px 0; overflow: hidden; background-color: #EFEFEF; box-shadow: 0 0 2px 2px rgba(175, 175, 175, 0.5);
}
.card__date { flex: 0 0 33%; padding: 16px; color: #888; text-align: center; line-height: 32px; position: relative; align-self: center;
}
.card__date:after, .card__date::after { content: ''; height: 66.666%; width: 1px; background: #dac6d3; position: absolute; right: 0; top: 50%; transform: translatey(-50%);
}
.card__summary { padding: 16px; flex: 1 0; text-align: center; align-self: center; color: #333;
}
.card__summary .material-icons { font-size: 1em;
}
.card__detail { box-sizing: border-box; padding: 0 16px 16px; flex: 1 1 100%; max-height: 250px; transition: max-height 500ms ease; overflow: hidden; text-align: center;
}
.card__detail--hidden { max-height: 0;
}
.card__action { position: relative; flex: 1 1 100%; padding: 24px; text-align: center; background-color: #007F9A; color: #EFEFEF; transition: background-color 250ms ease;
}
.card__action:before, .card__action::before { position: absolute; left: 32px; top: 50%; transform: translatey(-50%); font-family: 'Material Icons'; content: ''; font-size: 32px; color: #f8cc8f;
}
.card__action--complete { background-color: #1E9B52;
}
.card__action--complete:before, .card__action--complete::before { color: #8fcda9; content: 'explore';
}
.card__action--warning { background-color: #F1991F;
}
.card__action--warning:before, .card__action--warning::before { content: 'warning';
}
ul.list--tag, ol.list--tag { list-style: none; padding: 0; margin: 0; text-align: center;
}
ul.list--tag li, ol.list--tag li { display: inline-block; padding: 8px 16px; margin: 4px; background: #CCC; position: relative;
}
ul.list--tag li:last-child, ol.list--tag li:last-child { padding: 8px 16px; background-color: #007F9A; color: #FFF;
}
.button { display: table; padding: 8px 16px; background: #007F9A; color: #EFEFEF; text-decoration: none; font-weight: 700; box-shadow: 0 0 2px 0 rgba(112, 112, 112, 0.5); margin: 0 16px 0 auto;
}

Profile Cards - Script Codes JS Codes

$('.card:nth-child(1)').on('click', function($e) { var $element = $($e.target); if (!$element.is('.card')) $element = $element.closest('.card'); var $action = $element.find('.card__action'), $detail = $element.find('.card__detail'); $detail.toggleClass('card__detail--hidden'); $action.toggleClass('card__action--warning') if ($action.hasClass('card__action--warning')) $action.html('Assessment Incomplete'); else $action.html('Continue Assessment');
});
$('.card:nth-child(2)').on('click', function($e) { var $element = $($e.target); if (!$element.is('.card')) $element = $element.closest('.card'); var $action = $element.find('.card__action'), $detail = $element.find('.card__detail'); $detail.toggleClass('card__detail--hidden'); $action.toggleClass('card__action--complete') if ($action.hasClass('card__action--complete')) $action.html('Your top realised strength is <strong>PRIDE</strong>'); else $action.html('View Results');
})
window.setTimeout(function() { $('.card:nth-child(1)').click()
}, 1000);
window.setTimeout(function() { $('.card:nth-child(1)').click()
}, 3000);
window.setTimeout(function() { $('.wrapper').animate({ marginLeft: -414, easing: 'ease' }, 750);
}, 4000);
window.setTimeout(function() { $('.card:nth-child(2)').click()
}, 5000);
Profile Cards - Script Codes
Profile Cards - Script Codes
Home Page Home
Developer Chris Evans
Username anitorious
Uploaded December 27, 2022
Rating 3
Size 4,913 Kb
Views 8,096
Do you need developer help for Profile Cards?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Evans (anitorious) Script Codes
Name
A Forked Sky Full of Stars - Canvas Adaptation, Credit to JLNLJN
Single Field List Filter
Dashboard Module Management
Searching for Answers
Guidance Tooltip
Multiple Off-Canvas Asides
Animated Notification - Successful Action
Expanding Form
Natural Form Editing
Button with Progress Indicator
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!