mirror of https://github.com/tad17/tad
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
18 KiB
HTML
164 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Design of the Week Template 6 - Pinegrow Web Editor</title>
|
|
<link href="tailwind_theme/tailwind.css" rel="stylesheet" type="text/css">
|
|
<script>/* Pinegrow Interactions, do not remove */ (function(){try{if(!document.documentElement.hasAttribute('data-pg-ia-disabled')) { window.pgia_small_mq=typeof pgia_small_mq=='string'?pgia_small_mq:'(max-width:767px)';window.pgia_large_mq=typeof pgia_large_mq=='string'?pgia_large_mq:'(min-width:768px)';var style = document.createElement('style');var pgcss='html:not(.pg-ia-no-preview) [data-pg-ia-hide=""] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show=""] {opacity:1;visibility:visible;display:block;}';if(document.documentElement.hasAttribute('data-pg-id') && document.documentElement.hasAttribute('data-pg-mobile')) {pgia_small_mq='(min-width:0)';pgia_large_mq='(min-width:99999px)'} pgcss+='@media ' + pgia_small_mq + '{ html:not(.pg-ia-no-preview) [data-pg-ia-hide="mobile"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="mobile"] {opacity:1;visibility:visible;display:block;}}';pgcss+='@media ' + pgia_large_mq + '{html:not(.pg-ia-no-preview) [data-pg-ia-hide="desktop"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="desktop"] {opacity:1;visibility:visible;display:block;}}';style.innerHTML=pgcss;document.querySelector('head').appendChild(style);}}catch(e){console&&console.log(e);}})()</script>
|
|
</head>
|
|
<body class="text-gray-500">
|
|
<header>
|
|
<div class="container mx-auto relative">
|
|
<nav class="flex flex-wrap items-center p-4"> <a href="#" class="font-bold font-serif hover:text-opacity-75 inline-flex items-center leading-none mr-auto text-secondary-500 text-xl uppercase"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="2em" xml:space="preserve" fill="currentColor" viewBox="0 0 24 24" height="2em" class="mr-2 text-primary-500">
|
|
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-14.243L7.757 12 12 16.243 16.243 12 12 7.757z"></path>
|
|
</svg><span><p>TAD</p></span> </a>
|
|
<button class="hover:bg-white hover:text-secondary-500 lg:hidden px-3 py-2 rounded text-secondary-500" data-name="nav-toggler" data-pg-ia='{"l":[{"name":"NabMenuToggler","trg":"click","a":{"l":[{"t":"^nav|[data-name=nav-menu]","l":[{"t":"set","p":0,"d":0,"l":{"class.remove":"hidden"}}]},{"t":"#gt# span:nth-of-type(1)","l":[{"t":"tween","p":0,"d":0.2,"l":{"rotationZ":45,"yPercent":300}}]},{"t":"#gt# span:nth-of-type(2)","l":[{"t":"tween","p":0,"d":0.2,"l":{"autoAlpha":0}}]},{"t":"#gt# span:nth-of-type(3)","l":[{"t":"tween","p":0,"d":0.2,"l":{"rotationZ":-45,"yPercent":-300}}]}]},"pdef":"true","trev":"true"}]}' data-pg-ia-apply="$nav [data-name=nav-toggler]"> <span class="block border-b-2 border-current my-1 w-6"></span> <span class="block border-b-2 border-current my-1 w-6"></span> <span class="block border-b-2 border-current my-1 w-6"></span>
|
|
</button>
|
|
<div class="lg:flex lg:space-x-4 lg:space-y-0 lg:w-auto space-y-2 w-full hidden lg:items-center" data-name="nav-menu">
|
|
<div class="flex flex-col lg:flex-row"> <a href="#" class="hover:text-opacity-75 lg:px-6 lg:py-4 py-2 text-black">Сервера</a><a href="#" class="hover:text-opacity-75 lg:px-6 lg:py-4 py-2 text-black">Сервисы</a><a href="#" class="hover:text-opacity-75 lg:px-6 lg:py-4 py-2 text-black">Программы</a>
|
|
</div><a href="#" class="bg-primary-500 hover:bg-primary-700 inline-block px-6 py-2 rounded text-white">Особые</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<section class="bg-secondary-500 text-white">
|
|
<div class="container mx-auto pb-24 pt-24 px-4 relative">
|
|
<div class="-mx-4 flex flex-wrap items-center space-y-6 lg:space-y-0">
|
|
<div class="px-4 w-full lg:w-6/12">
|
|
<h1 class="font-bold lg:text-7xl mb-4 sm:text-6xl text-5xl">Список</h1>
|
|
<p class="mb-6 text-opacity-50 text-white text-xl sm:pr-12">Здесь предполагается список серверов</p>
|
|
<p class="mb-6 text-opacity-50 text-white text-xl sm:pr-12"></p><a href="#" class="bg-primary-500 hover:bg-primary-700 inline-block px-6 py-2 rounded text-white">Открыть</a>
|
|
</div>
|
|
<div class="px-4 w-full lg:w-6/12">
|
|
<div class="poster relative" style="height: 50vh;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="160" class="bg-secondary-500 text-white">
|
|
<path d="M 100 100 V 20 L 0 100"/>
|
|
<path d="M 100 100 V 0 L 0 100" opacity="0.5"/>
|
|
</svg>
|
|
<div class="mx-auto py-4 w-9/12 lg:w-4/12">
|
|
<hr>
|
|
</div>
|
|
<section class="bg-secondary-500 font-light py-8 text-gray-500">
|
|
<div class="container mx-auto px-4 relative">
|
|
<div class="mb-6 text-center">
|
|
<h2 class="font-medium mb-1 text-primary-500">Blog</h2>
|
|
<h3 class="font-bold font-serif mb-4 text-4xl text-white">Статус</h3>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-4 justify-center">
|
|
<div class="p-4 w-full md:w-6/12 lg:w-4/12">
|
|
<div class="bg-primary-500 flex flex-col h-full p-4 rounded shadow-lg"><a href="#" class="block hover:opacity-75"><img src="https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixid=MXwyMDkyMnwwfDF8c2VhcmNofDJ8fHRyYXZlbHxlbnwwfHx8&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=700&h=480&fit=crop" class="w-full" alt="..." width="350" height="240"/></a>
|
|
<div class="p-4">
|
|
<h4 class="font-semibold leading-tight mb-2 text-gray-300 text-xs">Ноут</h4><a href="#" class="block hover:text-gray-300 text-white"><h3 class="font-bold leading-tight text-xl">itman-nb</h3><h3 class="font-bold leading-tight text-xl"></h3><h3 class="font-bold leading-tight text-gray-300 text-xl">192.168.0.111</h3></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 w-full md:w-6/12 lg:w-4/12">
|
|
<div class="bg-primary-500 flex flex-col h-full p-4 rounded shadow-lg"><a href="#" class="block hover:opacity-75"><img src="https://images.unsplash.com/photo-1499363536502-87642509e31b?ixid=MXwyMDkyMnwwfDF8c2VhcmNofDE2fHx0cmF2ZWx8ZW58MHx8fA&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=700&h=480&fit=crop" class="w-full" alt="..." width="350" height="240"/></a>
|
|
<div class="p-4">
|
|
<h4 class="font-semibold leading-tight mb-2 text-gray-300 text-xs">Стационарный</h4>
|
|
<a href="#" class="block hover:text-gray-300 text-white"><h3 class="font-bold leading-tight text-xl">itman-pc</h3><h3 class="font-bold leading-tight text-xl">192.168.0.112</h3><p></p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 w-full md:w-6/12 lg:w-4/12">
|
|
<div class="bg-primary-500 flex flex-col h-full p-4 rounded shadow-lg"><a href="#" class="block hover:opacity-75"><img src="https://images.unsplash.com/photo-1471506480208-91b3a4cc78be?ixid=MXwyMDkyMnwwfDF8c2VhcmNofDUyfHx0cmF2ZWx8ZW58MHx8fA&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=700&h=480&fit=crop" class="w-full" alt="..." width="350" height="240"/></a>
|
|
<div class="p-4">
|
|
<h4 class="font-semibold leading-tight mb-2 text-gray-300 text-xs">Сервер</h4><a href="#" class="block hover:text-gray-300 text-white"><h3 class="font-bold leading-tight text-xl">xigmanas</h3><h3 class="font-bold leading-tight text-xl">192.168.0.105</h3><h3 class="font-bold leading-tight text-xl"></h3></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="160" class="bg-secondary-500 text-black">
|
|
<path d="M 100 100 V 20 L 0 100"/>
|
|
<path d="M 100 100 V 0 L 0 100" opacity="0.5"/>
|
|
</svg>
|
|
</main>
|
|
<footer class="bg-black pt-12 text-gray-300">
|
|
<div class="container mx-auto px-4 relative">
|
|
<div class="flex flex-wrap -mx-4">
|
|
<div class="w-full p-4 xl:w-4/12"> <a href="#" class="font-bold font-serif hover:text-opacity-75 inline-flex items-center leading-none mb-6 text-3xl text-primary-500 uppercase"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="2.5em" xml:space="preserve" fill="currentColor" viewBox="0 0 24 24" height="2.5em" class="mr-2">
|
|
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-14.243L7.757 12 12 16.243 16.243 12 12 7.757z"></path>
|
|
</svg> <span class="text-white"><p>TAD</p></span> </a>
|
|
<p class="mb-4 text-sm"> Duis pharetra venenatis felis, ut tincidunt ipsum consequat nec. Fusce et porttitor libero, eu aliquam nisi. Nam finibus ullamcorper semper. </p>
|
|
<div class="mb-6"> <a href="#" class="hover:text-primary-600">+1 234 567-890</a> <br> <a href="#" class="hover:text-primary-600">hello@fantico.com</a>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 w-full sm:w-6/12 md:w-4/12 xl:w-2/12">
|
|
<h2 class="font-bold mb-8 text-lg text-primary-500 uppercase"> About </h2>
|
|
<ul>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Get Quote</a>
|
|
</li>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Business Deal</a>
|
|
</li>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Privacy Policy</a>
|
|
</li>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Terms of Service</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="p-4 w-full sm:w-6/12 md:w-4/12 xl:w-2/12">
|
|
<h2 class="font-bold mb-8 text-lg text-primary-500 uppercase"> Services </h2>
|
|
<ul>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Custom Cakes</a>
|
|
</li>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Special Cakes</a>
|
|
</li>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Birthday Cakes</a>
|
|
</li>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Wedding Cakes</a>
|
|
</li>
|
|
<li class="mb-4"> <a href="#" class="hover:text-primary-600">Graduation Cakes</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="p-4 w-full md:w-4/12 xl:w-4/12">
|
|
<h2 class="font-bold mb-8 text-lg text-primary-500 uppercase">Subscribe</h2>
|
|
<p class="mb-4"> Subscribe to our newsletter and get exclusive updates directly in your inbox. </p>
|
|
<form>
|
|
<div class="bg-white border-2 border-gray-400 flex items-center mb-6 overflow-hidden p-1">
|
|
<input class="appearance-none border-primary-600 flex-1 font-light outline-none p-2 text-gray-600 w-full" placeholder="Enter email..." type="email"/>
|
|
<button type="submit" class="bg-primary-500 font-medium hover:bg-primary-700 inline-block px-6 py-2 text-center text-white uppercase" aria-label="submit">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" class="h-4 inline-block w-4">
|
|
<path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<h2 class="font-bold mb-4 text-lg text-primary-500 uppercase">Get Social</h2>
|
|
<div class="flex-wrap inline-flex space-x-3"> <a href="#" aria-label="facebook" class="hover:text-primary-500"> <svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
|
|
<path d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5z"/>
|
|
</svg></a> <a href="#" aria-label="twitter" class="hover:text-primary-500"> <svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
|
|
<path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>
|
|
</svg></a> <a href="#" aria-label="instagram" class="hover:text-primary-500"> <svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
|
|
<path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.25a1.25 1.25 0 0 0-2.5 0 1.25 1.25 0 0 0 2.5 0zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>
|
|
</svg></a><a href="#" aria-label="linkedin" class="hover:text-primary-500"> <svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
|
|
<path d="M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002zM7 8.48H3V21h4V8.48zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91l.04-1.68z"/>
|
|
</svg></a><a href="#" aria-label="youtube" class="hover:text-primary-500"> <svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
|
|
<path d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5-6-3.5v7z"/>
|
|
</svg></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="py-4">
|
|
<hr class="mb-4 opacity-25">
|
|
<div class="flex flex-wrap -mx-4 items-center">
|
|
<div class="px-4 py-2 w-full md:flex-1">
|
|
<p>© 2002 - 2021. All Rights Reserved - Company Name</p>
|
|
</div>
|
|
<div class="px-4 py-2 w-full sm:w-auto"> <a href="#" class="hover:text-primary-500">Privacy Policy</a> | <a href="#" class="hover:text-primary-500">Terms of Use</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|