Auf Thema antworten

Beitrag

[QUOTE="ludger, post: 13061, member: 4433"]
Hallo,

bin leider totaler Anfänger, deshalb die ggf. die blöden Fragen entschuldigen.
Ich möchte gerne dieses [URL='https://codepen.io/sean_codes/pen/VNQVJE']Beispiel[/URL] 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

[CODE=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>
    
    
 
 <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>[/CODE]
[/QUOTE]

Authentifizierung