aneagoie · adarshdwivedi123 · Jan 8, 2018 · Jan 8, 2018 · Jan 8, 2018 · Jan 8, 2018
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,21 @@
+/*Css frame ~GetHubs*/
+body {
+    background-color:  #99d6ff;
+    text-align: center;
+}
+
+h1 {
+    color: white;
+   background: Green;
+     text-align: center;
+}
+
+p {
+    font-family: verdana;
+    font-size: 20px;
+    padding: 0em 1em; /* I guess it looks cooler this way */
+}
+
+head {
+  border:20px solid blue;
+  }
diff --git a/Script.js → assets/js/Script.js b/Script.js → assets/js/Script.js
diff --git a/index.html b/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html>
-<head>
-	<link rel="stylesheet" type="text/css" href="Style.css">
+<html lang= "en">
+<head charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Green Sydney</title>  <!-- Working title ~GotHubs -->
-	<img src="https://media-exp2.licdn.com/media/AAEAAQAAAAAAAAjwAAAAJDEwMTUwNzQ2LWUzZTUtNDUzNC04NDlmLTUyM2ZjZTlkOTBhOQ.jpg" alt="Picture">
-	</head>
+	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
+</head>
 <body>
-	<link rel="stylesheet" type="text/css" href="style.css">
+	<img src="https://media-exp2.licdn.com/media/AAEAAQAAAAAAAAjwAAAAJDEwMTUwNzQ2LWUzZTUtNDUzNC04NDlmLTUyM2ZjZTlkOTBhOQ.jpg" alt="Picture">
 	<h1>Green Sydney!</h1>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -27,5 +27,4 @@ <h1>Green Sydney!</h1>
 	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 </body>
-
 </html>
diff --git a/style.css b/style.css
diff --git a/website/img/profilephoto.jpg b/website/img/profilephoto.jpg
diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href="style.css" type="text/css" rel="stylesheet">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <header>
+        <span id="brand-name">ANDREI NEAGOIE</span>
+    </header>
+
+    <!-- 
+top introduction with a video. Change it to a appropiate one
+  -->
+
+
+    <div id="main-container">
+        <h1>ZERO TO MASTERY</h1>
+        <div id="introduction">
+            <div id="introduction-media">
+                <iframe src="https://www.youtube.com/embed/_HjToekoEMk?rel=0&amp;controls=0" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
+            </div>
+            <div id="introduction-content">
+                <h3>A UDEMY Course around which a community of beautiful people formed </h3>
+                "The Complete Web Developer in 2018: Zero to Mastery" is a complete full-stack web development course for 2018.
+                <br>Learn to code and become a web developer in 2018 with HTML5, CSS, Javascript, React, Node.js, Machine Learning &amp; more!
+                <ul>
+                    <li>Based on the latest web technology.</li>
+                    <li>An awesome community to help you out anytime. </li>
+                    <li>Both front-end and back-end.</li>
+                </ul>
+
+                <!-- Call to action -->
+
+                <div class="cta">
+                    ENROLL NOW
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Testimonial section. Improve when necessary  -->
+
+
+        <div id="testimonial-wrapper">
+            <div class="testimonial">
+                <img class="testimonial-image" src="/img/profilephoto.jpg">
+                <br><br>
+                <span class="header">James Bishop
+                </span>
+                <br><br> This is the course I've been looking for. I have bought several other courses on Udemy. This one is by far the best because it focuses on preparing you to work in the industry.
+            </div>
+            <div class="testimonial">
+                <img class="testimonial-image" src="/img/profilephoto.jpg">
+                <br><br>
+                <span class="header">Rohail Agneshius</span>
+                <br><br>I have taken so many web dev courses, but honestly, this one is unique because instructor helps you establish great understanding and think outside your comfort zone Plus finding a solution to the problems.All the material is well
+                structured and new such as react and a node with machine learning.
+            </div>
+            <div class="testimonial">
+                <img class="testimonial-image" src="/img/profilephoto.jpg">
+                <br><br>
+                <span class="header">NAME HERE</span>
+                <br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis veritatis dolorum iure voluptate saepe similique
+            </div>
+        </div>
+
+
+
+        <footer>
+            &copy; 2018.
+            <br> Created with love by ZEROtoMASTERY Community.
+        </footer>
+    </div>
+</body>
+
+</html>
diff --git a/website/style.css b/website/style.css
@@ -0,0 +1,138 @@
+body {
+    margin: 0px;
+    font-family: ubuntu;
+    overflow-x: hidden;
+}
+
+header {
+    margin: auto;
+    padding: 2vw;
+}
+
+#brand-name {
+    font-size: 1.3vw;
+    font-weight: 900;
+    padding: 2vw;
+}
+
+#main-container {
+    width: 90%;
+    margin: auto;
+}
+
+#main-container h1 {
+    text-align: center;
+    font-size: 4vw;
+}
+
+#introduction {
+    display: flex;
+    align-items: stretch;
+}
+
+#introduction-media {
+    width: 45%;
+    padding: 2vw;
+    margin: 0px;
+}
+
+#introduction-media iframe {
+    width: 100%;
+    height: 110%;
+}
+
+#introduction-content {
+    width: 50%;
+}
+
+.cta {
+    background: rgb(255, 0, 47);
+    width: 40%;
+    letter-spacing: 1vw;
+    text-align: center;
+    padding: 2vw;
+    border-radius: 5px;
+}
+
+#testimonial-wrapper {
+    display: flex;
+    justify-content: space-around;
+    border-top: 1px dashed rgb(72, 255, 0);
+    margin-top: 2vw;
+    padding-top: 2vw;
+    overflow-x: scroll;
+}
+
+.testimonial {
+    text-align: center;
+    padding: 2vw;
+    width: 25%;
+    min-width: 220px;
+    background: rgb(240, 234, 234);
+}
+
+.testimonial:not(:first-child) {
+    margin-left: 10px;
+}
+
+.testimonial img {
+    width: 200px;
+    border-radius: 50%;
+}
+
+.testimonial .header {
+    font-weight: 900;
+    font-size: 1.8vw;
+}
+
+footer {
+    margin-top: 2vw;
+    padding-top: 2vw;
+    border-top: 1px dashed rgb(72, 255, 0);
+    text-align: center;
+}
+
+
+/* for mobile screen   */
+
+@media screen and (max-width: 500px) {
+    body {
+        font-size: 5vw;
+        margin: auto;
+    }
+    #brand-name {
+        font-size: 5vw;
+        font-weight: 900;
+    }
+    #main-container h1 {
+        font-size: 8vw;
+    }
+    #introduction {
+        flex-direction: column;
+    }
+    #introduction-media {
+        width: 95%;
+    }
+    #introduction-content {
+        width: 100%;
+    }
+    .cta {
+        width: 60%;
+    }
+    #testimonial-wrapper {
+        justify-content: flex-start;
+        overflow-x: auto;
+        margin-top: 5vw;
+        padding-top: 5vw;
+    }
+    .testimonial {
+        min-width: 90%;
+    }
+    .testimonial .header {
+        font-size: 6vw;
+    }
+    /* to hide the scroll bars. Doesn't look good in browsers. Style it if you want   for mobile only */
+     ::-webkit-scrollbar {
+        display: none;
+    }
+}
diff --git a/website/video/video.mp4 b/website/video/video.mp4