Webionite
/
webionite.com
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add projects and hosted services. Fix Fonts.

This commit is contained in:
Ceda EI 2019-06-21 14:56:24 +05:30
parent 144f30752d
commit deb6852813
2 changed files with 193 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
index.css
View File

@ -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;
}

124
index.html
View File

@ -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 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 class="page" id="hosted">
<h1>Hosted Services</h1>
</div>
<div class="page" id="contact">
<h1>Contact Us</h1>
<h2>Contact Us</h2>
</div>
</div>
<div class="right-pane">