snipette/snipette-wripro-site
snipette/snipette-wripro-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make pages work better in different screen sizes

Browse source
This commit is contained in:
Badri Sunderarajan 2020-04-10 18:46:38 +05:30
parent 6b6b689ebf
commit 4666cc96b5
1 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/index.htm
View file

@ -65,7 +65,7 @@
</div> </div>
</div> </div>
<div class="bg-white flex flex-wrap mx-auto my-16 shadow-xl sm:mx-4 rounded"> <div class="bg-white flex flex-wrap mx-auto my-16 shadow-xl sm:mx-4 rounded">
<div class="sm:w-auto md:w-auto lg:w-1/3 p-4"> <div class="xs:w-auto sm:w-full md:w-1/3 lg:w-1/3 p-4">
<a name="pricing"> <a name="pricing">
<h2 class="text-center uppercase">Price</h2> <h2 class="text-center uppercase">Price</h2>
</a> </a>
@ -73,7 +73,7 @@
<p class="text-center text-lg my-2">That's right—it's free!</p> <p class="text-center text-lg my-2">That's right—it's free!</p>
<p class="text-sm">You can even earn money through the <a href="//medium.com/creators" target="_blank" class="text-orange-800 hover:text-orange-900">Medium Partner Programme</a>. We're working on setting up our some monetisation strategy ourselves: let us know if you want to know more.</p> <p class="text-sm">You can even earn money through the <a href="//medium.com/creators" target="_blank" class="text-orange-800 hover:text-orange-900">Medium Partner Programme</a>. We're working on setting up our some monetisation strategy ourselves: let us know if you want to know more.</p>
</div> </div>
<div class="sm:w-full md:w-auto lg:w-1/3 p-4"> <div class="xs:w-full sm:w-1/2 md:w-1/3 lg:w-1/3 p-4">
<h2 class="text-center uppercase">You give us</h2> <h2 class="text-center uppercase">You give us</h2>
<ul class="list-chevron m-3"> <ul class="list-chevron m-3">
<li>Content written in the Snipette Style</li> <li>Content written in the Snipette Style</li>
@ -82,7 +82,7 @@
<li>Good company to work with ;)</li> <li>Good company to work with ;)</li>
</ul> </ul>
</div> </div>
<div class="sm:w-full md:w-auto lg:w-1/3 p-4"> <div class="xs:w-full sm:w-1/2 md:w-1/3 lg:w-1/3 p-4">
<h2 class="text-center uppercase">We give you</h2> <h2 class="text-center uppercase">We give you</h2>
<ul class="list-chevron m-3"> <ul class="list-chevron m-3">
<li>Help and guidance creating your piece</li> <li>Help and guidance creating your piece</li>
@ -94,15 +94,14 @@
</div> </div>
</div> </div>
<div class="bg-orange-900 text-orange-100"> <div class="bg-orange-900 text-orange-100">
<div class="max-w-4xl mx-auto flex flex-wrap content-center"> <div class="max-w-4xl mx-auto flex flex-wrap justify-center">
<img src="img/pup-with-penknife.png" class="w-auto h-48"> <img src="img/pup-with-penknife.png" class="w-auto h-48">
<div class="w-auto my-auto ml-10"> <div class="w-auto my-auto sm:mx-auto md:ml-10">
<div class="w-auto"> <div class="w-auto flex flex-wrap justify-center sm:justify-start">
<p class="text-3xl text-orange-200">Ready to give us a spin? <p class="text-3xl text-orange-200 my-auto text-center sm:text-left m-2">Ready to give us a spin?</p>
<a href="//goo.gl/forms/NAf4TRKFBZ73v9C02"class="text-base m-4 p-4 bg-orange-500 text-orange-900 uppercase rounded">Apply Now</a> <a href="//goo.gl/forms/NAf4TRKFBZ73v9C02"class="text-base m-4 p-4 border-2 border-solid border-orange-500 text-orange-500 uppercase rounded">Apply Now</a>
</p>
</div> </div>
<p class="text-sm text-orange-200 text-center">Or, email <a href="mailto:editors@snipettemag.com" class="text-orange-300">editors@snipettemag.com</a> to know more</p> <p class="text-sm text-orange-200 text-center sm:text-left m-3">Or, email <a href="mailto:editors@snipettemag.com" class="text-orange-300">editors@snipettemag.com</a> to know more</p>
</div> </div>
</div> </div>
</div> </div>