From deb685281387ef0d422269f7893d100177d25857 Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@protonmail.com>
Date: Fri, 21 Jun 2019 14:56:24 +0530
Subject: [PATCH] Add projects and hosted services. Fix Fonts.

---
 index.css  |  80 +++++++++++++++++++++++++++++++---
 index.html | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 193 insertions(+), 11 deletions(-)

diff --git a/index.css b/index.css
index e1041da..98d2677 100644
--- a/index.css
+++ b/index.css
@@ -1,6 +1,5 @@
 * {
 	box-sizing: border-box;
-	text-align: justify;
 	font-family: Roboto;
 }
 
@@ -59,13 +58,17 @@ body {
 	width: 400px;
 }
 
-h1 {
-	font-family: Comfortaa Light;
-	font-weight: 100;
+h1, h2 {
+	font-family: Comfortaa;
+	font-weight: 300;
 	font-size: 4em;
 	text-align: center;
 }
 
+#home p {
+	text-align: justify;
+}
+
 .icons {
 	padding: 1em;
 	display: flex;
@@ -152,6 +155,71 @@ a.icon:hover {
 	display: none;
 }
 
+.full-width {
+	width: 100%;
+	padding: 2em;
+}
+.projects {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: stretch;
+	justify-content: flex-start;
+}
+
+.project {
+	background-color: #e4324c;
+	width: 31%;
+	padding: 1em;
+	box-sizing: border-box;
+	margin: 1%;
+	text-align: left;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	border-radius: 1em;
+}
+
+.project .spacer {
+	flex-grow: 1;
+}
+
+h3 {
+	text-align: center;
+	font-family: Comfortaa;
+	font-weight: 700;
+}
+
+.project .link {
+	text-align: center;
+	width: 100%;
+}
+
+.project a, .project a:visited {
+	color: #FFF;
+	text-decoration: none;
+}
+
+.project a:hover {
+	text-decoration: underline;
+}
+
+@media (max-width: 1300px) and (min-width: 600px) {
+	.project {
+		width: 46%;
+	}
+}
+
+@media (max-width: 600px) {
+	.project {
+		width: 98%;
+		max-width: 400px;
+	}
+
+	.projects {
+		justify-content: center;
+	}
+}
+
 @media (max-width: 1100px) and (min-width: 900px) {
 	.right-pane {
 		width: 30%;
@@ -162,6 +230,9 @@ a.icon:hover {
 	.page {
 		padding: 5em;
 	}
+	.full-width {
+		padding: 2em;
+	}
 }
 
 @media (max-width: 900px) {
@@ -180,7 +251,6 @@ a.icon:hover {
 	}
 
 	.right-pane p {
-		/* display: none; */
 		margin: 0 1em;
 	}
 
diff --git a/index.html b/index.html
index c488156..b1f6bde 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
 		<title> Ceda EI </title>
 		<link rel="stylesheet" type="text/css" href="index.css">
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
-		<link href="https://fonts.googleapis.com/css?family=Comfortaa|Roboto&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,700|Roboto&display=swap" rel="stylesheet">
 		<meta property="og:description" content="Homepage of Ceda EI." />
 		<meta property="og:image" content="https://webionite.com/images/webionite.jpg" />
 	</head>
@@ -17,14 +17,126 @@
 					<h1>Webionite</h1>
 					<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis. Pellentesque iaculis lectus at erat fermentum ultricies. Curabitur est ante, accumsan in tortor vitae, molestie elementum ante. Duis tristique tellus eu molestie porta. Mauris euismod id sem ut ultrices. </p>
 				</div>
-				<div class="page" id="projects">
-					<h1>Projects</h1>
+				<div class="page full-width" id="projects">
+					<h2>Projects</h2>
+					<div class="projects">
+						<div class="project">
+							<h3>Lorem Ipsum Dolorum</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, </p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, </p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, </p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+					</div>
 				</div>
-				<div class="page" id="hosted">
-					<h1>Hosted Services</h1>
+				<div class="page full-width" id="hosted">
+					<h2>Hosted Services</h2>
+					<div class="projects">
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, </p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, </p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, </p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+						<div class="project">
+							<h3>Lorem</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
+							<div class="spacer"></div>
+							<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
+						</div>
+					</div>
 				</div>
 				<div class="page" id="contact">
-					<h1>Contact Us</h1>
+					<h2>Contact Us</h2>
 				</div>
 			</div>
 			<div class="right-pane">