Welcome to Aleem Raja blog. Find articles, poem etc by Aleem Raja at aleemraja.com.
Showing posts with label Frontend. Show all posts
Showing posts with label Frontend. Show all posts
Create Cards in HTML and CSS
Cards can be used in profiling, Real time messaging, search, archiving & more. So, let us see how we can create a card in HTML and CSS.
We have to achieve something like this:
HTML and CSS:
<html lang="en">
<head>
<title>Slacker Card</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css"></link>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #222;
}
.card {
height: 475px;
width: 325px;
box-shadow: 0px 5px 15px 0px rgba(153,153,153,0.5);
border-radius: 4px;
}
.top {
height: 55%;
border-radius: 4px 4px 0px 0px;
border: 1px solid #ddd;
/* Setting a background image */
background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png");
padding: 0px 16px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.name {
padding-top: calc(475px * 0.40);
margin: 0px;
color: blue;
}
.status {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 4px;
border-radius: 5px;
background-color: #60D156;
}
.title {
margin-top: 8px;
color: blue;
}
.middle {
height: 5%;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 0px 16px;
}
.time {
color: #444;
font-size: 0.8em;
padding-top: 0.2em;
}
.bottom {
height: 40%;
border-radius: 0px 0px 4px 4px;
border: 1px solid #ddd;
padding: 8px 16px;
}
.profile-action {
display: block;
width: 100%;
height: 32px;
font-family: inherit;
font-size: 1em;
text-align: left;
border-radius: 4px;
border: 0px;
background-color: white;
cursor: pointer;
}
.profile-action:hover {
background-color: #00A5D2;
color: white;
}
</style>
</head>
<body>
<section>
<div class="card">
<div class="top">
<h3 class="name">
Aleem Raja <span class="status"></span></h3>
<div class="title">
Full Stack Developer</div>
</div>
<div class="middle">
<div class="time">
12:34 PM local time</div>
</div>
<div class="bottom">
<button class="profile-action">History</button>
<button class="profile-action">Account</button>
<button class="profile-action">Edit your profile</button>
<button class="profile-action">View your files</button>
<button class="profile-action">Logout</button>
</div>
</div>
</section>
</body>
</html>
We have to achieve something like this:
HTML and CSS:
<html lang="en">
<head>
<title>Slacker Card</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css"></link>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #222;
}
.card {
height: 475px;
width: 325px;
box-shadow: 0px 5px 15px 0px rgba(153,153,153,0.5);
border-radius: 4px;
}
.top {
height: 55%;
border-radius: 4px 4px 0px 0px;
border: 1px solid #ddd;
/* Setting a background image */
background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png");
padding: 0px 16px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.name {
padding-top: calc(475px * 0.40);
margin: 0px;
color: blue;
}
.status {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 4px;
border-radius: 5px;
background-color: #60D156;
}
.title {
margin-top: 8px;
color: blue;
}
.middle {
height: 5%;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 0px 16px;
}
.time {
color: #444;
font-size: 0.8em;
padding-top: 0.2em;
}
.bottom {
height: 40%;
border-radius: 0px 0px 4px 4px;
border: 1px solid #ddd;
padding: 8px 16px;
}
.profile-action {
display: block;
width: 100%;
height: 32px;
font-family: inherit;
font-size: 1em;
text-align: left;
border-radius: 4px;
border: 0px;
background-color: white;
cursor: pointer;
}
.profile-action:hover {
background-color: #00A5D2;
color: white;
}
</style>
</head>
<body>
<section>
<div class="card">
<div class="top">
<h3 class="name">
Aleem Raja <span class="status"></span></h3>
<div class="title">
Full Stack Developer</div>
</div>
<div class="middle">
<div class="time">
12:34 PM local time</div>
</div>
<div class="bottom">
<button class="profile-action">History</button>
<button class="profile-action">Account</button>
<button class="profile-action">Edit your profile</button>
<button class="profile-action">View your files</button>
<button class="profile-action">Logout</button>
</div>
</div>
</section>
</body>
</html>
Subscribe to:
Posts (Atom)