PresentationPages

About us

About Us

Copied
Design with us, speed your development...

We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation.
Fight hard
It's time to know

Go and show them how strong you are. Leave them with their jaws to the ground, and hit them so that they faint on the ropes. Since you've got talent, you have to wear a crown.
Social Conversation

We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.
More about us
Analyze Performance

Don't get your heart broken by people we love, even that we give them all we have. Then we lose family over time. As we live, our hearts turn colder.
Learn about our products
Measure Conversions

What else could rust the heart more over time? Blackgold. The time is now for it to be okay to be great. or being a bright color. For standing out.
Check our documentation
Our latest blogposts

Check the news for this month

I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves!
All the beautiful places

Research by Bang & Olufsen on city sounds and music

Spectrum Boats

Data Virtualization and Boats Startups

Flying on pandemic

New Challenges when you want to fly to new areas

Work from Home

How meetings and behaviour are changing

new arrival
Latest Blogpost

It's the same place where you do not have courage, there is no way you want it. It is possible that you will give, but it is more probable that you will recieve.
Miami Vice

The simplest visual description uses ordinary words to convey what the writer sees. First he or she must look at the subject – slowly, carefully, and repeatedly, if possible – to identify the parts that make the whole
by Martin Jay

Choose a plan for your next project

You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.
Standard

$25
per month
20GB File Storage
15 Users/project
4.000 Internal messages
Request a demo
Premium

$59
per month
50GB File Storage
100 Users
Premium Support
Request a demo
testimonials
They've been or not with you

It's your life, and there are a lot of people with you, but this doesn't mean that everything is ok, it can be anyhow. You stay with your friends and nothing matters anymore.
Lili Watson

Artist is a term applied to a person who engages in an activity deemed to be an art. An artist also may be defined unofficially as "a person should is one who expresses him- or herself through a medium".
Dedicated entrepreneur
Urban city exploration
Active on Facebook since 2015
<div class="w-full h-16 ct-docs-disable-nav-fixed">
  <nav class="w-full z-50 flex flex-wrap items-center justify-between px-2 py-3 mb-3 bg-blueGray-800 shadow-md">
    <div class="flex container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">
      <a class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase text-white" href="#/">
      <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/creative-tim/logo.png" class="rounded-full mr-2" style="width: 30px;"><span>Creative Tim</span></a>
      <button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 lg:hidden" type="button"><i class="fas fa-bars"></i></button>
      <div class="items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out hidden">
        <ul class="lg:items-center flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
          <li>
            <a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white">Elements</a>
          </li>
          <li>
            <a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white">Sections</a>
          </li>
          <li class="relative">
            <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-white" href="javascript:;">Demo Pages <i class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform "></i></a>
            <div class="hidden  z-50">
              <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in-out transform scale-95 opacity-0 absolute "><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 1</span>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 1</a>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 2</a>
                <span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 2</span>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 3</a>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 4</a>
                <span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 3</span>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 5</a>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 6</a>
                <span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 4</span>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 7</a>
                <a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 8</a>
              </div>
            </div>
          </li>
        </ul>
        <ul class="lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
          <li>
            <a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://www.facebook.com/CreativeTim" target="_blank">
            <i class="fab fa-facebook text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i>
            <span class="lg:hidden lg:ml-0 ml-2">Share on Facebook</span></a>
          </li>
          <li>
            <a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://www.instagram.com/creativetimofficial/" target="_blank">
            <i class="fab fa-instagram text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i>
            <span class="lg:hidden lg:ml-0 ml-2">Follow on Instagram</span></a>
          </li>
          <li>
            <a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://twitter.com/CreativeTim" target="_blank"><i class="fab fa-twitter text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i>
            <span class="lg:hidden lg:ml-0 ml-2">Tweet on Twitter</span></a>
          </li>
          <li>
            <a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out text-white" href="https://github.com/creativetimofficial" target="_blank">
            <i class="fab fa-github text-lg leading-lg opacity-75 hover:opacity-50 text-white"></i>
            <span class="lg:hidden lg:ml-0 ml-2">Star on Github</span> </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>


<div class="w-full">
  <div class="p-0 flex items-center overflow-hidden min-h-screen-75">
    <div class="container mx-auto px-4">
      <div class="items-center text-left flex flex-wrap -mx-4">
        <div class="px-4 relative w-full lg:w-6/12">
          <h1 class="text-4xl font-bold leading-tight">Design with us, speed your development...</h1>
          <p class="mt-4 mb-4 text-xl leading-relaxed text-blueGray-400">We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation.</p>
          <div class="flex flex-wrap -mx-4 mt-8">
            <div class="px-4 pr-2 relative w-full sm:w-8/12">
              <div class="mb-3 pt-0"><input placeholder="Your email here" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
            </div>
            <div class="px-4 pl-0 relative w-full sm:w-4/12"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Join us</button></div>
          </div>
        </div>
        <div class="px-4 relative w-full lg:w-6/12"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/example-17.76927438.svg" class="w-full lg:ml-12" alt="..."></div>
      </div>
    </div>
  </div>
</div>
<div class="w-full">
  <div class="py-12">
    <div class="flex flex-wrap -mx-4 justify-center">
      <div class="px-4 relative w-full text-center">
        <span class="text-pink-500 bg-pink-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded-full px-3">Fight hard</span>
        <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">It's time to know</h2>
        <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">Go and show them how strong you are. Leave them with their jaws to the ground, and hit them so that they faint on the ropes. Since you've got talent, you have to wear a crown.</p>
      </div>
    </div>
    <div class="items-center flex flex-wrap -mx-4">
      <div class="text-left px-4 relative w-full lg:w-4/12">
        <div class="text-lightBlue-500 border-lightBlue-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-cog text-1625"></i></div>
        <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Social Conversation</h6>
        <p class="mb-2 text-blueGray-400">We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
        <a class="text-lightBlue-500" href="javascript:;">More about us <i class="ml-1 fas fa-angle-right"></i></a>
      </div>
      <div class="text-left px-4 relative w-full lg:w-4/12">
        <div class="text-emerald-500 border-emerald-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-atom text-1625"></i></div>
        <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Analyze Performance</h6>
        <p class="mb-2 text-blueGray-400">Don't get your heart broken by people we love, even that we give them all we have. Then we lose family over time. As we live, our hearts turn colder.</p>
        <a class="text-lightBlue-500" href="javascript:;">Learn about our products <i class="ml-1 fas fa-angle-right"></i></a>
      </div>
      <div class="text-left px-4 relative w-full lg:w-4/12">
        <div class="text-orange-500 border-orange-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-globe-europe text-1625"></i></div>
        <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Measure Conversions</h6>
        <p class="mb-2 text-blueGray-400">What else could rust the heart more over time? Blackgold. The time is now for it to be okay to be great. or being a bright color. For standing out.</p>
        <a class="text-lightBlue-500" href="javascript:;">Check our documentation <i class="ml-1 fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
</div>

















<div class="px-4 py-5 flex-auto ct-docs-frame">
    <div class="relative flex flex-wrap justify-center ">
        <div class="w-full">
            <div class="py-12">
                <div class="mb-12 flex flex-wrap -mx-4 justify-center">
                    <div class="px-4 relative w-full lg:w-8/12 text-center">
                        <h6 class="mb-2 font-bold uppercase text-emerald-500">Our latest blogposts</h6>
                        <h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">Check the news for this month</h3>
                        <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves!</p>
                    </div>
                </div>
                <div class="items-center flex flex-wrap -mx-4">

                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/guitar-play.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">All the beautiful places</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Research by Bang &amp; Olufsen on city sounds and music</h5>
                                </div>
                            </a>
                        </div>
                    </div>



                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/thomas.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">Spectrum Boats</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Data Virtualization and Boats Startups</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/ashim.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">Flying on pandemic</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">New Challenges when you want to fly to new areas</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/dane.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">Work from Home</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">How meetings and behaviour are changing</h5>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


















<div class="w-full">
 <div class="py-12">
   <div class="flex flex-wrap -mx-4">
     <div class="mx-auto px-4 relative w-full lg:w-10/12">
       <div class="flex flex-wrap -mx-4 justify-start">
         <div class="px-4 relative w-full text-left">
           <span class="text-red-500 bg-red-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">new arrival</span>
           <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Latest Blogpost</h2>
           <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">It's the same place where you do not have courage, there is no way you want it. It is possible that you will give, but it is more probable that you will recieve.</p>
         </div>
       </div>
       <div class="overflow-hidden mb-12 rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded h-550-px transition-all duration-150 ease-in-out hover:transform hover:scale-110 group">
         <div class="absolute rounded-lg w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110" style="background-image: url('../../assets/img/sections/unsplashs.jpg'); backface-visibility: hidden;"></div>
         <div class="absolute rounded-lg w-full h-full bg-black opacity-50"></div>
         <div class="p-10 flex h-full items-end z-1">
           <div>
             <h1 class="text-4xl font-semibold mt-0 mb-2 text-white">Miami Vice</h1>
             <p class="text-white opacity-75 text-lg">The simplest visual description uses ordinary words to convey what the writer sees. First he or she must look at the subject – slowly, carefully, and repeatedly, if possible – to identify the parts that make the whole</p>
             <div class="py-4 mb-3 flex items-start">
               <a href="javascript:;" class="flex items-center">
                 <img src="../../assets/img/person-9.jpg" class="rounded-full mr-4" alt="..." style="max-width: 40px;">
                 <div class="flex-1">
                   <div class="justify-between items-center">
                     <h6 class="text-sm uppercase mb-2 mt-2 text-white font-semibold">by Martin Jay</h6>
                   </div>
                 </div>
               </a>
             </div>
             <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Read more...</button>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>

<div class="w-full">
  <div class="py-12 bg-blueGray-100">
    <div class="flex flex-wrap -mx-4">
      <div class="flex justify-center flex-col px-4 relative w-full md:w-4/12 ml-auto">
        <h2 class="text-3xl font-bold mt-0">Choose a plan for your next project</h2>
        <p class="mt-2 mb-10 text-lg leading-relaxed text-blueGray-400">You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.</p>
        <div><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Freelancer</button>
          <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Enterprise</button>
        </div>
      </div>
      <div class="mx-auto px-4 relative w-full md:w-7/12 w-full lg:w-7/12">
        <div class="block">
          <div class="block">
            <div class="flex flex-wrap -mx-4">
              <div class="px-4 relative w-full md:w-6/12">
                <div class="bg-white mb-6 text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 rounded-lg">
                  <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-200">
                    <h6 class="font-bold my-2">Standard</h6>
                  </div>
                  <div class="px-4 py-5 flex-auto">
                    <div class="text-5xl mt-0 mb-0 font-bold">$25</div>
                    <span> per month </span>
                    <ul class="mt-6 mb-0 list-none">
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> 20GB </b>File Storage
                      </li>
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> 15 </b>Users/project
                      </li>
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> 4.000 </b>Internal messages
                      </li>
                    </ul>
                  </div>
                  <div class="mt-4 py-6 bg-transparent bg-transparent rounded-b px-4 py-3 border-t border-blueGray-200">
                    <a href="javascript:;" class="text-lightBlue-500">Request a demo</a>
                  </div>
                </div>
              </div>
              <div class="px-4 relative w-full md:w-6/12">
                <div class="bg-white mb-6 text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 rounded-lg">
                  <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-200">
                    <h6 class="font-bold my-2">Premium</h6>
                  </div>
                  <div class="px-4 py-5 flex-auto">
                    <div class="text-5xl mt-0 mb-0 font-bold">$59</div>
                    <span> per month </span>
                    <ul class="mt-6 mb-0 list-none">
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> 50GB </b>File Storage
                      </li>
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> 100 </b>Users
                      </li>
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> Premium </b>Support
                      </li>
                    </ul>
                  </div>
                  <div class="mt-4 py-6 bg-transparent bg-transparent rounded-b px-4 py-3 border-t border-blueGray-200">
                    <a href="javascript:;" class="text-lightBlue-500">Request a demo</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="hidden">
            <div class="flex flex-wrap -mx-4">
              <div class="px-4 relative w-full md:w-6/12">
                <div class="bg-white mb-6 text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 rounded-lg">
                  <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-200">
                    <h6 class="font-bold my-2">Gold</h6>
                  </div>
                  <div class="px-4 py-5 flex-auto">
                    <div class="text-5xl mt-0 mb-0 font-bold">$100</div>
                    <span> per month </span>
                    <ul class="mt-6 mb-0 list-none">
                      <li class="py-1 text-blueGray-500"><b class="text-lightBlue-500"> 200GB </b>File Storage</li>
                      <li class="py-1 text-blueGray-500"><b class="text-lightBlue-500"> Unlimited </b>Users</li>
                      <li class="py-1 text-blueGray-500"><b class="text-lightBlue-500"> Premium </b>Support</li>
                    </ul>
                  </div>
                  <div class="mt-4 py-6 bg-transparent bg-transparent rounded-b px-4 py-3 border-t border-blueGray-200">
                    <a href="javascript:;" class="text-lightBlue-500">Request a demo</a>
                  </div>
                </div>
              </div>
              <div class="px-4 relative w-full md:w-6/12">
                <div class="bg-white mb-6 text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words w-full mb-6 rounded-lg">
                  <div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-200">
                    <h6 class="font-bold my-2">Platinum</h6>
                  </div>
                  <div class="px-4 py-5 flex-auto">
                    <div class="text-5xl mt-0 mb-0 font-bold">$135</div>
                    <span> per month </span>
                    <ul class="mt-6 mb-0 list-none">
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> 500GB </b>File Storage
                      </li>
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> Premium </b>Users
                      </li>
                      <li class="py-1 text-blueGray-500">
                        <b class="text-lightBlue-500"> No time </b>Tracking
                      </li>
                    </ul>
                  </div>
                  <div class="mt-4 py-6 bg-transparent bg-transparent rounded-b px-4 py-3 border-t border-blueGray-200">
                    <a href="javascript:;" class="text-lightBlue-500">Request a demo</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="pt-6">
    <div class="flex flex-wrap -mx-4 justify-center">
      <div class="px-4 relative w-full text-center">
        <span class="text-emerald-500 bg-emerald-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">testimonials</span>
        <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">They've been or not with you</h2>
        <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">It's your life, and there are a lot of people with you, but this doesn't mean that everything is ok, it can be anyhow. You stay with your friends and nothing matters anymore.</p>
      </div>
    </div>
  </div>
<div class="w-full">
  <div class="py-12">
    <div class="flex flex-wrap -mx-4">
      <div class="relative">
        <div class="relative w-full overflow-hidden">
          <div class="relative float-left w-full transform duration-500 transition-all ease-in-out block">
            <div class="container mx-auto px-4">
              <div class="flex flex-wrap -mx-4">
                <div class="px-12 py-12 px-4 relative w-full md:w-5/12 ml-auto">
                  <div class="p-6"><img class="w-full rounded-lg shadow-xl transform" src="https://demos.creative-tim.com/notus-pro-react/static/media/kareya-saleh.b94f8020.jpg" alt="..."></div>
                </div>
                <div class="pt-12 px-4 relative w-full md:w-5/12 mr-auto flex align-center items-center">
                  <div class="p-4 pt-6 md:p-0">
                    <h2 class="text-2xl font-bold mt-0 mb-2">Lili Watson</h2>
                    <p class="mt-3 text-lg leading-relaxed text-blueGray-500">Artist is a term applied to a person who engages in an activity deemed to be an art. An artist also may be defined unofficially as "a person should is one who expresses him- or herself through a medium".</p>
                    <ul class="mt-6 list-none">
                      <li class="py-2">
                        <div class="flex items-center">
                          <span class="inline-flex text-center rounded-full mr-3 items-center justify-center text-sm w-8 h-8 text-pink-500 bg-pink-200"><i class="fas fa-atom"></i></span>
                          <h6 class="text-md text-blueGray-500">Dedicated entrepreneur</h6>
                        </div>
                      </li>
                      <li class="py-2">
                        <div class="flex items-center">
                          <span class="inline-flex text-center rounded-full mr-3 items-center justify-center text-sm w-8 h-8 text-emerald-500 bg-emerald-200"><i class="fas fa-running"></i></span>
                          <h6 class="text-md text-blueGray-500">Urban city exploration</h6>
                        </div>
                      </li>
                      <li class="py-2">
                        <div class="flex items-center">
                          <span class="inline-flex text-center rounded-full mr-3 items-center justify-center text-sm w-8 h-8 text-lightBlue-500 bg-lightBlue-200"><i class="fab fa-facebook"></i></span>
                          <h6 class="text-md text-blueGray-500">Active on Facebook since 2015</h6>
                        </div>
                      </li>
                    </ul>
                    <div class="py-6 pl-12 text-left"><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fab fa-twitter"></i></a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fab fa-facebook"></i></a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-dribbble-regular border-dribbble-regular active:bg-dribbble-active active:border-dribbble-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fab fa-dribbble"></i></a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="relative w-full -mt-12"><a href="javascript:;" class="absolute z-1 top-0 bottom-0 flex items-center justify-center w-1/6 text-white text-center opacity-50 hover:opacity-100 transition-opacity duration-150 ease-linear left-0" style="left: 90%; width: 5%;"><i class="text-lightBlue-500 fas fa-chevron-left"></i><span class="sr-only">Previous</span></a><a href="javascript:;" class="absolute z-1 top-0 bottom-0 flex items-center justify-center w-1/6 text-white text-center opacity-50 hover:opacity-100 transition-opacity duration-150 ease-linear right-0" style="width: 5%;"><i class="text-lightBlue-500 fas fa-chevron-right"></i><span class="sr-only">Next</span></a></div>
    </div>
  </div>
</div>