A Pen by Daria

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Daria</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="choice">
    <div class="choice__wrapper bubbles">
        <div class="bubble expertise">Expertise</div>
        <div class="bubble scalabilty">Scalabilty</div>
        <div class="bubble cost">Cost</div>
        <div class="bubble proximity">Proximity</div>
        <div class="bubble credibility">Credibility</div>
        <div class="bubble knowledge">Knowledge</div>
        <div class="bubble security">Security</div>
    </div>
    <div class="choice__wrapper choice-blocks">
        <div class="choice__block">
            <h3>Expertise</h3>
            <div class="choice-description">
                <img src="{{ widget.expertise_icon.src }}">
            </div>
            <p>Amdaris developers are well versed in <b>.Net, C#, PHP, Java, Python, Xamarin, SQL Server, JavaScript</b> and more.</p>
            <button href="#" class="btn-find">Find out more</button>
        </div>
        <div class="choice__block">
            <h3>Scalabilty</h3>
            <div class="choice-description">
                <img src="{{ widget.scalability_icon.src }}">
            </div>
            <p>With over <b>150 highly skilled developers</b> we can give you the flexibility you need to scale up as and when you need.</p>
            <button href="#" class="btn-find">Find out more</button>
        </div>
        <div class="choice__block">
            <h3>Cost</h3>
            <div class="choice-description">
                <img src="{{ widget.cost_icon.src }}">
            </div>
            <p>Our delivery centres in Moldova & Romania are not only cost effective but consistently deliver on quality. <b>One highly trained developer is worth two sub optimal resources.</b></p>
            <button href="#" class="btn-find">Find out more</button>
        </div>
        <div class="choice__block">
            <h3>Proximity</h3>
            <div class="choice-description">
                <img src="{{ widget.proximity_icon.src }}">
            </div>
            <p>Amdaris: Our delivery centres are nearshore, meaning there’s only a <b>two hour time difference</b> which does not impact your ability to effectively communicate with your team</p>
            <button href="#" class="btn-find">Find out more</button>
        </div>
        <div class="choice__block">
            <h3>Credibility</h3>
            <div class="choice-description">
                <img src="{{ widget.microsoft_icon.src }}">
            </div>
            <p>A <b>10 year Microsoft Gold-Certified partner.</b> That means we adhere to the highest standards of Microsoft's widely-recognized partnership program</p>
            <button href="#" class="btn-find">Find out more</button>
        </div>
        <div class="choice__block">
            <h3>Knowledge</h3>
            <div class="choice-description">
                <img src="{{ widget.knowledge.src }}">
            </div>
            <p>With our experience in <b>Education & Research, Finance, Insurance & Real Estate, Legal, HR & Recruitment, Transport & Logistics, Telecoms & IoT</b> we can offer our experience and expertise to ensure a successful outcome.</p>
            <button href="#" class="btn-find">Find out more</button>
        </div>
        <div class="choice__block">
            <h3>Security</h3>
            <div class="choice-description">
                <img src="{{ widget.security_icon.src }}">
            </div>
            <p>AWe have an internationally recognised certification <b>ISO 9001 and 27001</b> and we are a <b>Microsoft Gold Partner</b>. Your data and that of your clients is <b>100% secure with us.</b></p>
            <button href="#" class="btn-find">Find out more</button>
        </div>
    </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/a-pen-by-daria-qYvxWx */
    body{
        margin: 0;
        padding: 0;
        font-family: SegoeWPSemiLight ;
        line-height:1.5;
        color:#424344;
    }
    *, *:before, *:after {box-sizing: border-box;}
    .choice {
        background-color:#fff;
    }
    .choice p {
        font-size:17px;
        color:#3b3c3d;
        line-height:1.7;
    }
    .choice h3 {
        font-size:30px;
        margin-bottom:50px;
    }
    .choice__wrapper {
        max-width:1600px;
        width:100%;
        margin:auto;
    }
    .choice-blocks {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }
    .choice__block {
        width: 470px;
        background-color:#fcfcfc;
        padding:40px 60px 80px;
        margin:40px auto ;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .choice__block.inactive {
        opacity:0.1 ;
    }
    .choice-description {
        margin-bottom: 60px;
    }
    .choice-description img {
        max-width:300px;
        height:auto;
    }
    .btn-find {
        background-color:#fff;
        font-size:20px;
        color:#087bee;
        padding:15px 90px;
        border:2px solid #087bee;
        margin-top:50px;
        transition: background-color .25s ease, color .25s ease;
    }
    .btn-find:hover {
        background-color:#087bee;
        color:#fff;
    }
    
    /* Bubbles */
    .bubbles {
        display:flex;
        justify-content:space-between;
    }
    .bubble {
        border-radius:50%;
        background-color:#1466ff;
        color:#fff;
        font-size:14px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .bubble.expertise {
        width:75px;
        height:75px;
    }
    .bubble.scalabilty {
        width:140px;
        height:140px;
    }
    .bubble.cost {
        width:110px;
        height:110px;
    }
    .bubble.proximity {
        width:95px;
        height:95px;
    }
    .bubble.credibility {
        width:140px;
        height:140px;
    }
    .bubble.knowledge {
        width:110px;
        height:110px;
    }
    .bubble.security {
        width:95px;
        height:95px;
    }

/*Downloaded from https://www.codeseek.co/DM_Daria/a-pen-by-daria-qYvxWx */
$( ".bubble" ).click(function() {
  $(this).css("transform", "scale(1.2)");
});

Comments