aropsta

Latest comments

• 

  Sebastián León•100

  @lionns

  Submitted over 3 years ago

  

  Responsive card using CSS Grid & CSS Flexbox

  #accessibility

  3

  30
  

  aropsta•110

  @aropsta

  Posted over 3 years ago

  The purple color doesn't look as bright as the original design. You should use mix blend mode on your pseudo element like this

  .image::before {

  content: ''; position: absolute; inset: 0; background: var(--soft-violet); width: 100%; height: 100%; mix-blend-mode: multiply;

  }

  The rest of the code can be found here. I haven't done the mobile site though :-) https://github.com/aropsta/card_data-analytics-statistics

  1

  Marked as helpful
• 

  Erick F. Felix•265

  @efs0-cod3

  Submitted over 3 years ago

  

  responsive mobile first WD - all vanilla

  2

  10
  

  aropsta•110

  @aropsta

  Posted over 3 years ago

  The way I did it was to toggle on/off a class which changes the fill colour of my svg element, and the background of its container. This is the main code for it. The rest can be found at https://github.com/aropsta/article-preview-component-master

  To get an svg xml text you can just open it in notepad HTML

  <div class="contain"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"> <path class="share" fill="#6E8098" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg> </div>

  CSS

  .toggleChange { fill: white; background-color: var(--d-darkBlue); }

  JS

  const svgPath = document.getElementsByTagName('path')[0];

  const container = document.querySelector(".contain");

  container.addEventListener('click', toggleStyle);

  function toggleStyle(){

  svgPath.classList.toggle("toggleChange");

  container.classList.toggle("toggleChange");

  social.classList.toggle('make-visible'); }

  1

  Marked as helpful