Skip to content

Instantly share code, notes, and snippets.

@njorogejohn

njorogejohn/index.css

Created January 6, 2021 13:09
Show Gist options
  • Save njorogejohn/94491e56079a85b9cbb901b0531454e1 to your computer and use it in GitHub Desktop.
Save njorogejohn/94491e56079a85b9cbb901b0531454e1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. njorogejohn created this gist Jan 6, 2021.
    7 changes: 7 additions & 0 deletions index.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    //also use: https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css
    @import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,400;0,900;1,500&display=swap');


    body {
    font-family: "Muli";
    }
    23 changes: 23 additions & 0 deletions landing.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <div class="flex flex-wrap">
    <div class="w-full sm:w-8/12 mb-10">
    <div class="container mx-auto h-full sm:p-10">
    <nav class="flex px-4 justify-between items-center">
    <div class="text-4xl font-bold">
    Plant<span class="text-green-700">.</span>
    </div>
    <div>
    <img src="https://image.flaticon.com/icons/svg/497/497348.svg" alt="" class="w-8">
    </div>
    </nav>
    <header class="container px-4 lg:flex mt-10 items-center h-full lg:mt-0">
    <div class="w-full">
    <h1 class="text-4xl lg:text-6xl font-bold">Find your <span class="text-green-700">greeny</span> stuff for your room</h1>
    <div class="w-20 h-2 bg-green-700 my-4"></div>
    <p class="text-xl mb-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae maiores neque eaque ea odit placeat, tenetur illum distinctio nulla voluptatum a corrupti beatae tempora aperiam quia id aliquam possimus aut.</p>
    <button class="bg-green-500 text-white text-2xl font-medium px-4 py-2 rounded shadow">Learn More</button>
    </div>
    </header>
    </div>
    </div>
    <img src="https://images.unsplash.com/photo-1536147116438-62679a5e01f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Leafs" class="w-full h-48 object-cover sm:h-screen sm:w-4/12">
    </div>