<div class= "w-full" >
<div class= "relative section min-h-screen-75 flex items-center bg-cover" style= "background-image: url('../../assets/img/sections/nathan-dumlao.jpg');" >
<div class= "absolute w-full h-full bg-black opacity-75" ></div>
<div class= "flex items-center justify-center container mx-auto px-4 h-full" >
<div class= "flex flex-wrap -mx-4" >
<div class= "text-center mx-auto px-4 relative w-full lg:w-7/12" >
<h1 class= "text-4xl font-bold leading-tight mt-0 mb-6 text-white" > A Place for Entrepreneurs to Share and Discover New Stories</h1>
<a href= "javascript:;" target= "_blank" 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-xs px-3 py-2 shadow hover:shadow-md rounded-md" ><i class= "fab fa-twitter" ></i></a><a href= "javascript:;" target= "_blank" 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-xs px-3 py-2 shadow hover:shadow-md rounded-md" ><i class= "fab fa-instagram" ></i></a>
</div>
</div>
</div>
<div class= "w-full absolute text-white bottom-0 z-1" >
<div class= "w-full pointer-events-none overflow-hidden h-70-px" style= "transform: translateZ(0px);" >
<svg class= "absolute bottom-0 overflow-hidden" xmlns= "http://www.w3.org/2000/svg" preserveAspectRatio= "none" version= "1.1" viewBox= "0 0 2560 100" x= "0" y= "0" >
<polygon class= "text-white fill-current" points= "2560 0 2560 100 0 100" ></polygon>
</svg>
</div>
</div>
</div>
</div>
<div class= "w-full" >
<section class= "relative py-12 section" >
<div class= "container mx-auto px-4" >
<div class= "flex flex-wrap -mx-4 justify-center" >
<div class= "px-4 relative w-full text-center" >
<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" > Our articles</span>
<h2 class= "text-4xl font-bold mt-3 mb-1 text-blueGray-700" > Because it's about motivating the doers</h2>
<p class= "mt-2 mb-4 text-xl leading-relaxed text-blueGray-400" > Am I some sort of a maniac? Probably, since I like to throw money at my car. I've already got 260 HP, all rivals look at me.</p>
</div>
</div>
<div class= "flex flex-wrap -mx-4" >
<div class= "px-4 relative w-full md:w-4/12" >
<div class= "bg-blueGray-800 text-white shadow-lg rounded-lg overflow-hidden relative flex flex-col min-w-0 w-full mb-6" >
<img alt= "..." src= "../../assets/img/illustrations/p7.svg" class= "w-full" style= "margin-top: -45%;" >
<div class= "px-4 py-5 flex-auto" >
<h4 class= "text-3xl mt-0 mb-2 my-4 font-bold" > Bussiness Case</h4>
<p class= "text-xl font-light" > Society has put up so many boundaries and limitations on what’s right and wrong that it’s almost impossible...</p>
<a href= "javascript:;" class= "font-semibold text-sm uppercase py-3 inline-block" > Read more</a>
</div>
</div>
</div>
<div class= "px-4 relative w-full md:w-4/12" >
<div class= "bg-blueGray-800 text-white shadow-lg rounded-lg overflow-hidden relative flex flex-col min-w-0 w-full mb-6" >
<img alt= "..." src= "../../assets/img/illustrations/p22.png" class= "w-full" style= "margin-top: -45%;" >
<div class= "px-4 py-5 flex-auto" >
<h4 class= "text-3xl mt-0 mb-2 my-4 font-bold" > Premium</h4>
<p class= "text-xl font-light" > Colors are good, before somebody tells you you shouldn’t like pink because that’s for girls.</p>
<a href= "javascript:;" class= "font-semibold text-sm uppercase py-3 inline-block" > Read more</a>
</div>
</div>
</div>
<div class= "px-4 relative w-full md:w-4/12" >
<div class= "bg-blueGray-800 text-white shadow-lg rounded-lg overflow-hidden relative flex flex-col min-w-0 w-full mb-6" >
<img alt= "..." src= "../../assets/img/illustrations/p7.svg" class= "w-full" style= "margin-top: -45%;" >
<div class= "px-4 py-5 flex-auto" >
<h4 class= "text-3xl mt-0 mb-2 my-4 font-bold" > Focus</h4>
<p class= "text-xl font-light" > Because it's about motivating the doers. Because I’m here to follow my dreams and inspire other people.</p>
<a href= "javascript:;" class= "font-semibold text-sm uppercase py-3 inline-block" > Read more</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class= "w-full" >
<div class= "py-12 blog-3" >
<div class= "container mx-auto px-4" >
<div class= "mb-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" >
<span class= "text-lightBlue-500 bg-lightBlue-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2" > Stories</span>
<h3 class= "text-3xl font-bold mt-3 mb-1 text-blueGray-700" > Before I go</h3>
<p class= "mt-2 mb-4 text-xl leading-relaxed text-blueGray-500" > We've got time, but we are only doing what they say and want. I do not want to live as I will never die, cause life's too short, and I do not want to drown myself, as others would like.</p>
</div>
</div>
</div>
<div class= "mb-12 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg" >
<div class= "items-center flex flex-wrap -mx-4" >
<div class= "px-4 relative w-full lg:w-4/12" ><img src= "https://demos.creative-tim.com/notus-pro-react/static/media/city-1.501c0bb7.jpg" class= "w-full rounded-lg rounded-r-none" alt= "..." ></div>
<div class= "px-4 relative w-full lg:w-8/12" >
<div class= "lg:pl-0 px-4 py-5 flex-auto" >
<h3 class= "text-3xl font-semibold text-blueGray-700 leading-tight" ><a href= "javascript:;" > Portofino one of the best for remote working</a></h3>
<p class= "mt-3 text-lg leading-relaxed text-blueGray-500" ><span class= "mr-2" > Finding temporary housing should be as easy as renting an Airbnb. That’s the idea behind Portofino, which raised $65 million to expand its pet sitting businesses. This come as the right move for the investment while the planet is moving on work from home...</span><a href= "javascript:;" class= "text-lightBlue-500" > Read More</a></p>
<div class= "mt-6" >
<a href= "javascript:;" class= "inline-flex items-center" >
<img src= "https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg" class= "rounded-full mr-4 w-12 h-12" alt= "..." >
<div class= "flex-1" >
<div class= "justify-between items-center" >
<h6 class= "text-md font-bold uppercase mt-0 mb-0 text-blueGray-500" > Laura Hanks</h6>
<small class= "text-sm text-blueGray-500 mt-0" > Published 4 days ago</small>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class= "mb-12 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg" >
<div class= "items-center flex flex-wrap -mx-4" >
<div class= "px-4 relative w-full lg:w-4/12" ><img src= "https://demos.creative-tim.com/notus-pro-react/static/media/team-3.c5d0c11c.jpg" class= "w-full rounded-lg rounded-r-none" alt= "..." ></div>
<div class= "px-4 relative w-full lg:w-8/12" >
<div class= "lg:pl-0 px-4 py-5 flex-auto" >
<h3 class= "text-3xl font-semibold text-blueGray-700 leading-tight" ><a href= "javascript:;" > MateLabs mixes learning with IFTTT</a></h3>
<p class= "mt-3 text-lg leading-relaxed text-blueGray-500" ><span class= "mr-2" > If you’ve ever wanted to train a machine learning model and integrate it with IFTTT, you now can with a new offering from MateLabs. MateVerse, a platform where novices can spin out machine...</span><a href= "javascript:;" class= "text-lightBlue-500" > Read More</a></p>
<div class= "mt-6" >
<a href= "javascript:;" class= "inline-flex items-center" >
<img src= "https://demos.creative-tim.com/notus-pro-react/static/media/michael.660d3e04.jpg" class= "rounded-full mr-4 w-12 h-12" alt= "..." >
<div class= "flex-1" >
<div class= "justify-between items-center" >
<h6 class= "text-md font-bold uppercase mt-0 mb-0 text-blueGray-500" > Paul Smith</h6>
<small class= "text-sm text-blueGray-500 mt-0" > Drawn on 23 April</small>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class= "mb-12 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg" >
<div class= "items-center flex flex-wrap -mx-4" >
<div class= "px-4 relative w-full lg:w-4/12" ><img src= "https://demos.creative-tim.com/notus-pro-react/static/media/team-4.639c2559.jpg" class= "w-full rounded-lg rounded-r-none" alt= "..." ></div>
<div class= "px-4 relative w-full lg:w-8/12" >
<div class= "lg:pl-0 px-4 py-5 flex-auto" >
<h3 class= "text-3xl font-semibold text-blueGray-700 leading-tight" ><a href= "javascript:;" > US venture investment ticks up in Q2</a></h3>
<p class= "mt-3 text-lg leading-relaxed text-blueGray-500" ><span class= "mr-2" > Venture investment in U.S. startups rose sequentially in the second quarter of 2017, boosted by large, late-stage financings and a few outsized early-stage rounds in tech and healthcare...</span><a href= "javascript:;" class= "text-lightBlue-500" > Read More</a></p>
<div class= "mt-6" >
<a href= "javascript:;" class= "inline-flex items-center" >
<img src= "https://demos.creative-tim.com/notus-pro-react/static/media/team-1.26905a67.jpg" class= "rounded-full mr-4 w-12 h-12" alt= "..." >
<div class= "flex-1" >
<div class= "justify-between items-center" >
<h6 class= "text-md font-bold uppercase mt-0 mb-0 text-blueGray-500" > Jasmine Tailor</h6>
<small class= "text-sm text-blueGray-500 mt-0" > Drawn on 23 April</small>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class= "w-full" >
<div class= "w-full px-4 mx-auto px-4" >
<div class= "py-12" >
<div class= "mb-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-indigo-500" > daytime</h6>
<h3 class= "text-3xl font-bold mt-3 mb-1 text-blueGray-700" > 8 days out of 7</h3>
<p class= "mt-2 mb-4 text-xl leading-relaxed text-blueGray-400" > Sleep is a luxury sometimes, but then you see who is just flow, and who is a rock. When the darkness of the night wants you, a lot of faces laugh at you, waiting for you to fail.</p>
</div>
</div>
</div>
<div class= "items-center flex flex-wrap -mx-4" >
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/athena.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > Stellar Partnership</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Climate Change in Beautiful Bali</h5>
</div>
</a>
</div>
</div>
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/thomas.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > Digital Currency</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Saving the World Starts With You</h5>
</div>
</a>
</div>
</div>
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/twk-tt.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > A Robot is Your Co-Worker</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Microcips and Software of the World</h5>
</div>
</a>
</div>
</div>
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/odin.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > Blockchain Explained</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Applications Companies</h5>
</div>
</a>
</div>
</div>
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/kit-suman.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > Sales Leads</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Best Places to Setup a Company</h5>
</div>
</a>
</div>
</div>
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/damian.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > AI at the Edge</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Research for the Images in Summer</h5>
</div>
</a>
</div>
</div>
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/victor-garcia.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > Features</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Fifty Three Files for Paper</h5>
</div>
</a>
</div>
</div>
<div class= "p-0 pl-0 pr-0 px-4 relative w-full lg:w-3/12" >
<div class= "h-530-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" >
<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" style= "background-image: url('../../assets/img/sections/dane.jpg'); backface-visibility: hidden;" ></div>
<div class= "absolute w-full h-full bg-black opacity-50" ></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" > News</h6>
<h5 class= "text-2xl font-bold leading-tight mt-0 mb-2 text-white" > Focus on Your Employees</h5>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<section class= "bg-blueGray-800" >
<div class= "container mx-auto px-4" >
<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" >
<span class= "text-blueGray-500 bg-blueGray-100 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2" > Endless story</span>
<h3 class= "text-3xl font-bold mt-3 mb-1 text-white" > Everything started in this neighborhood</h3>
<p class= "mt-2 mb-4 text-xl leading-relaxed text-white opacity-75" > We've got the same blood in our veins, and we'll be brothers until death will tear us apart, and this is cause nobody could ever separate us.</p>
</div>
</div>
<div class= "flex flex-wrap -mx-4" >
<div class= "px-4 relative w-full lg:w-4/12 w-full md:w-6/12" >
<div class= "shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6" >
<div class= "relative" >
<img alt= "..." class= "w-full flex-shrink-0 rounded-t-lg" src= "https://demos.creative-tim.com/notus-pro-react/static/media/team-6.c98b9ea7.jpg" >
<svg preserveAspectRatio= "none" xmlns= "http://www.w3.org/2000/svg" viewBox= "0 0 583 95" class= "block w-full absolute text-white svg-bg" style= "height: 95px; bottom: 0px;" >
<polygon points= "583,55 583,95 0,95" style= "fill: currentcolor;" ></polygon>
</svg>
</div>
<div class= "px-4 py-5 flex-auto" >
<h3 class= "text-2xl font-bold" > Sofie Allure</h3>
<p class= "text-sm mt-1 mb-5 text-blueGray-400 font-bold uppercase" > Managing Partner</p>
<div class= "block w-full" style= "overflow-x: auto;" >
<ul class= "list-none" >
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-lightBlue-500 bg-lightBlue-200" ><i class= "fab fa-facebook" ></i></span>
<h6 class= "text-md text-blueGray-500" > At Facebook since 2016</h6>
</div>
</li>
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-emerald-500 bg-emerald-200" ><i class= "fas fa-running" ></i></span>
<h6 class= "text-md text-blueGray-500" > Outdors lover</h6>
</div>
</li>
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-red-500 bg-red-200" ><i class= "fas fa-headset" ></i></span>
<h6 class= "text-md text-blueGray-500" > Super friendly support team</h6>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class= "px-4 relative w-full lg:w-4/12 w-full md:w-6/12" >
<div class= "shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6" >
<div class= "relative" >
<img alt= "..." class= "w-full flex-shrink-0 rounded-t-lg" src= "https://demos.creative-tim.com/notus-pro-react/static/media/team-5.22135691.jpg" >
<svg preserveAspectRatio= "none" xmlns= "http://www.w3.org/2000/svg" viewBox= "0 0 583 95" class= "block w-full absolute text-white svg-bg" style= "height: 95px; bottom: 0px;" >
<polygon points= "583,55 583,95 0,95" style= "fill: currentcolor;" ></polygon>
</svg>
</div>
<div class= "px-4 py-5 flex-auto" >
<h3 class= "text-2xl font-bold" > Dylan Wyatt</h3>
<p class= "text-sm mt-1 mb-5 text-blueGray-400 font-bold uppercase" > Team Lead</p>
<div class= "block w-full" style= "overflow-x: auto;" >
<ul class= "list-none" >
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-teal-500 bg-teal-200" ><i class= "fas fa-atom" ></i></span>
<h6 class= "text-md text-blueGray-500" > Dedicated entrepreneur</h6>
</div>
</li>
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-emerald-500 bg-emerald-200" ><i class= "fas fa-running" ></i></span>
<h6 class= "text-md text-blueGray-500" > Urban exploration</h6>
</div>
</li>
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-red-500 bg-red-200" ><i class= "fas fa-chart-bar" ></i></span>
<h6 class= "text-md text-blueGray-500" > Able to get good at everything</h6>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class= "px-4 relative w-full lg:w-4/12 w-full md:w-6/12" >
<div class= "shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6" >
<div class= "relative" >
<img alt= "..." class= "w-full flex-shrink-0 rounded-t-lg" src= "https://demos.creative-tim.com/notus-pro-react/static/media/atikh.55c7b772.jpg" >
<svg preserveAspectRatio= "none" xmlns= "http://www.w3.org/2000/svg" viewBox= "0 0 583 95" class= "block w-full absolute text-white svg-bg" style= "height: 95px; bottom: 0px;" >
<polygon points= "583,55 583,95 0,95" style= "fill: currentcolor;" ></polygon>
</svg>
</div>
<div class= "px-4 py-5 flex-auto" >
<h3 class= "text-2xl font-bold" > Mila Skylar</h3>
<p class= "text-sm mt-1 mb-5 text-blueGray-400 font-bold uppercase" > Content Creator</p>
<div class= "block w-full" style= "overflow-x: auto;" >
<ul class= "list-none" >
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-teal-500 bg-teal-200" ><i class= "fas fa-atom" ></i></span>
<h6 class= "text-md text-blueGray-500" > High quality publication</h6>
</div>
</li>
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-emerald-500 bg-emerald-200" ><i class= "fas fa-running" ></i></span>
<h6 class= "text-md text-blueGray-500" > Storytelling</h6>
</div>
</li>
<li class= "py-1" >
<div class= "flex items-center" >
<span class= "inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-red-500 bg-red-200" ><i class= "fas fa-chart-bar" ></i></span>
<h6 class= "text-md text-blueGray-500" > Master of words qualification</h6>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<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-blueGray-200" > It's 2021</h6>
<h3 class= "text-3xl font-bold mt-3 mb-1 text-white" > One, two and three of zeros</h3>
<p class= "mt-2 mb-4 text-xl leading-relaxed text-white opacity-75" > People are talking, they're talking a lot, but I hit the volume of my headphones. I've got a clear road ahead in my mind, I go through you, all those masked people.</p>
</div>
</div>
<div class= "container mx-auto px-4" >
<div class= "justify-between items-center flex flex-wrap -mx-4" >
<div class= "text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12" >
<a href= "javascript:;" class= "w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active" >
<i class= "my-4 text-2xl fab fa-twitter" ></i>
<h2 class= "text-5xl leading-normal font-bold lowercase mt-2" > twitter</h2>
<p><small class= "uppercase" > @creativetim</small></p>
</a>
</div>
<div class= "text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12" >
<a href= "javascript:;" class= "w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active" >
<i class= "my-4 text-2xl fab fa-facebook-f" ></i>
<h2 class= "text-5xl leading-normal font-bold lowercase mt-2" > facebook</h2>
<p><small class= "uppercase" > @creative-tim</small></p>
</a>
</div>
<div class= "text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12" >
<a href= "javascript:;" class= "w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-slack-regular border-slack-regular active:bg-slack-active active:border-slack-active" >
<i class= "my-4 text-2xl fab fa-slack" ></i>
<h2 class= "text-5xl leading-normal font-bold lowercase mt-2" > slack</h2>
<p><small class= "uppercase" > @creative-tim</small></p>
</a>
</div>
<div class= "text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12" >
<a href= "javascript:;" class= "w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-instagram-regular border-instagram-regular active:bg-instagram-active active:border-instagram-active" >
<i class= "my-4 text-2xl fab fa-instagram" ></i>
<h2 class= "text-5xl leading-normal font-bold lowercase mt-2" > instagram</h2>
<p><small class= "uppercase" > @creative-tim</small></p>
</a>
</div>
</div>
</div>
</div>
<div class= "py-12" >
<div class= "my-12 container mx-auto px-4" >
<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 text-lg font-bold uppercase text-blueGray-200" > Let's keep in contact</h6>
<h2 class= "text-4xl font-bold mt-0 mb-1 text-white" > Subscribe to our Newsletter</h2>
<p class= "mt-2 mb-4 text-xl leading-relaxed text-white opacity-75" > Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.</p>
</div>
</div>
<div class= "flex flex-wrap -mx-4" >
<div class= "mx-auto px-4 relative w-full lg:w-7/12 w-10/12" >
<div class= "relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg rounded-lg" >
<div class= "px-5 py-3 flex-auto" >
<form class= "my-0" >
<div class= "flex flex-wrap -mx-4" >
<div class= "px-4 relative w-full sm:w-8/12 pt-4" >
<div class= "relative flex w-full flex-wrap items-stretch mb-3" ><span class= "z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3" ><i class= "fa fa-envelope" ></i></span><input placeholder= "Email" 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 pl-10 " ></div>
</div>
<div class= "px-4 sm:pl-0 relative w-full sm:w-4/12 text-right pt-4" ><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 w-full text-center" > Subscribe</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>