summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMatthew Lemon <y@yulqen.org>2024-03-23 16:31:03 +0000
committerMatthew Lemon <y@yulqen.org>2024-03-23 16:31:03 +0000
commitb108f65d322f7bd5fbfaec2abd505f3a01893be5 (patch)
tree78f93bbb93fcc568885f3c9f3e30013b6e827ca1
parent7d71b0fec148d3262c6e77c2dd8604be7132d594 (diff)
refinements to the endorsements
-rw-r--r--img/lion_decorations.jpgbin109862 -> 211246 bytes
-rw-r--r--index.html27
-rw-r--r--style.css153
3 files changed, 81 insertions, 99 deletions
diff --git a/img/lion_decorations.jpg b/img/lion_decorations.jpg
index 8bed554..cb79c8d 100644
--- a/img/lion_decorations.jpg
+++ b/img/lion_decorations.jpg
Binary files differ
diff --git a/index.html b/index.html
index e92dec4..24acb24 100644
--- a/index.html
+++ b/index.html
@@ -156,11 +156,11 @@
<div class="cell">
<h2>Endorsements</h2>
- <div class="reviews_grid">
+ <div>
<!-- Review quote -->
<div>
- <img src="img/lion_decorations.jpg" alt="Photograph of three hand-made decorations presented in front of children's books written by author Helen Stephens."/>
+ <img class="hs_image" src="img/lion_decorations.jpg" alt="Photograph of three hand-made decorations presented in front of children's books written by author Helen Stephens."/>
</div>
<div class="reviews_quote_container">
<q class="reviews_quote">
@@ -179,15 +179,9 @@
- Tunde (5 out of 5 stars on Etsy)
</p>
</div>
- <div>
- <img src="img/alphabet_tunde.jpg" alt="Photograph of a hand-sewn alphabet - each letter of is decorated with a different object representing the letter."/>
- </div>
<!-- End Review quote -->
<!-- Review quote - Amy -->
- <div>
- <img src="img/Alphabets for review.JPG" alt="Photograph of a hand-sewn alphabet - each letter of is decorated with a different object representing the letter."/>
- </div>
<div class="reviews_quote_container">
<q class="reviews_quote">
Watching and following the progress of this banner from day one was wonderful. The talent and hours that have gone into this are second to none- such a beautiful piece. I'm currently redecorating my kiddos bedroom and then this will hang proudly above their beds 😍 My favourite letter is Q for Queen... The detail is incredible. This banner is my favourite hand crafted product that I've ever bought.
@@ -198,30 +192,17 @@
</div>
<!-- End Review quote -->
-
-
-
- <!-- Review quote -->
- <div>
- <img src="img/alphabet_erica_hanging.jpg" alt="Photograph of a hand-sewn alphabet hanging on a wall in a bedroom."/>
- </div>
- <div style="border: red;">
- <img style="margin-top: 100px; width: auto;" src="img/alphabet_erica.jpg" alt="Photograph of a hand-sewn alphabet - each letter of is decorated with a different object representing the letter."/>
- </div>
- <!-- End Review quote -->
- </div>
-
<!-- Review quote outside of grid -->
<div class="reviews_quote_container">
<q class="reviews_quote">
- I coveted this item from the first time I saw one of the letters posted on Instagram during its creation. Loved watching the creative process as each of the perfectly crafted letters was unveiled - the level of detail and precision in the work is exceptional. If possible, the reality when I was lucky enough to purchase this work was better than my expectations. The level of workmanship blew me away - this piece was obviously made with a huge amount of love and know we feel the same about the finished work which will be treasured here. The vibrant colour palette is just perfect, exactly my cup of tea and coordinates perfectly with my twins rainbow themed bedroom, and beautifully crafted felt pictures on the letters provide a great talking point. Great communication and speedy delivery. Thank you Joanna, simply perfect.
+ I coveted this item from the first time I saw one of the letters posted on Instagram during its creation. Loved watching the creative process as each of the perfectly crafted letters was unveiled - the level of detail and precision in the work is exceptional. If possible, the reality when I was lucky enough to purchase this work was better than my expectations. The level of workmanship blew me away - this piece was obviously made with a huge amount of love and know we feel the same about the finished work which will be treasured here. Thank you Joanna, simply perfect.
</q>
<p class="reviews_grid_annotation">
- Erica (5 out of 5 stars on Etsy)
</p>
</div>
<!-- End Review quote -->
-
+ </div>
</div>
<div class="footer">
diff --git a/style.css b/style.css
index fb3138a..c45b030 100644
--- a/style.css
+++ b/style.css
@@ -171,66 +171,6 @@ img {
margin: 10px 20px 20px 0px;
}
-/* Media query for narrow screens */
-@media only screen and (max-width: 600px) {
- .inner-grid_1 {
- grid-template-columns: 1fr; /* Switch to single column layout */
- }
- .inner-grid_1 p {
- text-align: left;
- font-size: 1.5rem;
- padding-top: 1px;
- margin-bottom: 5px;
- }
- .inner-grid_1 p#sewing-blurb {
- font-size: 1.5rem;
- color: darkgray;
- padding-right: 10px;
-}
- .inner-grid_2 {
- grid-template-columns: 1fr; /* Switch to single column layout */
- }
- .container {
- max-width: 97%;
- }
- .cell {
- padding-left: 20px;
- }
- img {
- padding: 0;
- }
- .divider {
- border-width: 0;
- }
-}
-
-@media only screen and (max-width: 1200px) {
- .inner-grid_1 p {
- text-align: left;
- font-size: 1.8rem;
- padding-top: 10px;
- padding-right: 20px;
- }
- .inner-grid_1 p#sewing-blurb {
- font-size: 1.4rem;
- padding-top: 5px;
- padding-right: 20px;
- }
-}
-
-@media only screen and (max-width: 900px) {
- .inner-grid_1 p {
- text-align: left;
- font-size: 1.3rem;
- padding-top: 10px;
- padding-right: 20px;
- }
-
- .inner-grid_1 p#sewing-blurb {
- font-size: 1.2rem;
- padding-top: 5px;
- }
-}
a {
font-size: inherit;
@@ -278,21 +218,6 @@ header {
color: #657c76;
}
-.reviews_grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 50px;
- margin: 22px 10px 10px 0px;
-}
-
-.reviews_img {
- box-shadow: 2px 2px 2px lightgray;
- border-radius: 5px;
- margin-right: 20px;
- max-width: 600px;
- height: auto;
-}
-
.reviews_quote {
font-size: 1.3rem;
font-family: "Franklin-Italic";
@@ -304,14 +229,24 @@ header {
padding-bottom:100px
}
+.hs_image {
+ margin-left: auto;
+ margin-right: 20px;
+ margin-top: 20px;
+ max-width: 95%;
+}
+
/* this means a p subling to reviews_quote */
.reviews_quote ~ p {
color: darkgray;
padding: 10px 0px;
+ margin-bottom: 20px;
}
.reviews_quote_container {
- margin-top: 30px;
+ padding: 0px 100px 0px 100px;
+ border-bottom: 5px solid #f4f4f4;
+ margin: 30px 25px 20px 25px;
}
.footer {
@@ -325,3 +260,69 @@ header {
.footer > p {
padding: 5px;
}
+
+/* Media query for narrow screens */
+@media only screen and (max-width: 600px) {
+ .inner-grid_1 {
+ grid-template-columns: 1fr; /* Switch to single column layout */
+ }
+ .inner-grid_1 p {
+ text-align: left;
+ font-size: 1.5rem;
+ padding-top: 1px;
+ margin-bottom: 5px;
+ }
+ .inner-grid_1 p#sewing-blurb {
+ font-size: 1.5rem;
+ color: darkgray;
+ padding-right: 10px;
+}
+ .inner-grid_2 {
+ grid-template-columns: 1fr; /* Switch to single column layout */
+ }
+ .container {
+ max-width: 97%;
+ }
+ .cell {
+ padding-left: 20px;
+ }
+ img {
+ padding: 0;
+ }
+ .reviews_quote_container {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+}
+
+@media only screen and (max-width: 1200px) {
+ .inner-grid_1 p {
+ text-align: left;
+ font-size: 1.8rem;
+ padding-top: 10px;
+ padding-right: 20px;
+ }
+ .inner-grid_1 p#sewing-blurb {
+ font-size: 1.4rem;
+ padding-top: 5px;
+ padding-right: 20px;
+ }
+}
+
+@media only screen and (max-width: 900px) {
+ .inner-grid_1 p {
+ text-align: left;
+ font-size: 1.3rem;
+ padding-top: 10px;
+ padding-right: 20px;
+ }
+
+ .inner-grid_1 p#sewing-blurb {
+ font-size: 1.2rem;
+ padding-top: 5px;
+ }
+ .reviews_quote_container {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+}