usite-sas-bic/prosapp_landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prosapp update imagenes hover y responsive

Browse Source
This commit is contained in:
Felipe
2023-08-08 10:15:31 -05:00
parent 5872949870
commit 859b042695
1 changed files with 27 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+27 -29
View File
@@ -8,7 +8,7 @@
<title>ProsApp</title>
</head>
<body class="bg-[url('./img/bg.jpg')] bg-cover bg-center">
<header class="fixed top-0 bg-white w-full " x-data="{ open: false }">
<header class="fixed top-0 bg-white w-full z-20" x-data="{ open: false }">
<div class="hidden lg:flex lg:items-center lg:justify-between py-3 px-10 max-w-7xl mx-auto " >
<div class="w-48">
<img src="./img/logo_prosapp.png" alt="logo">
@@ -52,9 +52,9 @@
</div>
</header>
<section id="inicio" class="h-screen grid md:content-center pt-16 mx-auto">
<div class="md:flex justify-between w-full max-w-7xl mx-auto ">
<div class="md:pl-8 align-middle my-auto">
<section id="inicio" class="h-screen grid md:content-center pt-16 mx-auto">
<div class="flex flex-col flex-col-reverse md:flex-row justify-between w-full max-w-7xl mx-auto ">
<div class="px-6 md:px-0 md:pl-8 align-middle my-auto">
<h1 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">ProsApp</h1>
<h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">Tu aliado de confianza en servicios de salud</h2>
<p class="text-gray-600 text-sm md:text-lg mb-8 transition-all">Reservas rápidas y sencillas con profesionales verificados, disponibles 24/7.</p>
@@ -71,7 +71,7 @@
</div>
</div>
<div class="flex items-center justify-center md:pr-8 align-middle my-auto">
<div class="rounded-full bg-gray-300 overflow-hidden max-w-2xl w-full">
<div class="rounded-full bg-gray-300 overflow-hidden w-2/3 md:max-w-2xl md:w-full hover:scale-105 transition-all">
<img src="./img/p1.png" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
@@ -80,16 +80,16 @@
<section id="usuarios" class="h-screen grid md:content-center">
<div class="flex justify-between w-full max-w-7xl mx-auto ">
<div class="md:pr-8 align-middle my-auto">
<div class="rounded-full bg-gray-300 overflow-hidden max-w-lg">
<div class="flex flex-col md:flex-row justify-between w-full max-w-7xl mx-auto ">
<div class="md:pr-8 align-middle my-auto flex justify-center">
<div class="rounded-full bg-gray-300 w-2/3 xl:w-full overflow-hidden max-w-lg hover:scale-105 transition-all">
<img src="./img/p2.png" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
<div class=" items-center justify-center md:pl-8 align-middle my-auto">
<div class="px-6 md:px-0 items-center justify-center md:pl-8 align-middle my-auto">
<h2 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para usuarios</h2>
<h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">La atención que mereces</h2>
<p class="text-gray-600 text-sm md:text-lg mb-16 transition-all">Tu bienestar es nuestra prioridad, encuentra los mejores profesionales
<p class="text-gray-600 text-sm md:text-lg mb-6 md:mb-16 transition-all">Tu bienestar es nuestra prioridad, encuentra los mejores profesionales
certificados.</p>
<ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-600 [&>li]:py-1">
@@ -122,11 +122,11 @@
</div>
</section>
<section id="profesionales" class=" h-screen flex justify-center w-full max-w-7xl mx-auto ">
<div class="md:flex flex-col justify-start md:justify-center md:col-span-2 lg:col-span-3 mx-4 md:mx-8 my-auto">
<section id="profesionales" class=" h-screen flex flex-col flex-col-reverse md:flex-row justify-center w-full max-w-7xl mx-auto ">
<div class="md:flex px-6 md:px-0 flex-col justify-start md:justify-center md:col-span-2 lg:col-span-3 mx-4 md:mx-8 my-auto">
<h2 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para profesionales de la salud</h2>
<h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">Expande tu alcance profesional</h2>
<p class="text-gray-600 text-sm md:text-lg mb-16 transition-all">Amplía tu base de pacientes y llega a más personas con ProsApp.</p>
<p class="text-gray-600 text-sm md:text-lg mb-6 md:mb-16 transition-all">Amplía tu base de pacientes y llega a más personas con ProsApp.</p>
<ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-600 [&>li]:py-1">
<li>
@@ -156,7 +156,7 @@
</ul>
</div>
<div class="flex items-center justify-center md:pr-8 align-middle my-auto">
<div class="rounded-full bg-gray-300 overflow-hidden max-w-2xl w-full">
<div class="rounded-full bg-gray-300 w-2/3 xl:w-full overflow-hidden max-w-2xl hover:scale-105 transition-all">
<img src="./img/p4.png" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
@@ -165,12 +165,12 @@
<section class="h-screen grid md:content-center overflow-auto mb-6 md:mb-0">
<div class="md:flex justify-between w-full max-w-7xl mx-auto my-auto">
<div class="flex items-center justify-center md:pr-8">
<div class="rounded-2xl overflow-hidden">
<img src="./img/p3.png" alt="Imagen" class="w-full h-full object-cover"/>
<div class="rounded-2xl w-2/3 xl:w-full mb-6 md:mb-0 overflow-hidden hover:scale-105 transition-all">
<img src="./img/p3.png" alt="Imagen" class="w-full h-full object-cover "/>
</div>
</div>
<div class="md:pl-8 my-auto">
<h2 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h2>
<h2 class="px-6 md:px-0 text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h2>
<ul class="[&>li]:text-xl [&>li]:py-1 mx-8 md:mx-0">
<li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold bg-white my-2">
@@ -199,20 +199,18 @@
<section class="grid md:content-center">
<div class="grid grid-cols-1 mx-4 md:mx-0">
<div class="md:pr-8 text-center">
<h3 class="text-gray-600 font-semibold text-2xl lg:text-3xl mb-4 transition-all mb-16 ">
<h3 class="text-gray-600 font-semibold text-2xl lg:text-3xl mb-4 transition-all mb-16">
Acerca de ProsApp
</h3>
<div class="text-2xl rounded-2xl p-24 xl:text-4xl mb-4 transition-all shadow-md border-2 md:w-1/2 lg:w-3/4 mx-8 md:mx-auto mt-8 text-center text-white bg-[#1A8BE4]">
<div class="text-lg md:text-2xl p-12 rounded-2xl md:p-24 xl:text-4xl mb-4 transition-all shadow-md border-2 md:w-1/2 lg:w-3/4 md:mx-8 md:mx-auto mt-8 text-center text-white bg-[#1A8BE4]">
<p class="font-serif italic">ProsApp conecta a</p>
<p class="font-sans font-bold text-4xl mb-6">profesionales de la salud</p>
<p class="font-sans font-bold text-xl md:text-4xl mb-6">profesionales de la salud</p>
<p class="font-serif italic">altamente calificados</p>
<p class="font-sans font-bold text-4xl mb-6">con usuarios que buscan</p>
<p class="font-sans font-bold text-xl md:text-4xl mb-6">con usuarios que buscan</p>
<p class="font-serif italic">servicios médicos y asesoramiento confiable.</p>
</div>
<div class="flex justify-center gap-6 mt-16">
<svg class="w-10 cursor-pointer hover:scale-105 transition-all" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 512 512"
<svg class="w-10 cursor-pointer hover:scale-110 transition-all" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
>
@@ -231,7 +229,7 @@
</g>
</svg>
<svg
class="w-10 cursor-pointer hover:scale-105 transition-all"
class="w-10 cursor-pointer hover:scale-110 transition-all"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -292,7 +290,7 @@
</g>
</svg>
<svg
class="w-10 cursor-pointer hover:scale-105 transition-all"
class="w-10 cursor-pointer hover:scale-110 transition-all"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -321,7 +319,7 @@
</g>
</svg>
<svg
class="w-10 cursor-pointer hover:scale-105 transition-all"
class="w-10 cursor-pointer hover:scale-110 transition-all"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -355,8 +353,8 @@
</div>
<div class="md:bottom-16 w-full">
<div class="text-center border-t-2 pt-4 mt-8 mx-8">
<h3 class="text-gray-400 text-md mb-4 transition-all" >
Desarrollado por U-site
<h3 class="text-gray-400 text-md mb-4 transition-all cursor-pointer">
Desarrollado por <span class="font-semibold">U-site</span>
</h3>
</div>
</div>