Skip to content

Commit

Permalink
complete proyect
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikee210521
mikee210521 committed Jan 19, 2024
1 parent 05a0480 commit 493a5bb
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 48 deletions.
40 changes: 40 additions & 0 deletions src/assets/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const API = 'https://dragonball-api.com/api/characters';

const content = document.getElementById("content");

const options ={
method: 'GET',
headers: {
'content-type': 'application/json'
}
};

async function fetchData(urlApi){
const response = await fetch(urlApi,options);
return await response.json();
}

(async ()=>{
try {
const characters = await fetchData(API);
let view = `
${characters.items.map(characters => `
<div class="group relative">
<div
class="w-17 overflow-hidden group-hover:opacity-75 lg:aspect-none cursor-pointer">
<img src="${characters.image}" alt="${characters.description}" class="w-full">
</div>
<div class="mt-4 flex justify-between">
<h3 class="text-4xl font-extrabold inset-0 text-orange-600">
${characters.name}
</h3>
</div>
</div>
`).slice(0, 10).join('')}
`;
content.innerHTML = view;
}catch (e){
console.log(e);

}
})();
84 changes: 36 additions & 48 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="./assets/main.js"></script>
<title>LandingPage</title>
</head>

<body>
Expand All @@ -20,14 +22,13 @@
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span class="sr-only">brand</span>
<a target="_blank" rel="noopener noreferrer" href="https://web.dragonball-api.com/">
<img class="h-8 w-auto sm:h-10" src="./assets/brand.png">
</a>
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
<a href="https://mi-portafolio-gilt.vercel.app/" class="font-medium text-gray-500 hover:text-gray-900">Briefcase</a>
<a target="_blank" rel="noopener noreferrer" href="https://mi-portafolio-gilt.vercel.app/" class="font-medium text-gray-500 hover:text-gray-900">Briefcase</a>

</div>
</nav>
Expand All @@ -37,75 +38,62 @@
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block xl:inline">Angel Nuñez</span>
<span class="block text-indigo-600 xl:inline"><a href="https://www.linkedin.com/in/miguel-angel-nu%C3%B1ez-dominguez/">@AngelN</a></span>
<span class="block xl:inline ">Angel Nuñez</span>
<span class="block text-orange-600 xl:inline"><a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/miguel-angel-nu%C3%B1ez-dominguez/">@AngelN</a></span>
</h1>
<p
class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Description</p>
I enjoy the web development field with frameworks like React.js and Vue.js. I appreciate the process of creating functional and user-friendly projects, using Figma to assist in interface design.🎨</p>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-200">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
src="./assets/dgz.png" alt="">
src="./assets/dgz.png" alt="photo">
</div>
</div>
<div class="bg-white">
<div class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-2xl font-extrabold tracking-tight text-gray-900">Last YouTube Videos</h2>
<div class="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
<h2 class="text-2xl font-extrabold tracking-tight text-gray-900">Dragon Ball Z Characters</h2>

<div class="mt-6 grid grid-cols-1 gap-y-20 gap-x-20 sm:grid-cols-2 lg:grid-cols-5 xl:gap-x-10"
id="content"
>
<!-- content -->
<div class="group relative">
<div
class="w-full bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:aspect-none">
<img src="" alt="" class="w-full">
</div>
<div class="mt-4 flex justify-between">
<h3 class="text-sm text-gray-700">
<span aria-hidden="true" class="absolute inset-0"></span>
title
</h3>
</div>
</div>
</div>

</div>
</div>
<div class="bg-gray-50">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Contact</span>
<span class="block text-indigo-600">keep in touch.</span>
<span class="block text-orange-600" >keep in touch.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48"
style=" fill:#ff0202;">
<linearGradient id="awSgIinfw5_FS5MLHI~A9a_yGcWL8copNNQ_gr1" x1="6.228" x2="42.077" y1="4.896" y2="43.432"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#0d61a9"></stop>
<stop offset="1" stop-color="#16528c"></stop>
</linearGradient>
<path fill="url(#awSgIinfw5_FS5MLHI~A9a_yGcWL8copNNQ_gr1)"
d="M42,40c0,1.105-0.895,2-2,2H8c-1.105,0-2-0.895-2-2V8c0-1.105,0.895-2,2-2h32 c1.105,0,2,0.895,2,2V40z">
</path>
<path
d="M25,38V27h-4v-6h4v-2.138c0-5.042,2.666-7.818,7.505-7.818c1.995,0,3.077,0.14,3.598,0.208 l0.858,0.111L37,12.224L37,17h-3.635C32.237,17,32,18.378,32,19.535V21h4.723l-0.928,6H32v11H25z"
opacity=".05"></path>
<path
d="M25.5,37.5v-11h-4v-5h4v-2.638c0-4.788,2.422-7.318,7.005-7.318c1.971,0,3.03,0.138,3.54,0.204 l0.436,0.057l0.02,0.442V16.5h-3.135c-1.623,0-1.865,1.901-1.865,3.035V21.5h4.64l-0.773,5H31.5v11H25.5z"
opacity=".07"></path>
<path fill="#fff"
d="M33.365,16H36v-3.754c-0.492-0.064-1.531-0.203-3.495-0.203c-4.101,0-6.505,2.08-6.505,6.819V22h-4v4 h4v11h5V26h3.938l0.618-4H31v-2.465C31,17.661,31.612,16,33.365,16z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48"
style=" fill:rgba(159,89,239,0.51);">
<path fill="#03A9F4"
d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429">
</path>
</svg>
<!-- Icono de GitHub -->
<a href="https://github.com/mikee210521" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-1 0 26 22" stroke="currentColor"
class="h-10 w-10 text-gray-500 hover:text-gray-700">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.207 11.387.6.11.793-.258.793-.577 0-.284-.01-1.22-.015-2.214-3.22.702-3.893-1.54-3.893-1.54-.527-1.337-1.287-1.696-1.287-1.696-1.054-.719.08-.704.08-.704 1.17.083 1.787 1.203 1.787 1.203 1.04 1.787 2.73 1.203 3.394.92.105-.754.405-1.203.736-1.477-2.57-.293-5.268-1.286-5.268-5.718
0-1.264.45-2.295 1.203-3.103-.12-.29-.522-1.47.114-3.062 0 0 1.003-.31 3.284 1.187a11.12 11.12 0 0 1 2.95-.4c1.002.008 2.005.134 2.95.4 2.28-1.497 3.282-1.187 3.282-1.187.638 1.592.234 2.772.114 3.062.753.808 1.203 1.84 1.203 3.103 0 4.444-2.7 5.425-5.276 5.715.413.358.78 1.066.78 2.147 0 1.55-.014 2.799-.014 3.182 0 .319.192.692.8.576C20.565
21.797 24 17.297 24 12c0-6.63-5.37-12-12-12z" style="stroke-width: 2;"/>

</svg>
</a>

<!-- Icono de Correo Electrónico -->
<a href="mailto:[email protected]" class="ml-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 -24 24 24" stroke="currentColor"
class="h-11 w-11 text-gray-500 hover:text-gray-700">
<path stroke-width="2"
d="M20 6L10 12 20 19zM4 4v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2z"
style="transform: rotate(-90deg);"/>
</svg>
</a>
</div>

</div>
</div>
</body>
Expand Down

0 comments on commit 493a5bb

Please sign in to comment.