L
ludger
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
Hallo,
bin leider totaler Anfänger, deshalb die ggf. die blöden Fragen entschuldigen.
Ich möchte gerne dieses Beispiel bei in mit einet html Seite einbinden.
Dafür habe ich die CSS Datei einfach in eine html Seite in dem tag <style> </style> eingebunden.
Was mir nicht klar ist, wie ich den .container einbinden muss. Kann mir dazu jemand einen Tipp geben?
Dank im voraus
bin leider totaler Anfänger, deshalb die ggf. die blöden Fragen entschuldigen.
Ich möchte gerne dieses Beispiel bei in mit einet html Seite einbinden.
Dafür habe ich die CSS Datei einfach in eine html Seite in dem tag <style> </style> eingebunden.
Was mir nicht klar ist, wie ich den .container einbinden muss. Kann mir dazu jemand einen Tipp geben?
Dank im voraus
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Mi, 10 Aug 2022 05:02:25 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
// for display
html,
body {
padding: 0px;
margin: 0px;
font-family: monospace;
height: 100%;
}
body {
display: flex;
}
.container {
background: #FFF;
width: 400px;
margin: auto;
}
h1 {
text-align: center;
color: #222;
}
// the chart
$color-red: #f22;
$color-blue: #56a;
$color-green: #2a5;
$color-label: #FFF;
$color-background: #222;
.chart {
position: relative;
padding: 1em;
background: $color-background;
border-radius: 5px;
font-size: 16px;
* { box-sizing: border-box; }
// the line
&:after {
content: '';
position: absolute;
left: 25%;
top: 7.5%;
transform: translateX(100%);
width: 4px;
background: #FFF;
height: 86%;
border-radius: 2px;
}
.part {
display: flex;
height: 3em;
> .label {
flex: 1;
flex-basis: 25%;
text-align: right;
padding-right: 1em;
margin: 0.5em 0;
height: 2em;
line-height: 2em;
color: $color-label;
font-weight: 600;
}
.bar {
flex: 3;
flex-basis: 75%;
position: relative;
margin: 0.5em 0;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 0 2px 2px 0;
animation: grow 0.5s;
}
// the colors!
&.red:after { background: $color-red; }
&.blue:after { background: $color-blue; }
&.green:after { background: $color-green; }
.label {
position: absolute;
top: 50%;
left: 0.5em;
transform: translateX(0%) translateY(-50%);
z-index: 1;
color: #FFF;
font-weight: 600;
}
}
@for $i from 1 through 100 {
&.percent-#{$i} .bar:after { width: $i * 1%; }
}
}
}
@keyframes grow {
from { width: 0; }
}
</style>
</head>
<body>
.container
h1 html chart
.chart
.part.percent-25
.label yes
.bar.red aw
.label 75%
.part.percent-25
.label no
.bar.blue aw
.label 25%
.part.percent-38
.label maybe
.bar.green aw
.label 38%
</body>
</html>