HTML-CSS-Assignments/assignment-1/problems/5-vscode-bottombar/index.html at main · 100xdevs-bootcamp-1/HTML-CSS-Assignments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visual Studio Code Landing Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: black;
        }
        .container {
            background-color: black;
            width: 1200px;
            margin: 0 auto;
            color: white;
        }

        .languagePanel {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            padding-inline: 2.5rem
        }

        .languagePanel img {
            height: 40px;
            width: auto;
        }

        .container {
            display: grid;
            grid-template-columns: 1fr 2fr;
            column-gap: 2rem;
        }

        .flex {
            display: flex;
        }

        .verticalCenter {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

    </style>
</head>
<body>
    <div class="container">
        <div>
            <h2>Code in any language</h2>
            <p>VS Code supports almost every major programming language. Several ship in the box, like JavaScript,
                TypeScript, CSS, and HTML, but extensions for others can be found in the VS Code Marketplace.</p>
        </div>
        <div class="languagePanel">
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-js.png" alt="Javascript">
                <code class="verticalCenter">JavaScript</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-ts.png" alt="TypeScript">
                <code class="verticalCenter">TypeScript</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-python.png" alt="Python">
                <code class="verticalCenter">Python</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-cs.png" alt="C#">
                <code class="verticalCenter">C#</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-cpp.png" alt="C++">
                <code class="verticalCenter">C++</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-html.png" alt="HTML">
                <code class="verticalCenter">HTML</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-java.png" alt="Java">
                <code class="verticalCenter">Java</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-json.png" alt="JSON">
                <code class="verticalCenter">JSON</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-php.png" alt="PHP">
                <code class="verticalCenter">PHP</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-markdown.png" alt="Markdown">
                <code class="verticalCenter">Markdown</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-powershell.png" alt="Powershell">
                <code class="verticalCenter">Powershell</code>
            </div>
            <div class="flex">
                <img src="https://code.visualstudio.com/assets/home/language-yaml.png" alt="YAML">
                <code class="verticalCenter">YAML</code>
            </div>
        </div>
    </div>
</body>