HTML-CSS-Assignments/assignment-1/problems/6-vs-code-landing-page/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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visual Studio Code Landing Page</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <header>
        <div class="navContainer">
            <div class="flex">
                <div class="verticalCenter">
                    <img src="https://code.visualstudio.com/favicon.ico" width="20" height="20" class="topImage" />
                </div>
                <h3>Visual Studio Code</h3>
                <div class="verticalCenter">
                    <div>
                        <a class="navLink" href="#">Docs</a>
                        <a class="navLink" href="#">Updates</a>
                        <a class="navLink" href="#">Blog</a>
                        <a class="navLink" href="#">Api</a>
                        <a class="navLink" href="#">Extensions</a>
                        <a class="navLink" href="#">FAQ</a>
                        <a class="navLink" href="#">Learn</a>
                    </div>
                </div>
            </div>
            <div class="verticalCenter">
                <div class="searchContainer">
                    <input type="text" placeholder="Search Docs" class="searchInput" />
                    <button class="downloadButton">Download</button>
                </div>
            </div>
        </div>
        </div>
    </header>

    <section>
        <div class="banner">
            <a href="#" class="bannerLink">Version 1.92</a> is now available! Read about the new features and fixes from
            July.
        </div>
    </section>

    <section class="hero">
        <div class="container">
            <div class="heroContainer">
                <div>
                    <br /><br /><br />
                    <span class="buttonBanner">
                        Free. Built on open source. Runs anywhere.
                    </span>
                    <br /><br />
                    <h2 style="text-align: left;">Code Editing. Redefined.</h2>
                    <a href="#" class="cta-button">Download for MacOS</a>
                </div>
                <div>
                    <img src="https://code.visualstudio.com/assets/home/home-screenshot-mac-2x-v2.png" width="800px" />
                </div>
            </div>
        </div>
    </section>

    <section class="language">
        <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>
    </section>
</body>

</html>