add contact form to accordion
This commit is contained in:
parent
84c80ab632
commit
6e13ac13b2
2 changed files with 33 additions and 20 deletions
|
@ -1,7 +1,7 @@
|
|||
main > .contact {
|
||||
.contact {
|
||||
max-width: var(--container-lg-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-2);
|
||||
padding: var(--spacing) 0;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
|
@ -26,8 +26,11 @@ main > .contact {
|
|||
border: 0;
|
||||
line-height: 1.3;
|
||||
display: block;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
@ -43,6 +46,8 @@ main > .contact {
|
|||
font-weight: 700;
|
||||
padding: var(--spacing) var(--spacing-2);
|
||||
display: block;
|
||||
background-size: 400% 100%;
|
||||
animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -128,6 +128,31 @@
|
|||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label for="bio-contact" class="accordion-title">
|
||||
<h3>Contact 聯絡</h3>
|
||||
<span class="accordion-caret animated-title"><span class="text"></span></span>
|
||||
</label>
|
||||
<input type="checkbox" id="bio-contact" class="accordion-checkbox">
|
||||
<div class="accordion-content">
|
||||
<div class="contact">
|
||||
{% if submitted %}
|
||||
Thanks for your message
|
||||
{% else %}
|
||||
<form method="post">
|
||||
<label for="input-email">Your Email</label>
|
||||
<input name="email" type="email" id="input-email" required>
|
||||
|
||||
<label for="input-msg">Message 訊息</label>
|
||||
<textarea name="message" id="input-msg" required></textarea>
|
||||
|
||||
<input type="submit" value="Send Message 傳送訊息">
|
||||
{% csrf_token %}
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br>
|
||||
|
@ -137,23 +162,6 @@
|
|||
|
||||
<p>本計畫由國立臺灣美術館策劃,文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
{% if submitted %}
|
||||
Thanks for your message
|
||||
{% else %}
|
||||
<h1>Contact 聯絡</h1>
|
||||
<form method="post">
|
||||
<label for="input-email">Your Email</label>
|
||||
<input name="email" type="email" id="input-email" required>
|
||||
|
||||
<label for="input-msg">Message 訊息</label>
|
||||
<textarea name="message" id="input-msg" required></textarea>
|
||||
|
||||
<input type="submit" value="Send Message 傳送訊息">
|
||||
{% csrf_token %}
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block end %}
|
||||
|
|
Loading…
Reference in a new issue