title: How convert a Photoshop made logo into CSS properly?
body: <p>I am trying to convert a logo made into Photoshop in CSS.
  As i am no master of both, i've tried but greatly failed by using the Photoshop build in "copy css" function.</p>
  
  <p>I've tried to redo the CSS via my limited knowledge, but failed miserably.</p>
  
  <p><img src="https://i.imgur.com/P6lqAke.png" alt="logo">
  <img src="https://i.imgur.com/XRPruLL.png" alt="ps copy css output"></p>
  
  <pre><code>
  .Group_5 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: 47;
  }
  .Group_4 {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 1924px;
    height: 1084px;
    z-index: 46;
  }
  .Ellipse_3 {
    border-width: 6.25px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 50%;
    position: absolute;
    left: 1119px;
    top: 486px;
    width: 168.5px;
    height: 174.5px;
    z-index: 45;
  }
  .Ellipse_2 {
    border-width: 6.25px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 50%;
    position: absolute;
    left: 1122px;
    top: 505px;
    width: 139.5px;
    height: 139.5px;
    z-index: 44;
  }
  .Ellipse_1_copy {
    border-width: 6.25px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 50%;
    position: absolute;
    left: 1109px;
    top: 512px;
    width: 139.5px;
    height: 139.5px;
    z-index: 43;
  }
  .Ellipse_1 {
    border-width: 6.25px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 50%;
    position: absolute;
    left: 1091px;
    top: 492px;
    width: 176.5px;
    height: 176.5px;
    z-index: 42;
  }
  .Shape_26 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1358px;
    top: 409px;
    width: 10px;
    height: 7px;
    z-index: 41;
  }
  .Shape_25 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1347px;
    top: 409px;
    width: 18px;
    height: 17px;
    z-index: 40;
  }
  .Shape_24 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1394px;
    top: 409px;
    width: 11px;
    height: 7px;
    z-index: 39;
  }
  .Shape_23 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1385px;
    top: 408px;
    width: 21px;
    height: 20px;
    z-index: 38;
  }
  .Shape_22 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1386px;
    top: 430px;
    width: 20px;
    height: 20px;
    z-index: 37;
  }
  .Group_2 {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 1920px;
    height: 1080px;
    z-index: 36;
  }
  .Shape_16_copy_2 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1395px;
    top: 410px;
    width: 8px;
    height: 26px;
    z-index: 35;
  }
  .Shape_16_copy {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1384px;
    top: 419px;
    width: 8px;
    height: 25px;
    z-index: 34;
  }
  .Shape_16 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1346px;
    top: 419px;
    width: 8px;
    height: 25px;
    z-index: 33;
  }
  .Shape_15 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1346px;
    top: 439px;
    width: 46px;
    height: 8px;
    z-index: 32;
  }
  .Shape_19 {
    border-width: 4.167px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    position: absolute;
    left: 1357px;
    top: 407px;
    width: 37.666px;
    height: 0;
    z-index: 31;
  }
  .Shape_21_copy {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1344px;
    top: 407px;
    width: 19px;
    height: 18px;
    z-index: 30;
  }
  .Shape_21 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1383px;
    top: 407px;
    width: 20px;
    height: 18px;
    z-index: 29;
  }
  .Shape_20 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1395px;
    top: 409px;
    width: 8px;
    height: 7px;
    z-index: 28;
  }
  .Shape_18 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1346px;
    top: 417px;
    width: 46px;
    height: 8px;
    z-index: 27;
  }
  .Shape_17_copy {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1381px;
    top: 408px;
    width: 20px;
    height: 19px;
    z-index: 26;
  }
  .Shape_17 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1384px;
    top: 428px;
    width: 19px;
    height: 19px;
    z-index: 25;
  }
  .Group_1 {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 1920px;
    height: 1080px;
    z-index: 23;
  }
  .Rectangle_1 {
    border-width: 4.167px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    position: absolute;
    left: 1325px;
    top: 472px;
    width: 48.666px;
    height: 19.666px;
    z-index: 22;
  }
  .Shape_10 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1132px;
    top: 656px;
    width: 11px;
    height: 8px;
    z-index: 21;
  }
  .Shape_9 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1394px;
    top: 423px;
    width: 41px;
    height: 242px;
    z-index: 20;
  }
  .Shape_8 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1132px;
    top: 451px;
    width: 271px;
    height: 213px;
    z-index: 19;
  }
  .Shape_11 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1132px;
    top: 450px;
    width: 17px;
    height: 8px;
    z-index: 18;
  }
  .Shape_7 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1132px;
    top: 416px;
    width: 64px;
    height: 41px;
    z-index: 17;
  }
  .Shape_14 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1427px;
    top: 417px;
    width: 8px;
    height: 215px;
    z-index: 16;
  }
  .Shape_13 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1393px;
    top: 415px;
    width: 44px;
    height: 44px;
    z-index: 15;
  }
  .Shape_12 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 1144px;
    top: 416px;
    width: 302px;
    height: 42px;
    z-index: 14;
  }
  .Group_3 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: 11;
  }
  .Shape_3 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 577px;
    top: 684px;
    width: 710px;
    height: 12px;
    z-index: 10;
  }
  .Shape_2 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 571px;
    top: 301px;
    width: 137px;
    height: 403px;
    z-index: 9;
  }
  .I {
    font-size: 283.333px;
    font-family: "Kozuka Gothic Pr6N";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    text-align: center;
    -moz-transform: matrix( 1,0,0,0.76592618857706,0,0);
    -webkit-transform: matrix( 1,0,0,0.76592618857706,0,0);
    -ms-transform: matrix( 1,0,0,0.76592618857706,0,0);
    position: absolute;
    left: 1043.001px;
    top: 406px;
    z-index: 7;
  }
  .C_copy_2 {
    font-size: 283.333px;
    font-family: "Kozuka Gothic Pro";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    text-align: center;
    -moz-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
    -webkit-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
    -ms-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
    position: absolute;
    left: 869.507px;
    top: 406.5px;
    z-index: 6;
  }
  .C {
    font-size: 283.333px;
    font-family: "Kozuka Gothic Pro";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    text-align: center;
    -moz-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
    -webkit-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
    -ms-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
    position: absolute;
    left: 711.507px;
    top: 406.5px;
    z-index: 5;
  }
  .Shape_4 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 685px;
    top: 289px;
    width: 98px;
    height: 212px;
    z-index: 4;
  }
  .Shape_1 {
    background-color: rgb(1, 1, 1);
    position: absolute;
    left: 693px;
    top: 309px;
    width: 89px;
    height: 191px;
    z-index: 3;
  }
  </code></pre>
  
  <p>I might be just missplacing something, or the given CSS result is not working properly, as anything i do and/or try results into a blank page.</p>
  
  <p>I am not exactly sure how i could get this logo converted, as mentioned above i am no master in both.</p>
  
  <p>The logo is made of circiles/lines and the 2"C" texts.
  Some of the layers have masks on them for transparency (where they overlap)</p>
  
  <p>It's not the best made, as it was supposed to have the same thickness overall, but i would like a way to get into CSS form.</p>