@ -6,7 +6,7 @@
< link rel = "stylesheet" href = "css/output.css" >
< link rel = "stylesheet" href = "css/output.css" >
< / head >
< / head >
< body >
< body >
< main class = "m-10 h- 96 ">
< main class = "m-10 h- auto w-auto ">
< nav class = "flex items-center lg:justify-between sm:justify-center flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-4 opacity-100 mb-24" > <!-- dark:bg - black -->
< nav class = "flex items-center lg:justify-between sm:justify-center flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-4 opacity-100 mb-24" > <!-- dark:bg - black -->
< div class = "block lg:hidden cursor-pointer flex:none mr-4" id = "HamburgerInactive" >
< div class = "block lg:hidden cursor-pointer flex:none mr-4" id = "HamburgerInactive" >
< button id = "btn" class = "flex flex-col items-center px-3 py-[0.4375rem] border rounded text-teal-200 border-teal-400" >
< button id = "btn" class = "flex flex-col items-center px-3 py-[0.4375rem] border rounded text-teal-200 border-teal-400" >
@ -89,8 +89,8 @@
});
});
< / script >
< / script >
< / nav >
< / nav >
< div class = "flex lg:flex-row flex-col w-full mb-24 ">
< div class = "flex lg:flex-row flex-col w-full mb-24 justify-center items-center ">
< div class = "h-96 w-auto flex flex-col flex-grow">
< div class = "h-96 lg: w-auto sm:w-full flex flex-col flex-grow">
< div class = "w-full flex items-center justify-center mb-6 border-8 border-black" >
< div class = "w-full flex items-center justify-center mb-6 border-8 border-black" >
< h1 class = "text-4xl md:text-5xl lg:text-6xl" > Lorem ipsum dolor< / h1 >
< h1 class = "text-4xl md:text-5xl lg:text-6xl" > Lorem ipsum dolor< / h1 >
< / div >
< / div >
@ -100,35 +100,45 @@
< / p >
< / p >
< / div >
< / div >
< / div >
< / div >
< img class = "w-auto flex-grow-0 h-96 " src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGpfMagCsgrJkELG_GOjtxqssEPXd-3vr2PmPdaB-0Y5Rp-bv1VOouyoXmG2QxZWHpdYI&usqp=CAU" >
< img class = "w-auto flex-grow-0 h-96 w-96 " src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGpfMagCsgrJkELG_GOjtxqssEPXd-3vr2PmPdaB-0Y5Rp-bv1VOouyoXmG2QxZWHpdYI&usqp=CAU" >
< / div >
< / div >
< div class = "flex lg:flex-col h- 96 flex-col w-full mb-24 border-8 border-black">
< div class = "flex lg:flex-col h- auto flex-col w-full mb-24 border-8 border-black">
< div class = "w-full justify-center items-center flex border-8 border-black" >
< div class = "w-full justify-center items-center flex border-8 border-black" >
< p class = "text-4xl md:text-5xl lg:text-6xl" >
< p class = "text-4xl md:text-5xl lg:text-6xl" >
How it works
How it works
< / p >
< / p >
< / div >
< / div >
< div class = "flex lg:flex-row flex-col justify-between items-center h- full w-full ">
< div class = "flex lg:flex-row flex-col justify-between items-center h- auto w-auto mx-5 mb-5 ">
< div class = "flex flex-col items-center lg: h-full lg:w-1/3 lg:m-0 w-full m-5 ">
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full">
< img src = "" alt = "pic 1 " class = "bg-black flex-grow m-5 ">
< img src = "" alt = "pic 2 " class = "bg-black flex-grow m-5 w-full rounded ">
< p class = "text-xl" >
< p class = "text-xl" >
Step 1
Step 1
< / p >
< / p >
< / div >
< / div >
< div class = "flex flex-col items-center h-full w-1/3">
< div class = "flex flex-col items-center h-full lg: w-1/3 w-full ">
< img src = "" alt = "pic2" class = "bg-black flex-grow m-5 ">
< img src = "" alt = "pic2" class = "bg-black flex-grow m-5 w-full rounded ">
< p class = "text-xl" >
< p class = "text-xl" >
Step 2
Step 2
< / p >
< / p >
< / div >
< / div >
< div class = "flex flex-col items-center h-full w-1/3">
< div class = "flex flex-col items-center h-full lg: w-1/3 w-full ">
< img src = "" alt = "pic 3 " class = "bg-black flex-grow m-5 ">
< img src = "" alt = "pic 2 " class = "bg-black flex-grow m-5 w-full rounded ">
< p class = "text-xl" >
< p class = "text-xl" >
Step 3
Step 3
< / p >
< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "w-full border-8 border-black flex flex-col items-center justify-center" >
< div class = "border-4 border-black w-auto h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap" >
Why?
< / div >
< div class = "border-4 border-black h-auto mt-4 lg:mx-8 max-w-md sm:flex-grow-0 mb-4 " >
< p class = "text-lg md:text-xl lg:text-2xl" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab delectus dolor, dolorem dolorum et facilis, illum ipsam, natus nobis nulla quam repellat saepe! Aperiam doloremque harum laudantium repellendus tempora!
< / p >
< / div >
< / div >
< / main >
< / main >
< / body >
< / body >
< / html >
< / html >