Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid, asperiores corporis. Perferendis maiores sed amet sequi ad quaerat, obcaecati minus officiis esse repudiandae, sunt dolorum, nostrum ullam nihil aut fugit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa sapiente minus voluptatem dolores commodi fuga aut asperiores quasi ad vitae ea minima laudantium at, facilis cumque cum repellat iusto ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, explicabo. A harum aut esse. Voluptates eos dolorum, provident dolore, vel autem repellendus accusamus, eius unde inventore perspiciatis maiores deserunt harum!

Here's an example of a Link

Landscape Photo Portrait Photo Square Photo
Name Age Email
Joe Schmoe 42 joe@schmoes.goes
Jim Shim 24 jim@shims.dims
Alan Alanson 66 alan@alanson.rhyme
I've made a severe and continuous lapse in my judgement and I don't expect to be forgiven. I am simply here to apologize.

Here's an example of inline code

do the thing
then do this other thing
while the thing is not done
    do the third thing
def factorial(n):
    """
    Computes the factorial of n
    """
    if n == 0: return 1
    else: return n*factorial(n-1)

def exp(x):
    """
    Computes the exponential of x
    """
    return sum((x**n)/factorial(n) for n in range(1000))

def sin(x):
    """
    Computes the sin of x
    """
    return sum((-1**n)*x**(2*n+1)/factorial(2*n+1) for n in range(1000))

def cos(x):
    """
    Computes the cos of x
    """
    return sum((-1**n)*x*(2*n)/factorial(2*n) for n in range(1000))
function interpolate(alpha) {
    return scan(
        (pos, next) => ({
            x: alpha * next.x + (1 - alpha) * pos.x,
            y: alpha * next.y + (1 - alpha) * pos.y
        }),
        { x: 0, y: 0 }
    )
}

function toggle(observable$, subfunc) {
    return {
        subscription: Subscription.EMPTY,
        next() {
            if (this.subscription.closed)
                this.subscription = observable$.subscribe(subfunc)
            else
                this.subscription.unsubscribe()
        },
        error() {
            if (!this.subscription.closed)
                this.subscription.unsubscribe()
        },
        complete() {
            if (!this.subscription.closed)
                this.subscription.unsubscribe()
        }
    }
}

let animationFrame$ = of(null)
    .pipe(
        repeat(),
        observeOn(animationFrameScheduler)
    )

let mouseMovePos$ = fromEvent(document, 'mousemove')
    .pipe(
        map(event => ({
            x: event.clientX,
            y: event.clientY
        })),
        observeOn(animationFrameScheduler)
    )

let mousePos$ = combineLatest([animationFrame$, mouseMovePos$])
    .pipe(map(([_, pos]) => pos))

function clickAndDrag(id, alpha) {
    let elem = document.getElementById(id)
    return fromEvent(elem, 'click')
        .subscribe(toggle(
            interpolate(alpha)(mousePos$),
            pos => move(elem, pos)
        ))
}

clickAndDrag('box', 1.0)
clickAndDrag('circle', 0.75)
clickAndDrag('airplane', 0.25)
public class Person {
    // Private variables
    private string name;
    private string email;
    private DateTime birthday;

    // Constructor
    public Person(string name, string email, DateTime birthday) {
        this.name = name;
        this.email = email;
        this.birthday = birthday;
    }

    // Get name
    public string Name {
        get { return name; }
    }

    // Get and set email
    public string Email {
        get { return email; }
        set { email = value; }
    }

    // Calculated property
    public int Age {
        get { return DateTime.Today.Year - birthday.Year; }
    }
}
<div class="main-layout">
    <div class="menu menu-layout">
        <p>Menu Content</p>
    </div>

    <div class="post-snippet main">
        <h1 class="title">Example Header</h1>
        <p class="snippet">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
            Voluptate adipisci laborum tempore quam recusandae harum 
            vero optio nemo, dolorem quaerat? Nemo necessitatibus 
            vero eligendi eius, minima unde eos voluptatibus tenetur... Lorem ipsum 
            dolor sit amet consectetur adipisicing elit. Rerum doloremque quibusdam 
            molestias? Alias, labore impedit libero ea dolore neque provident molestiae 
            deleniti autem nulla veniam architecto sit exercitationem perferendis 
            praesentium? Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Repudiandae ab nihil eaque...
        </p>
        <p class="buttons">
            <a href="#" class="button save-button">Save</a>
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet second-1">
        <h2 class="title">Example Header</h2>
        <p class="snippet">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
            Voluptate adipisci laborum tempore quam recusandae harum 
            vero optio nemo, dolorem quaerat? Nemo necessitatibus 
            vero eligendi eius, minima unde eos voluptatibus tenetur...
        </p>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet second-2">
        <h2 class="title">Example Header</h2>
        <p class="snippet">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
            Voluptate adipisci laborum tempore quam recusandae harum 
            vero optio nemo, dolorem quaerat? Nemo necessitatibus 
            vero eligendi eius, minima unde eos voluptatibus tenetur...
        </p>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet second-3">
        <h2 class="title">Example Header</h2>
        <p class="snippet">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
            Voluptate adipisci laborum tempore quam recusandae harum 
            vero optio nemo, dolorem quaerat? Nemo necessitatibus 
            vero eligendi eius, minima unde eos voluptatibus tenetur...
        </p>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-1">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-2">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-3">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-4">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-5">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-6">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-7">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <div class="post-snippet third-8">
        <h3 class="title">Example Header</h3>
        <p class="buttons">
            <a href="#" class="button read-button">Read</a>
        </p>
    </div>

    <footer class="footer">
        <div>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Atque ratione officia minima esse, enim ducimus adipisci 
                voluptates non iure iste commodi eius, porro recusandae. 
                Debitis libero sapiente odio placeat atque?
            </p>
            <center>
                Copyright &copy; Anshul Kharbanda (andydevs) 2020
            </center>
        </div>
    </footer>
</div>
$second-count: 3;
$third-count: 12;

// comment down below

.menu {
    grid-area: menu;
}

.main {
    grid-area: main;
}

@for $i from 1 through $second-count {
    .second-#{$i} {
        grid-area: second-#{$i};
    }
}

@for $i from 1 through $third-count {
    .third-#{$i} {
        grid-area: third-#{$i};
    }
}

.footer {
    grid-area: footer;
}

Inline latex code $y = a_0x_0 + a_1x_1 + b$.

Line latex code