First commit

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,18 @@
+| Language | Platform | Author |
+| -------- | --------|--------|
+| HTML |  Azure Web App, Virtual Machine| |
+
+# Sample HTML website 
+
+Sample HTML/CSS web app that you can deploy to Azure. 
+
+## License
+
+See [LICENSE](LICENSE).
+
+
+## Contributing
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
+For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
+contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
+

css/site.css

@@ -0,0 +1,134 @@
+ html,
+        body {
+            height: 100%;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+        }
+        @font-face{
+            font-family: "Segoe UI";
+            src: url('../fonts/segoeuil.ttf');
+        }
+        .main-container {
+            height: 100%;
+            width: 100%;
+            background-color: #1d539d;
+            color: white;
+            padding-top: 6%;
+            box-sizing: border-box;
+            overflow-y: auto;
+            overflow-x: hidden;
+            font-family: "Segoe UI";
+        }
+
+        .cloud-image {
+            width: 1200px;
+            height: 250px;
+            padding-bottom: 50px;
+            margin: auto;
+        }
+
+        .success-text {
+            padding-bottom: 20px;
+            font-size: 62px;
+            line-height: 73px;
+        }
+
+        .description {
+            font-size: 34px;
+            line-height: 40px;
+        }
+
+        .next-steps-container {
+            padding-top: 50px;
+        }
+
+        .next-steps-header {
+            font-size: 24px;
+            line-height: 28px;
+            padding-bottom: 25px;
+        }
+
+        .next-steps-body {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .step {
+            display: flex;
+            margin: 7px 0px;
+            font-size: 15px;
+            line-height: 21px;
+        }
+
+        .step-icon {
+            height: 20px;
+            width: 20px;
+            margin-right: 10px;
+        }
+
+		.step-text a {
+            color: white;
+			text-decoration: none;
+        }
+
+		.step-text a:hover {
+            color: white;
+			text-decoration:underline;
+        }
+
+        .content {
+            box-sizing: border-box;
+            min-width: 700px;
+            max-width: 830px;
+            position: relative;
+            margin: auto;
+        }
+
+        .tweet-container {
+            min-width: 30px;
+            min-height: 100px;
+            margin: 0 20px;
+            position: absolute;
+            left: -100px;
+            top: 110px;
+        }
+        .content-body{
+            min-width: 400px;
+        }
+
+        @media (max-width: 1024px) {
+            .main-container{
+                padding-top: 1%;
+            }
+            .cloud-image {
+                padding-bottom: 30px;
+            }
+            .next-steps-container {
+                padding-top: 30px;
+            }
+            .next-steps-header {
+                padding-bottom: 20px;
+            }
+            .success-text {
+                font-size: 50px;
+                line-height: 61px;
+                padding-bottom: 10px;
+            }
+            .description {
+                font-size: 26px;
+                line-height: 30px;
+            }
+
+            .step {
+                font-size: 12px;
+                line-height: 18px;
+            }
+            .tweet-container {
+                top: 80px;
+            }
+            .content{
+                max-width: 630px;
+                min-width: 630px;
+            }
+        }

index.html

@@ -0,0 +1,58 @@
+ <!Doctype html>
+<html>
+
+<head>
+     <title>HTML Application</title>
+	 <link href="css/site.css" rel="stylesheet">
+</head>
+
+<body>
+    <div class="main-container">
+        <div class="cloud-image">
+            <img src="img/successCloudNew.svg" />
+        </div>
+        <div class="content">
+            <div class="tweet-container">
+            <a href="http://twitter.com/intent/tweet/?text=I%20just%20created%20a%20new%20HTML%20website%20on%20Azure%20using%20Azure%20DevOps%20Project&hashtags=AzureDevOpsProject%2CVSTS%20%40Azure%20%40VSTS">
+                <img src="img/tweetThis.svg" />
+            </a>            
+        </div>
+            <div class="content-body">
+                <div class="success-text">Success!</div>
+                <div class="description line-1"> Azure DevOps Project has been successfully setup</div>
+                <div class="description line-2"> Your HTML app is up and running on Azure</div>
+                <div class="next-steps-container">
+                    <div class="next-steps-header">Next up</div>
+                    <div class="next-steps-body">
+                        <div class="step">
+                            <div class="step-icon">
+                                <img src="img/cloneWhite.svg">
+                            </div>
+                            <div class="step-text"><a href="https://go.microsoft.com/fwlink/?linkid=862409">Clone your code repository and start developing your application on IDE of your choice</a></div>
+                        </div>
+                        <div class="step">
+                            <div class="step-icon">
+                                <img src="img/deployWhite.svg">
+                            </div>
+                            <div class="step-text"><a href="https://go.microsoft.com/fwlink/?linkid=862410">View your CI/CD pipeline on Visual Studio Team Services and customize it as per your needs</a></div>
+                        </div>
+                        <div class="step">
+                            <div class="step-icon">
+                                <img src="img/stackWhite.svg">
+                            </div>
+                            <div class="step-text"><a href="http://portal.azure.com">View your service stack in the Azure Portal</a></div>
+                        </div>
+                        <div class="step">
+                            <div class="step-icon">
+                                <img src="img/lightbulbWhite.svg">
+                            </div>
+                            <div class="step-text"><a href="https://go.microsoft.com/fwlink/?linkid=862126">Learn more about all you can do with Azure projects by visiting the documentation</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>