Scribd
Upload
4 views

Codigo HTML

The document is an HTML template for a front-end design showcasing a technology-driven project management tool. It features sections for a Supervisor, Team Builder, and Karma, each with descriptions of their functionalities. The layout utilizes Tailwind CSS for styling and includes SVG icons for visual representation.

Uploaded by

TS Taiga
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

Codigo HTML

The document is an HTML template for a front-end design showcasing a technology-driven project management tool. It features sections for a Supervisor, Team Builder, and Karma, each with descriptions of their functionalities. The layout utilizes Tailwind CSS for styling and includes SVG icons for visual representation.

Uploaded by

TS Taiga
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Front End design</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-
32x32.png">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
</head>

<body class="bg-white font-poppins flex justify-center items-center min-h-screen">


<!-- Contenedor Principal -->
<div class="border border-gray-300 w-full max-w-5xl p-5">
<!-- Títulos -->
<div class="mt-6 mb-4 text-center">
<h1 class="text-black font-light text-2xl mb-1">Reliable, efficient
delivery</h1>
<h2 class="text-blue-950 font-bold text-2xl mb-1">Powered by Technology</h2>
<p class="text-black font-light mb-1">
Our Artificial Intelligence powered tools use millions of project data
points to ensure that your project is successful
</p>
</div>

<!-- Contenedor de Tarjetas -->


<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center justify-items-
center">
<!-- Supervisor -->
<div class="w-full lg:w-auto border-t-4 border-t-cyan-500 border border-gray-
300 rounded-lg p-5 shadow-md bg-white">
<div class="text-blue-950">
<span class="text-base font-bold">Supervisor</span>
<p class="mt-2 text-gray-600 text-base font-light">
Monitors activity to identify project roadblocks
</p>
</div>
<div class="flex justify-end mt-4 w-full">
<!-- Ícono Supervisor -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<g fill="none">
<path fill="#676E74" d="M56.842 7.158c-9.526-9.563-24.902-9.525-
34.428 0-8.025 8.026-9.45 20.44-3.525 30.003l-2.513 2.55-1.356 6.144 4.214 4.214
5.093-2.408 2.512-2.55a24.254 24.254 0 0030.003-3.525c9.563-9.526 9.525-24.902 0-
34.428z"/>
<path fill="#474F54" d="M24.327 47.661l2.512-2.55a24.254 24.254 0
0030.003-3.525c9.563-9.526 9.525-24.902 0-34.428l-40.26 40.26 2.652 2.651 5.093-
2.408z"/>
<path fill="#64E1DC" d="M54.213 9.787a20.56 20.56 0 00-14.585-
6.041C28.236 3.746 19 12.98 19 24.372a20.564 20.564 0 006.041 14.586 20.564 20.564
0 0014.586 6.04c11.392 0 20.626-9.234 20.626-20.626a20.56 20.56 0 00-6.041-
14.585z"/>
<path fill="#00C8C8" d="M60.254 24.372a20.56 20.56 0 00-6.041-
14.585l-29.17 29.17A20.564 20.564 0 0039.627 45c11.392 0 20.626-9.235 20.626-
20.627z"/>
<path fill="#EFEFF4" d="M56.239 23.41c-.184-.307-2.98-4.914-7.281-
8.368-2.63-2.113-5.822-3.796-9.33-3.796-9.242 0-16.314 11.669-16.61
12.165l-.576.961.575.961c.184.309 2.98 4.916 7.28 8.37 2.631 2.112 5.823 3.795 9.33
3.795 9.243 0 16.315-11.668 16.612-12.165l.574-.96-.574-.962z"/>
<path fill="#DADAE5" d="M56.239 25.333l.574-.96-.574-.962c-.184-.308-
2.98-4.915-7.281-8.369l-18.66 18.66c2.63 2.113 5.822 3.796 9.33 3.796 9.242 0
16.314-11.668 16.61-12.165z"/>
<path fill="#64E1DC" d="M43.604 20.396a5.607 5.607 0 00-3.976-1.65
5.632 5.632 0 00-5.626 5.626c0 1.551.631 2.958 1.65 3.976a5.609 5.609 0 003.976
1.65 5.632 5.632 0 005.625-5.626c0-1.55-.63-2.957-1.649-3.976z"/>
<path fill="#00C8C8" d="M45.253 24.372c0-1.55-.63-2.957-1.649-3.976l-
7.952 7.952a5.608 5.608 0 003.976 1.65 5.632 5.632 0 005.625-5.626z"/>
<path fill="#676E74" d="M40.954 23.046a1.876 1.876 0 10-1.326 3.2
1.876 1.876 0 001.326-3.2z"/>
<path fill="#474F54" d="M41.503 24.372c0-.517-.21-.986-.55-1.326l-
2.65 2.652a1.876 1.876 0 003.2-1.326z"/>
<path fill="#575C60" d="M20.333 43.667l-3.957-3.957L0 56.049l3.975
3.976L7.951 64l16.376-16.339z"/>
<path fill="#333637" d="M24.327 47.661l-3.994-3.994L3.975 60.025
7.951 64z"/>
</g>
</svg>
</div>
</div>

<!-- Contenedor Central -->


<div class="flex flex-col gap-8 items-center">
<!-- Team Builder -->
<div class="w-full lg:w-auto border-t-4 border-t-red-600 border border-
gray-300 rounded-lg p-5 shadow-md bg-white">
<div class="text-blue-950">
<span class="text-base font-bold">Team Builder</span>
<p class="mt-2 text-gray-600 text-base font-light">
Scans our talent network to create the optimal team for your project
</p>
</div>
<div class="flex justify-end mt-4 w-full">
<!-- Ícono Team Builder -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<g fill="none"><path fill="#EFEFF4" d="M64
14.454v41.788H0V14.454l3.75-3.787h56.5z"/>
<path fill="#DADAE5" d="M64 14.454v41.788H32V10.667h28.25z"/>
<path fill="#474F54" d="M0 0h64v15.515H0z"/>
<path fill="#32393F" d="M32 0h32v15.515H32z"/><g fill="#FF637B">
<path d="M7.758 5.818h3.685v3.879H7.758zM15.128
5.818h3.685v3.879h-3.685zM22.497 5.818h3.685v3.879h-3.685z"/>
</g>
<path fill="#FF637B" d="M45.576 42.245V64H34.355v-3.71h-
3.74V64H19.394V42.245l11.37-9.275h3.105z"/>
<path fill="#DADAE5" d="M11.636 22.303h41.697v3.879H11.636z"/>
<path fill="#C9C9D3" d="M32 22.303h20.364v3.879H32z"/>
<path fill="#E63950" d="M45.576 42.245V64H33.939v-
3.71H32V32.97h1.435z"/>
<path fill="#EFEFF4" d="M30.061 45.576h3.878v3.879h-3.878z"/>
<path fill="#DADAE5" d="M32 45.576h1.939v3.879H32z"/>
<path fill="#676E74" d="M50.424 45.779l-2.452 2.706-15.487-13.526-
15.488 13.526-2.452-2.706 17.94-15.718z"/>
<path fill="#474F54" d="M32 30.061l18.424 15.718-2.518 2.706L32
34.959z"/></g>
</svg>
</div>
</div>

<!-- Karma -->


<div class="w-full lg:w-auto border-t-4 border-t-amber-400 border border-
gray-300 rounded-lg p-5 shadow-md bg-white">
<div class="text-blue-950">
<span class="text-base font-bold">Karma</span>
<p class="mt-2 text-gray-600 text-base font-light">
Regularly evaluates our talent to ensure equality
</p>
</div>
<div class="flex justify-end mt-4 w-full">
<!-- Ícono Karma -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<g fill="none"><path fill="#676E74" d="M26.375 52.625h11.25V64h-
11.25z"/>
<path fill="#333637" d="M32 52.625h5.625V64H32z"/>
<path fill="#4C545A" d="M22.625 47h18.75v9.375h-18.75z"/>
<path fill="#52585C" d="M32 47h9.375v9.375H32z"/>
<path fill="#FFDA2D" d="M45.012 36.725c-2.325 1.913-3.637 4.612-
3.637 7.425V47h-18.75v-2.85c0-2.85-1.238-5.512-3.3-7.125-5.062-3.938-7.95-9.862-
7.95-16.275a20.585 20.585 0 017.613-16.013C22.7 1.737 27.238 0 32 0c1.462 0
2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663 1.275 7.5-1.425 14.85-7.313
19.612z"/>
<path fill="#FDBF00" d="M45.012 36.725c-2.325 1.913-3.637 4.612-
3.637 7.425V47H32V0c1.462 0 2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663
1.275 7.5-1.425 14.85-7.313 19.612z"/>
<path fill="#676E74" d="M18.875 45.125h26.25v3.75h-26.25z"/>
<path fill="#FF9100" d="M39.956 10.143l2.651 2.651-3.979 3.978-
2.651-2.651z"/>
<path fill="#FDBF00" d="M25.372 24.727l2.651 2.651-3.979 3.979-
2.651-2.651zM30.125 28.25h3.75v5.625h-3.75z"/>
<path fill="#FF9100" d="M38.628 24.727l3.979 3.979-2.651 2.651-
3.979-3.979zM39.5 18.875h5.625v3.75H39.5z"/>
<path fill="#FDBF00" d="M24.044 10.143l3.979 3.979-2.651 2.65-
3.979-3.978zM18.875 18.875H24.5v3.75h-5.625zM30.125 7.625h3.75v5.625h-3.75z"/>
<g fill="#FFDA2D"><path d="M0 18.875h7.625v3.75H0zM6.585 14.81l-
5.75-3.75 2.08-3.12 5.75 3.75zM2.915 33.56l-2.08-3.12 5.75-3.75 2.08 3.12z"/>
</g>
<path fill="#FDBF00" d="M56.375 18.875H64v3.75h-7.625zM61.085
33.56l-5.75-3.75 2.08-3.12 5.75 3.75zM57.415 14.81l-2.08-3.12 5.75-3.75 2.08
3.12z"/>
<path fill="#FF9100" d="M32 7.625h1.875v5.625H32zM32
28.25h1.875v5.625H32z"/>
<path fill="#333637" d="M32 45.125h13.125v3.75H32z"/>
<path fill="#FDBF00" d="M32 11.375c-5.175 0-9.375 4.2-9.375
9.375s4.2 9.375 9.375 9.375 9.375-4.2 9.375-9.375-4.2-9.375-9.375-9.375z"/>
<path fill="#FF9100" d="M32 30.125v-18.75c5.175 0 9.375 4.2 9.375
9.375s-4.2 9.375-9.375 9.375z"/>
<path fill="#FFDA2D" d="M30.125 18.875h3.75v3.75h-3.75z"/><path
fill="#FDBF00" d="M32 18.875h1.875v3.75H32z"/>
</g>
</svg>
</div>
</div>
</div>

<!-- Calculator -->


<div class="w-full lg:w-auto border-t-4 border-t-sky-600 border border-gray-
300 rounded-lg p-5 shadow-md bg-white">
<div class="text-blue-950">
<span class="text-base font-bold">Calculator</span>
<p class="mt-2 text-gray-600 text-base font-light">
Uses data from past projects to provide better delivery estimates
</p>
</div>
<div class="flex justify-end mt-4 w-full">
<!-- Ícono Calculator -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g
fill="none">
<path fill="#474F54" d="M64 0v41.25l-3.75 3.875H3.75L0 41.25V0z"/>
<path fill="#32393F" d="M64 0v41.25l-3.75 3.875H32V0z"/>
<path fill="#DADAE5" d="M22.625 50.875h18.75v11.25h-18.75z"/>
<path fill="#C9C9D3" d="M32 50.875h9.375v11.25H32z"/>
<path fill="#EFEFF4" d="M0 41.25h64v11.5H0z"/>
<path fill="#DADAE5" d="M32 41.25h32v11.5H32z"/>
<path fill="#EFEFF4" d="M15.125 60.25h33.75V64h-33.75z"/>
<path fill="#DADAE5" d="M32 60.25h16.875V64H32z"/>
<path fill="#549EF2" d="M20.75 7.5c-7.236 0-13.125 5.889-13.125
13.125S13.514 33.75 20.75 33.75s13.125-5.889 13.125-13.125S27.986 7.5 20.75 7.5zm0
18.75a5.631 5.631 0 01-5.625-5.625A5.631 5.631 0 0120.75 15a5.631 5.631 0 015.625
5.625 5.631 5.631 0 01-5.625 5.625z"/>
<g fill="#377FD2">
<path d="M45.125 7.5H56.5v3.75H45.125zM37.625 7.5h3.75v3.75h-
3.75zM45.125 22.5H56.5v3.75H45.125zM37.625 22.5h3.75v3.75h-3.75zM37.625
15H56.5v3.75H37.625zM37.625 30H56.5v3.75H37.625z"/>
</g></g>
</svg>
</div>
</div>
</div>
</div>
</body>

</html>

You might also like