diff --git a/blog/about.html b/blog/about.html new file mode 100644 index 0000000..ce32dfb --- /dev/null +++ b/blog/about.html @@ -0,0 +1,32 @@ + + + + + + My About Page + + +

My Blog

+ Go home +

About Me

+

+ Hi! I'm David Thomson, and I'm a web developer. I love creating websites + and learning new things. I'm so excited to share my blog with you! +

+

+ I'm currently working on a few projects, including a personal blog and a + portfolio site. I'm also learning new technologies like React and Node.js. +

+

+ When I'm not coding, I enjoy hiking, reading, and spending time with my + family. I'm always looking for new adventures and challenges, so feel free + to reach out if you have any ideas! +

+

My Career so far

+ + + diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..a065585 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,80 @@ + + + + + + My Super Cool Blog + + +

My Blog

+ About + +

Intro

+

+ Welcome to my blog! I'm so glad you're here. I'll be posting about all + sorts of things, so be sure to check back often. +

+ +

Latest Posts

+
+

My First Post

+

David Thomson

+

23-05-2024

+ placeholder +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + suscipit, nunc nec lacinia lacinia, nunc turpis ultricies nunc, nec + fermentum nunc metus nec nunc. Nullam suscipit, nunc nec lacinia + lacinia, nunc turpis ultricies nunc, nec fermentum nunc metus nec nunc. +

+
+
+

My Second Post

+

David Thomson

+

23-05-2024

+ placeholder +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + suscipit, nunc nec lacinia lacinia, nunc turpis ultricies nunc, nec + fermentum nunc metus nec nunc. Nullam suscipit, nunc nec lacinia + lacinia, nunc turpis ultricies nunc, nec fermentum nunc metus nec nunc. +

+
+
+

My Third Post

+

David Thomson

+

23-05-2024

+ placeholder +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + suscipit, nunc nec lacinia lacinia, nunc turpis ultricies nunc, nec + fermentum nunc metus nec nunc. Nullam suscipit, nunc nec lacinia + lacinia, nunc turpis ultricies nunc, nec fermentum nunc metus nec nunc. +

+
+
+

My Fourth Post

+

David Thomson

+

23-05-2024

+ placeholder +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + suscipit, nunc nec lacinia lacinia, nunc turpis ultricies nunc, nec + fermentum nunc metus nec nunc. Nullam suscipit, nunc nec lacinia + lacinia, nunc turpis ultricies nunc, nec fermentum nunc metus nec nunc. +

+
+
+

My Fifth Post

+

David Thomson

+

23-05-2024

+ placeholder +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + suscipit, nunc nec lacinia lacinia, nunc turpis ultricies nunc, nec + fermentum nunc metus nec nunc. Nullam suscipit, nunc nec lacinia + lacinia, nunc turpis ultricies nunc, nec fermentum nunc metus nec nunc. +

+
+ + diff --git a/checkout/index.html b/checkout/index.html new file mode 100644 index 0000000..1e19537 --- /dev/null +++ b/checkout/index.html @@ -0,0 +1,98 @@ + + + + + + Coffee Masters + + + + + + + +
+
+

ITEMS

+ +
+
+
+

NAME

+
+ + +
+
+
+

PAYMENT

+
+ + +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + +
Subtotal$19.27
Tax$0.96
Total$20.23
+ +
+
+ + diff --git a/checkout/style.css b/checkout/style.css new file mode 100644 index 0000000..8132471 --- /dev/null +++ b/checkout/style.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + background-color: #efefef; + font-family: 'Open Sans', sans-serif; +} + +.page { + display: grid; + row-gap: 30px; + column-gap: 30px; + width: 100%; + padding: 30px; + margin: 0 auto; + grid-template-areas: + "order payment" + "total total"; + grid-template-columns: 1fr 1fr; +} + +.main-nav { + background-color: #43281c; + color: #fbf2c0; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; + font-weight: normal; +} + +.logo { + height: 25px; + position: relative; + top: 3px; +} + +.box { + background-color: #eee1d5; + border-radius: 5px; + box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); + padding: 15px; + margin-bottom: 20px; + width: 100%; +} + +.box-title { + color: #885a2d; + font-weight: normal; + font-size: 16px; +} + +.order { + grid-area: order; +} + +.payment { + grid-area: payment; +} + +.total { + grid-area: total; +} + +.items { + list-style: none; + padding: 0; + margin: 0; +} + +.item { + border-bottom: 2px solid #ddb892; + display: grid; + padding: 10px 0; + grid-template-columns: 1fr 8fr 1fr; + grid-template-areas: + "quantity title price" + "quantity options price"; + row-gap: 8px; +} + +.item:last-child { + border-bottom: none; +} + +.item-quantity { + grid-area: quantity; +} + +.item-title { + grid-area: title; + font-weight: bold; +} + +.item-price { + grid-area: price; + font-weight: bold; +} + +.item-options-list { + grid-area: options; + color: #b08968; + list-style: none; + margin: 0; + padding: 0; + font-size: 14px; +} + +.item-option { + margin-bottom: 5px; +} + +.input-group { + position: relative; + margin-bottom: 20px; +} + +.user-input { + background-color: rgba(0,0,0,0); + border: 2px solid #885a2d; + padding: 8px; + border-radius: 100px; + width: 100%; + text-indent: 18px; + font-size: 18px; +} + +.user-input-label { + color: #885a2d; + background-color: #eee1d5; + font-size: 11px; + position: absolute; + left: 25px; + top: -7px; + padding: 0 2px; +} + +.short-input { + max-width: 200px; +} + +.total { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.totals-table { + width: 100%; + max-width: 500px; + margin-bottom: 30px; +} + +.totals-table td { + padding: 10px; +} + +.totals-table td:last-child { + text-align: right; +} + +.final-totals { + font-weight: bold; +} + +.checkout { + background-color: #deb993; + border: none; + padding: 10px 30px; + width: 100%; + border-radius: 100px; + font-size: 16px; +} \ No newline at end of file diff --git a/js-experiment/experiments.js b/js-experiment/experiments.js new file mode 100644 index 0000000..34391bb --- /dev/null +++ b/js-experiment/experiments.js @@ -0,0 +1,10 @@ +const numberOfTimesToRepeat = 10; +const character = "🐶"; + +let answer = ""; + +for (let i = 0; i < numberOfTimesToRepeat; i++) { + answer.concat(character); +} + +console.log(answer); diff --git a/js-experiment/index.html b/js-experiment/index.html new file mode 100644 index 0000000..998ca2e --- /dev/null +++ b/js-experiment/index.html @@ -0,0 +1,12 @@ + + + + + + JS Experiments + + +

hello!!!

+ + +