diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 4e9253c..e619531 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# pimp-soup +# Pimp my Soupboat -Little workshop on how to customize the soupboat \ No newline at end of file +Hello this is a little workshop to cover the basics of HTML + CSS + JS in order to customize our Soupboat⛵ diff --git a/index.html b/index.html index 7c437dd..5e7cbcd 100644 --- a/index.html +++ b/index.html @@ -1,54 +1,101 @@ + + + + + + Pimp My Soupboat + - - - - - Pimp My Soupboat - + + - - +
+

Pimp my Soupboat 🍜

+

+ Hello this is a little workshop to cover the basics of HTML + CSS + JS in order to + customize our Soupboat⛵ +

-

Pimp my Soupboat 🍜

-

- Hello this is a little workshop to cover the basics of HTML + CSS + JS in order to customize our Soupboat⛵ -

+

Table of contents

+
    +
  1. Workspace, or: where do we code
    2. +
  2. Files in the Soupboat
    3. +
  3. HTML (for marking up contents)
    4. +
  4. CSS (for styling our website)
    5. +
  5. JS (for making things dynamic, i.e. magic)
    6. +
  6. References
    7. +
+
+

Workspace, or: where do we code

+

Coding in Jupiter editor

+ -

Table of contents

-
    -
  1. Workspace, or: where do we code
    2. -
  2. Files in the Soupboat
    3. -
  3. HTML (for marking up contents)
    4. -
  4. CSS (for styling our website)
    5. -
  5. JS (for making things dynamic, i.e. magic)
    6. -
  6. References
    7. -
+

Coding in a text editor (example: VS Code)

+ +
-

Workspace, or: where do we code

-

- Coding in -

+
+

Files in the Soupboat

-

Files in the Soupboat

+

+ In Jupiter Lab everyone has 2 main folders: public_html and + shared. The former takes you to your personal page, while the + latter permits you to access to the common areas of the Soupboat. +

+

Remember that web URLs are just like paths on your computer.

+
-

HTML (for marking up contents)

- -

CSS (for styling our website)

- -

JS (for making things dynamic, i.e. magic)

- -

References

- - - - - \ No newline at end of file +
+

HTML (for marking up contents)

+
+
+

CSS (for styling our website)

+
+
+

JS (for making things dynamic, i.e. magic)

+
+
+

References

+ +
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..459df65 --- /dev/null +++ b/style.css @@ -0,0 +1,39 @@ +html, +body { + margin: 0; + padding: 24px; + + font-size: 24px; + font-family: Arial, Helvetica, sans-serif; + line-height: 1.6; + + color: #333; +} + +main { + max-width: 1200px; + margin: 0 auto; +} + +h1 { + text-align: center; +} + +a { + color: #333; +} + +.pro { + color: green; +} + +.cons { + color: tomato; +} + +.chapter { + padding: 24px; + margin: 32px 0; + + background-color: #c6e2ff; +} diff --git a/template/assets/pandagiri.jpg b/template/assets/pandagiri.jpg new file mode 100644 index 0000000..af987a8 Binary files /dev/null and b/template/assets/pandagiri.jpg differ diff --git a/template/index.html b/template/index.html new file mode 100644 index 0000000..d15803c --- /dev/null +++ b/template/index.html @@ -0,0 +1,18 @@ + + + + + + + + Onigiri + + +

Onigiri is...

+ Cute panda or tasty onigiri +

+ Onigiri, also known as omusubi, nigirimeshi, or rice ball, is a Japanese food made from + white rice formed into triangular or cylindrical shapes and often wrapped in nori. +

+ + diff --git a/template/style.css b/template/style.css new file mode 100644 index 0000000..d926258 --- /dev/null +++ b/template/style.css @@ -0,0 +1,4 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 24px; +}