portfolio-website/src/components/CataloguePage.vue

<style scoped>

* {
    border: 0px black solid;
}

.project_title {
  font-size: 40px;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
  padding-bottom: 40px;
  padding-top: 100px;
}

.description_text {
  font-size: 15px;
  font-family: "Roboto Mono", monospace;
  padding-bottom: 10px;
}

.tags {
  padding-top: 10px;
  font-size: 15px;
  font-style: italic;
  font-family: "Roboto Mono", monospace;

}

a:hover {
  color: hotpink;
  text-decoration: none;

}

a {
  color: gray;
}

.content {
  padding-bottom: 40px;
}
</style>

<template>
  <b-container fluid>
    <MenuBar/>
    <b-row>
      <b-col md="12">
        <p class="project_title">Upsetting Settings Catalogue</p>
      </b-col>
    </b-row>



    <b-row class='content'>
      <b-col md="4">
        <div class="description_text">
        <p class="tags">Publication, graduation catalogue</p>
        <p>The Upsetting Settings Catalogue presents two years' worth of work from the 2019 graduates of the Piet Zwart Institute, Experimental Publishing. The publication was launched within the graduation show Upsetting Settings, at UBIK Rotterdam. The concept behind <i>Upsetting settings</i> arises from the defaults of technology. In every system there are settings predefined by its creators, that most of the time stay untouched by us, as users. It's their default, not ours, but it's up to us to change it. Society is made of similar preset frameworks that we take for granted. The projects in this catalogue engage with these different default modes and intervene in their core structure/source/root.
        </p>
        <p>This publication was developed together with Natasha Berting, Angeliki Diakrousi, Joca van der Horst, Alex Roidl, and Zalán Szakács.</p>


      </div>
      </b-col>

      <b-col md="4">
        <b-img class="img-fluid" src="media/catalogue/catalogue.png"></b-img>
        <p></p>
        <b-img class="img-fluid" src="media/catalogue/catalogue1.png"></b-img>
      </b-col>
      <b-col md="4">
      <b-img class="img-fluid" src="media/catalogue/ounupo.png"></b-img>
      <p></p>
      <b-img class="img-fluid" src="media/catalogue/timetoeat.png"></b-img>
      </b-col>

    </b-row>

  </b-container>

</template>

<script>
import MenuBar from './MenuBar'
export default {
    name: 'CataloguePage',
    data: function() {
        return {
        }
    },
    components: {
        MenuBar
    }
}

</script>