pricing/intelligentweboldal

by Miklos Nagy

HTML

<div id="placeholder"></div>
<div class="ipricing">
 <input type="radio" name="boxes" id="box1">
 <input type="radio" name="boxes" id="box2">
 <input type="radio" name="boxes" id="box3">

   <ul>
   
   <li class="intellibox firstBox">
     <p class="alternate-text">Kezdő csomagunk amelyet ajánlunk.</p> 
     <p class="basic-text">Akkor lehetünk biztosak abban, hogy weboldalunk törekvő felkészüléssel lett szerkesztve, amikor jól láthatóak vagyunk az interneten keresztül a jövő modern megoldásokkal szemben is. Színsémák, betűtípusok, gyönyörű, pontos nyelvtani szavak és olyan minőségű tartalom, amely megbízható és kutatásokon alapul, köztudott és elismert információkra épül majd fel. </p> 
       <label for="box1">Kiválasztás</label> 
   </li>
   
      <li class="intellibox secondBox">
     <p class="alternate-text">Alternate 2 text</p> 
     <p class="basic-text"> Olyan betűtípusok használata, amelyek felülmúlják a szerintünk feltételezett legjobbakat is. Adott téma körül épülő megoldások, színek használata az ideálnak megfelelően, keresőeszközzel összhangba hozott mondatok és magas tartalmi minőséggel ellátott képek, olyan korhű megoldások, amelyekkel Ön vetélyen felülkerekedik másokkal szemben. </p> 
       <label for="box2">Kiválasztás</label> 
   </li>
   
      <li class="intellibox thirdBox">
     <p class="alternate-text">Alternate 3 text</p> 
     <p class="basic-text"> Lehetőségünket kihasználva arra törekszünk, hogy kiválasszuk a legjobbakat a jelenlegi szerkezeti egységeket figyelembe véve, majd ezeket összevetve, weboldal készítéssel foglalkozó kollégánk arra törekszik, hogy szakmabeli megoldásokkal, lehetőleg maradi megoldásokkal ellentétben, régi szavaktól mentesen, olyan kivitelezésszerű  és alkalmas technikával álljon elő, amelyekkel a legjobb helyeket célozhatjuk majd meg. </p> 
       <label for="box3">Kiválasztás</label> 
   </li>

  </ul>
</div>

<footer>
  <a href="https://intelligensweboldal.hu"...

SCSS

@import url('https://fonts.googleapis.com/css?family=Montserrat|Lora');
/*--------------- 
  Basic Settings 
  ---------------
 */
 
body{background:#B6BE9C;}
#placeholder{
  width:auto;
  height:7rem;
  padding-right:100px;
}

div.ipricing ul {
  padding:20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 20px;
}

div.ipricing li {
  background-color: #fff;
  border-radius: 25px;
  padding: 20px;
  min-height:300px;
  font-size: 14px;
  text-align:center;
  font-family: 'Lora', sans-serif;
  font-size:15px;
  color: #00000080;
  
   &:before{
    content:'';
    border-radius: 25px;
    background:#F3EFE5;
    background-image:url('data:image/svg+xml;utf8,<svg width="130" height="130" viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M54.0553 76.3749H76.9447C77.999 76.3749 78.8521 75.6482 78.8521 74.7499C78.8521 73.8517 77.999 73.1249 76.9447 73.1249H54.0553C53.0009 73.1249 52.1478 73.8517 52.1478 74.7499C52.1478 75.6482 53.0009 76.3749 54.0553 76.3749ZM52.1478 79.625C52.1478 78.7267 53.0009 77.9999 54.0553 77.9999H76.9447C77.999 77.9999 78.8521 78.7267 78.8521 79.625C78.8521 80.5232 77.999 81.25 76.9447 81.25H54.0553C53.0009 81.25 52.1478 80.5232 52.1478 79.625ZM55.9627 84.5C55.9627 83.6018 56.8158 82.875 57.8702 82.875H73.1298C74.1841 82.875 75.0372 83.6018 75.0372 84.5C75.0372 85.3982 74.1841 86.125 73.1298 86.125H57.8702C56.8158 86.125 55.9627 85.3982 55.9627 84.5ZM79.4817 71.1128C78.6993 70.513 78.636 69.4847 79.3439 68.8181C86.1169 62.4227 85.7294 52.7266 78.461 46.744C71.1925 40.7581 59.8037 40.7581 52.539 46.744C45.2705 52.7266 44.8831 62.4227 51.6561 68.8181C52.364 69.4846 52.3006 70.5129 51.5183 71.1128C50.736 71.7126 49.5288 71.6587 48.8247 70.9955C40.6658 63.2924 41.1316 51.6127 49.8864 44.4082C58.6376 37.1973 72.3549 37.1973 81.1135 44.4082C89.8685 51.6129 90.3341 63.2926 82.1753 70.9955C81.799 71.3509 81.2811 71.5317 80.7596 71.5317C80.305 71.5317 79.8469 71.3921 79.4817...

JavaScript

// No js required! Haha