website-v2/templates/support/getting_started.html

{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Getting Started" %}{% endblock %}

{% block subnav %}
  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
    <a href="{% url 'support' %}" class="block md:inline">Support</a>
    <a href="{% url 'getting-started' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Getting Started</a>
    <a href="https://cppalliance.org/slack/" target="_blank" class="block md:inline">Join Slack</a>
  </div>
{% endblock %}

{% block content %}
  <div class="flex py-0 px-3 mb-3 md:py-6 md:px-0">

    <div class="hidden w-1/6 md:block">
      <ul class="py-8 space-y-4">
        <li><a href="#getting-started" class="text-orange">Getting Started</a></li>
        <li><a href="#windows">Windows</a></li>
        <li><a href="#unix">Unix</a></li>
      </ul>
    </div>

    <div class="w-full md:w-5/6">

      <div class="py-8 border-b md:w-full border-slate md:space-x-18" id="getting-started">

        <h2>Getting Started</h2>

        <div class="w-full md:w-1/2" id="supportStart"></div>

        <p>
          Welcome to the Boost libraries! By the time you've completed this tutorial, you'll be at least somewhat
          comfortable with the contents of a Boost distribution and how to go about using it.
        </p>

        <p>
          This document is designed to be an extremely gentle introduction, so we included a fair amount of material that may
          already be very familiar to you. To keep things simple, we also left out some information intermediate and
          advanced users will probably want. At the end of this document, we'll refer you on to resources that can help
          you pursue these topics further.
        </p>

        <p>
          We use one typographic convention that might not be immediately obvious: italic text in examples is meant as
          a descriptive placeholder for something else, usually information that you'll provide. For example:
        </p>

        <pre class="p-2 rounded-lg border bg-charcoal border-slate">
          <code>$ echo "My name is [your name]"</code>
        </pre>

      </div>

      <div class="py-8 border-b md:w-full border-slate md:space-x-18" id="windows">

        <h3>Getting Started On Microsoft Windows</h3>

        <p>
          Brief intro...Lorem ipsum dolor sit amet, consectetur adipiscing 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 fugiat nulla pariatur.
        </p>

        <div class="my-3">
          <a href="#" class="py-2 px-4 uppercase rounded-lg border text-orange border-slate">Start Now</a>
        </div>

      </div>

      <div class="py-8 md:w-full md:space-x-18" id="unix">

        <h3>Getting Started On Unix Variants</h3>

        <p>
          Brief intro...Lorem ipsum dolor sit amet, consectetur adipiscing 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 fugiat nulla pariatur.
        </p>

        <div class="my-3">
          <a href="#" class="py-2 px-4 uppercase rounded-lg border text-orange border-slate">Start Now</a>
        </div>

      </div>
    </div>
{% endblock %}