PresentationPages
Profile
Profile
Copied
22Friends
10Photos
89Comments
Jenna Stones
Los Angeles, California
Solution Manager - Creative Tim Officer
University of Computer Science
An artist of considerable range, Jenna the name taken by Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. An artist of considerable range.
Show more<div class="w-full">
<nav class="absolute w-full z-50 flex flex-wrap items-center justify-between px-2 py-3 mb-3 lg:bg-transparent bg-white">
<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 lg:text-white text-blueGray-500" href="#/"><img class="rounded-full mr-2" style="width: 30px;"><span>Notus Design System PRO</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 lg:text-white text-blueGray-500"><i class="lg:text-blueGray-300 text-blueGray-500 far fa-file-alt text-lg leading-lg mr-2"></i> Docs</a></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 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 lg:text-white text-blueGray-800" 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>
<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 lg:text-white text-blueGray-500" href="https://www.facebook.com/CreativeTim" target="_blank"><i class="fab fa-facebook text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></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 lg:text-white text-blueGray-500" href="https://twitter.com/CreativeTim" target="_blank"><i class="fab fa-twitter text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></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 lg:text-white text-blueGray-500" href="https://github.com/creativetimofficial" target="_blank"><i class="fab fa-github text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Star on Github</span></a></li>
</ul>
</div>
</div>
</nav>
<section class="relative block h-500-px">
<div class="absolute top-0 w-full h-full bg-center bg-cover" style="background-image: url("https://images.unsplash.com/photo-1499336315816-097655dcfbda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2710&q=80");"><span class="w-full h-full absolute opacity-50 bg-black"></span></div>
<div class="w-full absolute top-auto bottom-0">
<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-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
</svg>
</div>
</div>
</section>
<section class="relative py-16 bg-blueGray-100">
<div class="container mx-auto px-4 -mt-64">
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg">
<div class="px-6">
<div class="flex flex-wrap justify-center">
<div class="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center">
<div class="relative"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/team-2-800x800.2f02b23c.jpg" class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"></div>
</div>
<div class="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
<div class="py-6 px-3 mt-32 sm:mt-0"><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-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">Connect</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-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">Message</button></div>
</div>
<div class="w-full lg:w-4/12 px-4 lg:order-1">
<div class="flex justify-center py-4 lg:pt-4 pt-8">
<div class="mr-4 p-3 text-center"><span class="text-xl font-bold block tracking-wide text-blueGray-700">22</span><span class="text-sm text-blueGray-500">Friends</span></div>
<div class="mr-4 p-3 text-center"><span class="text-xl font-bold block tracking-wide text-blueGray-700">10</span><span class="text-sm text-blueGray-500">Photos</span></div>
<div class="mr-4 p-3 text-center"><span class="text-xl font-bold block tracking-wide text-blueGray-700">89</span><span class="text-sm text-blueGray-500">Comments</span></div>
</div>
</div>
</div>
<div class="text-center mt-12">
<h3 class="text-4xl font-bold leading-tight mb-2 mb-0">Jenna Stones</h3>
<div class="text-sm leading-normal mt-0 mb-2 text-blueGray-500 font-bold uppercase"><i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-500"></i>Los Angeles, California</div>
<div class="mb-2 text-blueGray-700 mt-10">
<p class="mb-2 text-blueGray-700"><i class="fas fa-briefcase mr-2 text-lg text-blueGray-500"></i>Solution Manager - Creative Tim Officer</p>
<p class="mb-2 text-blueGray-700"><i class="fas fa-university mr-2 text-lg text-blueGray-500"></i>University of Computer Science</p>
</div>
</div>
<div class="mt-10 py-10 border-t border-blueGray-300 text-center">
<div class="flex flex-wrap justify-center">
<div class="w-full lg:w-9/12 px-4">
<p class="mb-4 text-lg leading-relaxed text-blueGray-800">An artist of considerable range, Jenna the name taken by Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. An artist of considerable range.</p>
<a href="javascript:;" class="font-normal text-lightBlue-500 hover:text-lightBlue-600">Show more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="-mt-20">
<footer>
<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-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
</svg>
</div>
<div class="relative bg-blueGray-100 pt-8 pb-6">
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<h4 class="text-xl mt-4 font-bold">Let's keep in touch!</h4>
<h5 class="mt-1 mb-2 text-blueGray-500">Find us on any of these platforms, we respond 1-2 business days.</h5>
<div class="mt-6 lg:mb-0 mb-6"><a href="https://twitter.com/CreativeTim/" target="_blank" class="bg-white text-twitter-regular shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button"><i class="fab fa-twitter"></i></a><a href="https://www.facebook.com/CreativeTim/" target="_blank" class="bg-white text-facebook-regular shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button"><i class="fab fa-facebook"></i></a><a href="https://dribbble.com/creativetim" target="_blank" class="bg-white text-dribbble-regular shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button"><i class="fab fa-dribbble"></i></a><a href="https://github.com/creativetimofficial" target="_blank" class="bg-white text-github-regular shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button"><i class="fab fa-github"></i></a></div>
</div>
<div class="w-full lg:w-6/12 px-4">
<div class="flex flex-wrap items-top mb-6">
<div class="w-full lg:w-4/12 px-4 ml-auto">
<span class="block uppercase text-xs font-bold mb-2">Useful Links</span>
<ul class="list-unstyled"><a href="https://www.creative-tim.com/presentation?npr-landing-1" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">About Us</a><a href="https://www.creative-tim.com/blog?npr-landing-1" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">Blog</a><a href="https://github.com/creativetimofficial" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">Github</a><a href="https://www.creative-tim.com/templates/free?npr-landing-1" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">Free Products</a></ul>
</div>
<div class="w-full lg:w-4/12 px-4 ml-auto">
<span class="block uppercase text-xs font-bold mb-2">Other Resources</span>
<ul class="list-unstyled"><a href="https://www.creative-tim.com/license?npr-landing-1" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">License</a><a href="https://www.creative-tim.com/terms?npr-landing-1" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">Terms & Conditions</a><a href="https://www.creative-tim.com/privacy?npr-landing-1" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">Privacy Policy</a><a href="https://www.creative-tim.com/contact-us?npr-landing-1" target="_blank" class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm">Contact Us</a></ul>
</div>
</div>
</div>
</div>
<hr class="my-6 border-blueGray-200">
<div class="flex flex-wrap items-center md:justify-between justify-center">
<div class="w-full md:w-4/12 px-4 mx-auto text-center">
<div class="text-sm text-blueGray-500 py-1">Copyright © 2021 Notus Design System PRO by Creative Tim.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>