{"id":438,"date":"2024-12-09T18:58:31","date_gmt":"2024-12-09T18:58:31","guid":{"rendered":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/?p=438"},"modified":"2025-04-02T02:46:52","modified_gmt":"2025-04-02T02:46:52","slug":"web-form-with-complex-alignments","status":"publish","type":"post","link":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/2024\/12\/09\/web-form-with-complex-alignments\/","title":{"rendered":"Web Form with Complex Alignments"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"438\" class=\"elementor elementor-438\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7830c0 e-flex e-con-boxed e-con e-parent\" data-id=\"c7830c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d64ca44 elementor-widget elementor-widget-image\" data-id=\"d64ca44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1736\" src=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-scaled.jpg\" class=\"attachment-full size-full wp-image-153\" alt=\"web mockup 1\" srcset=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-scaled.jpg 2560w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-300x203.jpg 300w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-1024x694.jpg 1024w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-768x521.jpg 768w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-1536x1042.jpg 1536w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-2048x1389.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b0a41d e-flex e-con-boxed e-con e-parent\" data-id=\"6b0a41d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-434fdb7 elementor-widget elementor-widget-spacer\" data-id=\"434fdb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9b5645 elementor-widget elementor-widget-heading\" data-id=\"b9b5645\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Web Form with Complex Alignments<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3f8efd elementor-widget elementor-widget-text-editor\" data-id=\"b3f8efd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This project, created in <strong>Web Design II <\/strong>during<strong> Semester 2<\/strong>, focused on building a fully responsive website for my fictional brand, <strong>Orange Dude<\/strong>, a playful concept designed to support orange farms. Using <strong>Adobe Dreamweaver<\/strong>, I coded the entire site from scratch with HTML, CSS, and JavaScript. The brand sold <strong>Orange Dude merchandise<\/strong>, shared <strong>fun orange jokes<\/strong>, and provided <strong>factual information about oranges<\/strong> to promote awareness. The animated tagline, <strong>&#8220;Ready to get juicy?&#8221;<\/strong>, added a dynamic and engaging touch to the site, perfectly reflecting the brand\u2019s vibrant personality.<\/p><p>The website featured two key forms: a playful animated login form and a clean, accessible contact form. I focused on <strong>UI\/UX design<\/strong> and accessibility to make sure everything was intuitive and easy for anyone to use. Both forms worked seamlessly across desktops, tablets, and phones. To be honest, it was a bit of a pain to put together\u2026 but this project taught me valuable lessons about responsive design, accessibility, and crafting experiences that balance creativity with functionality.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6aa47f2 elementor-widget elementor-widget-spacer\" data-id=\"6aa47f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-850fe83 e-flex e-con-boxed e-con e-parent\" data-id=\"850fe83\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69af7be elementor-widget elementor-widget-image\" data-id=\"69af7be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"1000\" src=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup2-819x1024.jpg\" class=\"attachment-large size-large wp-image-154\" alt=\"web mockup 2\" srcset=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup2-819x1024.jpg 819w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup2-240x300.jpg 240w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup2-768x960.jpg 768w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup2-1229x1536.jpg 1229w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup2-1638x2048.jpg 1638w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup2-scaled.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0a1e2e elementor-widget elementor-widget-spacer\" data-id=\"f0a1e2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1696f0f e-flex e-con-boxed e-con e-parent\" data-id=\"1696f0f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5722cd elementor-widget elementor-widget-text-editor\" data-id=\"f5722cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here is the desktop version of my login form.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-baa9efd elementor-widget elementor-widget-image\" data-id=\"baa9efd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2560\" height=\"1483\" src=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-desktop-scaled.jpg\" class=\"attachment-full size-full wp-image-586\" alt=\"web form desktop\" srcset=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-desktop-scaled.jpg 2560w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-desktop-300x174.jpg 300w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-desktop-1024x593.jpg 1024w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-desktop-768x445.jpg 768w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-desktop-1536x890.jpg 1536w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-desktop-2048x1186.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ec3f9c elementor-widget elementor-widget-spacer\" data-id=\"0ec3f9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6c3744e e-flex e-con-boxed e-con e-parent\" data-id=\"6c3744e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9637296 elementor-widget elementor-widget-text-editor\" data-id=\"9637296\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here is the mobile version of my login form.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed2a976 elementor-widget elementor-widget-image\" data-id=\"ed2a976\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"2560\" src=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-phone-scaled.jpg\" class=\"attachment-full size-full wp-image-585\" alt=\"web form mobile\" srcset=\"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-phone-scaled.jpg 661w, https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/12\/WebForm-phone-529x2048.jpg 529w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b269128 elementor-widget elementor-widget-spacer\" data-id=\"b269128\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Web Form with Complex Alignments This project, created in Web Design II during Semester 2, focused on building a fully responsive website for my fictional brand, Orange Dude, a playful concept designed to support orange farms. Using Adobe Dreamweaver, I coded the entire site from scratch with HTML, CSS, and JavaScript. The brand sold Orange [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":153,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[13],"class_list":["post-438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-portfolio","tag-semester-2"],"jetpack_featured_media_url":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/wp-content\/uploads\/2024\/11\/WebForm-mockup1-scaled.jpg","_links":{"self":[{"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/comments?post=438"}],"version-history":[{"count":5,"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/438\/revisions"}],"predecessor-version":[{"id":1223,"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/438\/revisions\/1223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/media?parent=438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/categories?post=438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jana-skarpas.graphicandwebdesign.ca\/index.php\/wp-json\/wp\/v2\/tags?post=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}