diff --git a/12-order-summary-component-thymeleaf/README.org b/12-order-summary-component-thymeleaf/README.org index 817240d..7ed7110 100644 --- a/12-order-summary-component-thymeleaf/README.org +++ b/12-order-summary-component-thymeleaf/README.org @@ -23,15 +23,16 @@ Users should be able to: :PROPERTIES: :CUSTOM_ID: screenshot :END: -[[./screenshot.png]] +[[screenshot-desktop.png]] +[[screenshot-mobile.png]] *** Links :PROPERTIES: :CUSTOM_ID: links :END: -- Solution URL: [[https://your-solution-url.com][Add solution URL here]] -- Live Site URL: [[https://your-live-site-url.com][Add live site URL - here]] +- Solution URL +- [[https://efim-frontentmentor-order-summary.onrender.com/][Live Site URL]] + Free instance on render.com is turned off after 15 minutes of inactivity, please give the server a moment to start up if you're visiting it at the moment of being turned off ** My process :PROPERTIES: @@ -42,16 +43,11 @@ Users should be able to: :CUSTOM_ID: built-with :END: - Semantic HTML5 markup -- CSS custom properties -- Flexbox -- CSS Grid +- Tailwincss - Mobile-first workflow -- [[https://reactjs.org/][React]] - JS library -- [[https://nextjs.org/][Next.js]] - React framework -- [[https://styled-components.com/][Styled Components]] - For styles +- SSR in Scala & Cask webserver +- Thymeleaf templates -*Note: These are just examples. Delete this note and replace the list -above with your own choices* **** running during development installing "sbt-revolver": #+begin_src scala @@ -82,9 +78,10 @@ will look for file in "src/main/resources/templates/index.html" to treat as a te **** with these html templates I can start learning and using Emmet mode in Emacs https://github.com/smihica/emmet-mode -**** importing Thymeleaf template - +**** Importing Thymeleaf template There are other methods to include templates like th:replace and th:include, which have slightly different behaviours. th:insert keeps the host tag (the div in your case), th:replace replaces the whole host tag with the fragment, and th:include replaces the inner content of the host tag with the fragment. + +So i can actually have the "Order Summary" as reusable part. **** getting responsive background image with Tailwincss #+begin_src html