Scribd
Upload
8 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 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
We take content rights seriously. If you suspect this is your content, claim it here.
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