mirror of
https://github.com/aurora-dot/pastel.codes.git
synced 2025-09-15 09:53:28 +01:00
Switch to tailwind (#16)
* Add tailwind to project * Adapt previous design into tailwind * Remove bootstrap * Fix docker steps
This commit is contained in:
@@ -4,57 +4,55 @@ block head
|
||||
script(src='https://hcaptcha.com/1/api.js' async='' defer='defer')
|
||||
|
||||
block nav-links
|
||||
li.nav-item
|
||||
a.nav-link(href='/')
|
||||
a(href='/')
|
||||
li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
|
||||
span Home
|
||||
li.nav-item
|
||||
a.nav-link(href='/about')
|
||||
a(href='/about')
|
||||
li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
|
||||
span About
|
||||
li.nav-item
|
||||
a.nav-link(href='#')
|
||||
a(href='#')
|
||||
li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
|
||||
span CV
|
||||
li.nav-item
|
||||
a.nav-link(href='https://github.com/aurora-dot')
|
||||
a(href='https://github.com/aurora-dot')
|
||||
li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
|
||||
span Projects
|
||||
li.nav-item
|
||||
a.nav-link(href='https://blog.pastel.codes')
|
||||
a(href='https://blog.pastel.codes')
|
||||
li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
|
||||
span Blog
|
||||
li.nav-item.active
|
||||
a.nav-link(href='#')
|
||||
a(href='#')
|
||||
li(class="py-3 bg-black text-green hover:bg-pink hover:text-black transition duration-500 ease-in-out")
|
||||
span Contact
|
||||
|
||||
block content
|
||||
.container
|
||||
.row
|
||||
.col
|
||||
h1
|
||||
span Contact.
|
||||
.row
|
||||
.col
|
||||
form#contact-form(action='/contact' method='post' role='form')
|
||||
.form-group
|
||||
label Name
|
||||
.form-row
|
||||
.col
|
||||
input#fname(name='firstname' class="form-control" type='text' placeholder='First name' required="true" pattern="^[\\w'\\-,.][^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]]{2,}$")
|
||||
.col
|
||||
input#lname(name='lastname' class="form-control" type='text' placeholder='Last name' required="true" pattern="^[\\w'\\-,.][^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]]{2,}$")
|
||||
div.w-full
|
||||
div
|
||||
h1.font-sans.text-6xl.wavy.mb-10 Contact.
|
||||
|
||||
.form-group
|
||||
label(for='email') Email
|
||||
input#email(name='email' class="form-control" type='text' placeholder='Email (example@email.com)' required='true' pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")
|
||||
.form-group
|
||||
label(for='message') Message
|
||||
textarea#message(name='message' class="form-control" placeholder='Enter your message here' rows='3' required='true')
|
||||
.form-group(style="margin-bottom: 0.5rem")
|
||||
.h-captcha(data-sitekey='49abba50-1813-4ab3-acbf-2a8bfff1f7c3')
|
||||
button(type='submit' class="button-c") Submit
|
||||
div
|
||||
form#contact-form(action='/contact' method='post' role='form')
|
||||
div.mb-5
|
||||
label Name
|
||||
div(class="sm:flex sm:flex-row")
|
||||
.flex.w-full
|
||||
input#fname(class="w-full border-2 border-pink bg-black p-2 text-base" name='firstname' class="form-control" type='text' placeholder='First name' required="true")
|
||||
div(class="mb-3 sm:mb-0 sm:ml-5")
|
||||
.flex.w-full
|
||||
input#lname(class="w-full border-2 border-pink bg-black p-2 text-base" name='lastname' class="form-control" type='text' placeholder='Last name' required="true")
|
||||
|
||||
.row
|
||||
.col
|
||||
if message
|
||||
#contact-message
|
||||
p=message
|
||||
if success
|
||||
p=success
|
||||
span#email=email
|
||||
div.mb-5
|
||||
label(for='email') Email
|
||||
input#email(class="w-full border-2 border-pink bg-black p-2 text-base" name='email' class="form-control" type='text' placeholder='Email (example@email.com)' required='true' pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")
|
||||
div.mb-5
|
||||
label(for='message') Message
|
||||
textarea#message(class="w-full border-2 border-pink bg-black p-2 text-base" name='message' class="form-control" placeholder='Enter your message here' rows='3' required='true')
|
||||
div.mb-5
|
||||
.h-captcha(data-sitekey='49abba50-1813-4ab3-acbf-2a8bfff1f7c3')
|
||||
button(type='submit' class="rounded-lg px-3 py-2 bg-pink text-black text-lg hover:ring-pink hover:ring-2 hover:bg-black hover:text-pink") Submit
|
||||
|
||||
div
|
||||
if message
|
||||
#contact-message
|
||||
p=message
|
||||
if success
|
||||
p=success
|
||||
span#email=email
|
||||
|
Reference in New Issue
Block a user