Scaled Agile Card Heights

Developer
Jerusha Johnson
Size
2,113 Kb
Views
18,216
  1. Scaled Agile Card Heights Previews
  2. Scaled Agile Card Heights HTML Codes
  3. Scaled Agile Card Heights CSS Codes

How do I make an scaled agile card heights?

What is a scaled agile card heights? How do you make a scaled agile card heights? This script and codes were developed by Jerusha Johnson on 22 October 2022, Saturday.

Scaled Agile Card Heights Previews
IQ Test

Scaled Agile Card Heights - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scaled Agile Card Heights</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card large"> <div class="content"> <div class="title">Improve perf time for OpenCard</div> <div class="assigned"> <div class="placeholder"></div> <div class="name">Jerusha Johnson</div> </div> <div class="status">In Progress</div> <div class="tag-row"> <div class="tag"> <span>Blueprint</span> </div> </div> </div>
</div>
<div class="card medium"> <div class="content"> <div class="title">Improve perf time for OpenCard</div> <div class="assigned"> <div class="placeholder"></div> <div class="name">Jerusha Johnson</div> </div> <div class="status">In Progress</div> <div class="tag-row"> <div class="tag"> <span>Blueprint</span> </div> </div> </div>
</div>
<div class="card small"> <div class="content"> <div class="title">Improve perf time for OpenCard</div> </div>
</div>
</body>
</html>

Scaled Agile Card Heights - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
.card{ position: relative; display: inline-block; vertical-align: top; width: 100%; background-color: #fff; border-left: solid 6px #009ccc; height:185px; margin-right:30px;
}
.large{ width:170px;
}
.medium{ width:110px;
}
.small{ width:70px;
}
.content{ height: 100%; position: relative; padding: 5px; border: solid 1px #ccc; border-left:none;
}
.title{ font-size: 14px; max-height: 64px; overflow: hidden; text-overflow: ellipsis; margin-bottom:20px;
}
.medium .title{ font-size: 13px;
}
.small .title{ font-size: 12px;
}
.assigned{ margin-bottom: 10px; height:30px;
}
.placeholder { width: 30px; height: 30px; background: #e8e8e8; display: inline-block;
}
.name { font-size: 12px; height: 12px; overflow: hidden; text-overflow: ellipsis; display: inline-block; padding-left: 2px; vertical-align: top; margin-top: 8px; width: calc(100% - 35px);
}
.medium .assigned{ margin-bottom: 15px; height:20px;
}
.medium .placeholder{ width: 20px; height: 20px;
}
.medium .name{ margin-top:4px;
}
.status{ font-size: 12px; position: relative; height: 14px; line-height: 14px; display: inline-block; margin-left: 15px;
}
.status:before { content: ''; height: 10px; width: 10px; background-color: #007acc; border-radius: 50%; position: absolute; right: 66px; top: 1px;
}
.tag-row{ height:25px; margin-top:5px;
}
.tag { height: 25px; padding: 2px 6px; background-color: #ff3399; display: inline-block; margin-top: 15px;
}
.tag span { font-size: 12px; color: #fff; line-height: 14px;
}
Scaled Agile Card Heights - Script Codes
Scaled Agile Card Heights - Script Codes
Home Page Home
Developer Jerusha Johnson
Username bonzaipenguin
Uploaded October 22, 2022
Rating 3
Size 2,113 Kb
Views 18,216
Do you need developer help for Scaled Agile Card Heights?

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!

Jerusha Johnson (bonzaipenguin) Script Codes
Name
Logo for Carla v2
Pile of Letters
Parallax Scroll 2.0
Logo Trial v2
Project Showcase Idea
Type Specimen
Mobile Calendar Test
X-axis and Y-axis Affixes
Objects
Wedding Announcement Idea
Create amazing sales emails 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!