robur.coop/templates/our_work.html

<div class="our-work-page">
  <div class="section-header">
    <div class="container-fluid dark">
      <div class="container">
        <div class="col-md-12">
          <h2>Our approach</h2>
          <span class="manchet">
            <p>{{ synopsis }}</p>
          </span>
        </div>

        <div class="button-pair">
          <button class="read-more"><a href="#">Read more</a></button>
          <button class="contact-us"><a href="#contact">Contact us</a></button>
        </div>

      </div>
      <div class="background-image">
        <img src="{{ root }}/images/our_work_grafik.png" alt="pentagon-graphics">
      </div>
    </div>
  </div>

  <div class="section-1">
    <div class="container-fluid p0">
      <div class="container">
        <div class="col-md-12">
          {%- autoescape false -%}
	          {{ technologies.body }}
	        {% endautoescape -%}
        </div>
      </div>
    </div>
  </div>

  <div class="section-2">
    <div class="container-fluid">
      <div class="container">
        <div class="col-md-12 p0">
          <div class="col-md-6 column-1">
            <img src="{{ root }}/images/our_work_triangle.png" alt="triangle">
            <p class="underoverskrift"><b>OCaml</b></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p>
            <button class="read-more-btn"><a href="static.php">Read more</a></button>
          </div>
          <div class="col-md-6 column-2">
            <img src="{{ root }}/images/our_work_triangle.png" alt="triangle">
            <p class="underoverskrift"><b>MirageOS</b></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p>
            <button class="read-more-btn"><a href="static.php">Read more</a></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="section-3">
    <div class="container-fluid dark">
      <div class="container">
        {%- autoescape false -%}
	      {{ service.body }}
	      {% endautoescape -%}
        <div class="col-md-12 p0 img-row">
          <div class="col-md-4 p0">
            <object data="images/our_work.svg" type="image/svg+xml">
              <img src="{{ root }}/images/our_work.svg" alt="design-graphics" />
            </object>
            <p><b>Design</b></p>
          </div>

          <div class="col-md-4 p0">
            <img src="{{ root }}/images/our_work_graphics_2.png" alt="develop-graphics">
            <p><b>Develop</b></p>
          </div>

          <div class="col-md-4 p0">
            <img src="{{ root }}/images/our_work_graphics_3.png" alt="audit-graphics">
            <p><b>Audit</b></p>
          </div>
        </div>
        <button class="read-more-btn"><a href="static.php">Read more</a></button>
      </div>
    </div>
  </div>

  <div class="section-4">
    <div class="container-fluid">
      <div class="container">

        <div class="col-md-12 p0">
          <h2>Our projects</h2>
          <span class="manchet">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</p>
          </span>
        </div>
        <div class="col-md-12 p0 buttons">
          <button><a href="#">Bitcoin Piñata</a></button>
          <button><a href="#">DNS</a></button>
          <button><a href="#">OpenPGP</a></button>
          <button><a href="#">OpenVPN</a></button>
          <button><a href="#">CalDAV Server</a></button>
          <button><a href="#">Solo5</a></button>
          <button><a href="#">Firewall</a></button>
        </div>
      </div>
    </div>
  </div>

  <div class="section-5">
    <div class="container-fluid dark">
      <div class="container">

        <div class="col-md-12 p0">
          <h2>Publications and talks</h2>
          <span class="manchet">
            <p>We regularly give talks and write publications about our work, OCaml and MirageOS and other aspects of coding, security and computer science that we have expertise in. Below are some examples of these, if you are interested in having a Robur member speak at your event please reach out to us.</p>
          </span>
          <a href="talks_and_publications.php">See all publications and talks</a>
          <hr>
        </div>

        <div class="col-md-12 p0 first-block">

          <div class="col-md-6 p0 element-1">
            <p class="underoverskrift">HANNES MEHNERT</p>
            <p class="brødtekst"><b>Engineering with Logic: Rigorous Test-Oracle Specification and Validation for TCP/IP and the Sockets API (JACM vol 66, January 2019)</b></p>
            <a href="#" class="button">
              <figure><img src="{{ root }}/images/download-pil.png"></figure>
              <div class="text">Download</div>
            </a>
          </div>

          <div class="col-md-6 p0 element-2">
            <video poster="images/video-screenshot.png" controls>
              <div class="video-overlay"><img src="{{ root }}/images/video-dark-layer.png" alt="video-overlay"></div>
              <source src="#" type="video/mp4">
            </video>
          </div>
        </div>

        <div class="col-md-12 p0 second-block">

          <div class="col-md-6 p0 element-1">
            <p class="underoverskrift">MARTIN LUCINA</p>
            <p class="brødtekst"><b>Unikernels as Processes - ACM Symposium on Cloud Computing 2018</b></p>
            <a href="#" class="button">
              <figure><img src="{{ root }}/images/download-pil.png"></figure>
              <div class="text">Download</div>
            </a>
          </div>

          <div class="col-md-6 p0 element-2">
            <p class="underoverskrift">HANNES MEHNERT</p>
            <p class="brødtekst"><b>MirageOS: robust and secure services for the cloud</b></p>
            <p class="underoverskrift">CERN COMPUTING SEMINAR 2019</p>
            <p class="brødtekst">Presenting MirageOS and its advantages along with explaining several applications being developed within it.</p>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>