Add files via upload

css/main.css

@@ -0,0 +1,248 @@
+/* FONTS
+font-family: 'Hind Guntur', sans-serif;
+font-family: 'Hind Vadodara', sans-serif;
+font-family: 'Gudea', sans-serif;
+font-family: 'Ropa Sans', sans-serif;
+font-family: 'Source Code Pro', monospace;
+font-family: 'Maven Pro', sans-serif;
+font-family: 'Comfortaa', cursive;
+font-family: 'Hind Madurai', sans-serif;
+font-family: 'Asap', sans-serif; 98cfd9
+*/
+
+body {
+    font-family: 'Source Code Pro', monospace;
+	color: #fff;
+	margin: 0;
+    background-color: #7b8bb0;
+}
+h1 {
+	font-size: 64px;
+	font-weight: 300;
+	line-height: 64px;
+	margin-bottom: 0;
+}
+h2 {
+   font-size: 16px;
+   font-weight: 300;
+   text-transform: uppercase;
+}
+h3 {
+    font-size: 22px;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+p {
+	margin-bottom: 30px;
+	line-height: 30px;
+}
+img {
+	border: 0;
+}
+
+a:link, a:active,a:visited {
+    color: #ddd;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+    color: #7b8bb0;
+}
+
+main {
+	width: 70%;
+	display: block;
+	margin-right: auto;
+	margin-left: auto;
+}
+footer {
+	color: #fff;
+	position: relative;
+	height: 65px;
+	left: 0;
+	bottom: 0;
+	font-size: 14px;
+	background-color: #090f33;
+	width: 100%;
+	padding: 15px;
+}
+
+.button {
+	background-color: #090f33;
+	padding-top: 6px;
+	padding-right: 12px;
+	padding-bottom: 6px;
+	padding-left: 12px;
+	color: #fff;
+	border-radius: 4px;
+	text-transform: uppercase;
+	text-decoration: none;
+}
+nav {
+	text-align: center;
+	margin: 40px;
+}
+
+ul {
+    font-size: 12.5px;
+    line-height: 20px;
+}
+
+.hero {
+	color: #fff;
+	text-align: center;
+	margin-bottom: 20px;
+	padding-top: 160px;
+	padding-bottom: 160px;
+	background-color: #090f33;
+    background-image: url(https://i.pinimg.com/originals/6c/0b/54/6c0b541ca892b09a03813ed2ac674444.jpg);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+.container {
+	max-width: 1280px;
+	margin-right: auto;
+	margin-left: auto;
+	min-width: 320px;
+}
+.social {
+	float: right;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+/* timeline code */
+* {
+    box-sizing: border-box;
+}
+
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: white;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+}
+
+/* Container around content */
+.tlcontainer {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+}
+
+/* The circles on the timeline */
+.tlcontainer::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: white;
+    border: 4px solid #090f33;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+/* Place the container to the left */
+.tlleft {
+    left: 0;
+}
+
+/* Place the container to the right */
+.tlright {
+    left: 50%;
+}
+
+/* Add arrows to the left container (pointing right) */
+.tlleft::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid white;
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent white;
+}
+
+/* Add arrows to the right container (pointing left) */
+.tlright::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid white;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent white transparent transparent;
+}
+
+/* Fix the circle for containers on the right side */
+.tlright::after {
+    left: -16px;
+}
+
+/* The actual content */
+.tlcontent {
+    padding: 20px 30px;
+    background-color:#090f33;
+    position: relative;
+    border-radius: 6px;
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+  /* Place the timelime to the left */
+  .timeline::after {
+    left: 31px;
+  }
+
+  /* Full-width containers */
+  .tlcontainer {
+    width: 100%;
+    padding-left: 70px;
+    padding-right: 25px;
+  }
+
+  /* Make sure that all arrows are pointing leftwards */
+  .tlcontainer::before {
+    left: 60px;
+    border: medium solid white;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent white transparent transparent;
+  }
+
+  /* Make sure all circles are at the same spot */
+  .tlleft::after, .tlright::after {
+    left: 15px;
+  }
+
+  /* Make all right containers behave like the left ones */
+  .tlright {
+    left: 0%;
+  }}