diff options
| -rw-r--r-- | static/base.jpeg | bin | 0 -> 92603 bytes | |||
| -rw-r--r-- | static/crew.jpeg | bin | 0 -> 261527 bytes | |||
| -rw-r--r-- | static/index.css | 38 | ||||
| -rw-r--r-- | views/index.html | 53 |
4 files changed, 91 insertions, 0 deletions
diff --git a/static/base.jpeg b/static/base.jpeg Binary files differnew file mode 100644 index 0000000..c51aca5 --- /dev/null +++ b/static/base.jpeg diff --git a/static/crew.jpeg b/static/crew.jpeg Binary files differnew file mode 100644 index 0000000..9f93e76 --- /dev/null +++ b/static/crew.jpeg diff --git a/static/index.css b/static/index.css index 0838304..504b859 100644 --- a/static/index.css +++ b/static/index.css @@ -64,3 +64,41 @@ .achievements__item__text { } + +.boxes { + /* The columns should be aligned in the center. + * N.B. margin matches padding of achievements. */ + max-width: 600px; + margin: 2rem auto; +} + +.boxes__column { + --gap: 1rem; + width: calc(50% - var(--gap) / 2); +} + +.boxes__column--right { + float: right; +} + +.boxes__column--left { + float: left; + margin-right: var(--gap); +} + +.boxes__item { + +} + +.boxes__header { + +} + +.boxes__body-text { + line-height: 1.5; +} + +.boxes__image { + max-width: 100%; + height: auto; +}
\ No newline at end of file diff --git a/views/index.html b/views/index.html index 245e346..84de07f 100644 --- a/views/index.html +++ b/views/index.html @@ -32,5 +32,58 @@ {# TODO: Add a series of boxes, each either an image or some text describing the guild. We will create two columns and have a kind of asymmetric layout where the two columns don't line up row-wise. #} + + <div class="boxes"> + <div class="boxes__column boxes__column--left"> + <section class="boxes__item"> + <h2 class="boxes__header">Raiding</h2> + <p class="boxes__body-text"> + We love raiding. + In the clan we have a good culture of doing bi-weekly raids. + It's not just about the loot; + raids provide opportunities for bonding + and leveling up less skilled players. + </p> + </section> + <section class="boxes__item"> + <h2 class="boxes__header">Community</h2> + <p class="boxes__body-text"> + We are probably the #1 guild in the EU at socializing. + Being nice to other guildes and building inter-guild community is one of the core values of our guild. + Petty behavior and trolling only serves to antagonize other players + and worsens the experience for all players in the long run. + As such, we have a strict no-troll policy. + </p> + </section> + <section class="boxes__item"> + <h2 class="boxes__header">Our base</h2> + <img class="boxes__image" src="/static/base.jpeg" width="1200" height="675" alt="A very dark and mysterious palace"> + </section> + </div> + <div class="boxes__column boxes__column--right"> + <section class="boxes__item"> + <h2 class="boxes__header">The crew</h2> + <img class="boxes__image" src="/static/crew.jpeg" width="1600" height="1200" alt="A crew of high-level WoW players"> + </section> + <section class="boxes__item"> + <h2 class="boxes__header">Coins</h2> + <p class="boxes__body-text"> + We love coins and buying stuff. + All guild members contribute to the guild treasury according to their means + and members are compensated according to their needs. + </p> + </section> + <section class="boxes__item"> + <h2 class="boxes__header">Slaying monsters</h2> + <p class="boxes__body-text"> + We view it as the moral duty of any guild worth its salt to slay monsters. + Slaying monsters not only gives XP but, + much more importantly, + keeps the world safe for non-combat based players. + It is therefore totally in line with out universalist philosophy to slay as many monsters as we can. + </p> + </section> + </div> + </div> {% endblock %} |
