HTML/CSS - C++ Course, Basic Concepts Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>(C++)++ Course</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>
    <body>
        
        <div id="header">
            <div id="imgCont">
                <img src="https://api.sololearn.com/uploads/Modules/1051/1120.png">
            </div>
            <h2 id="title">Basic Concepts</h2>
        </div>
        
        <div class="courseCard">
            <div class="cardHeader">
                <p class="cardTitle">Printing a Text</p>
                <span class="cardPageRef">4/11</span>
            </div>
            
            <div class="cardContent">
                <div class="cardText">
                    New lines are a thing of preference, for the most part. At the basic level, using either <code>'\n'</code> or <code>std::endl</code> interchangeably won't result in any difference. Using <code>std::endl</code> will flush the output stream. If flushing the stream many times is unnecessary or unwanted in your code, using <code>'\n'</code> is just as good as <code>std::endl</code>. Sometimes a code's output stream may be unstable for some reason; using <code>std::endl</code> would be preferable in that case.
                    
                    <!--
                    This is for code inserts
                    <div class="codeBox">

css

body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
code {
    background:  #ddd;
}
.comment {
    color:  #888;
}
#header {
    margin: 0;
    padding: 5px;
    width: 100%;
    background:  rgb(68, 171, 203);
}
#imgCont {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 0;
    background:  #8bc34a;

BROWSER

Console