Add Fonts. Move bar to bottom on phone. Other small fixes.
This commit is contained in:
parent
2ff75577b6
commit
144f30752d
74
index.css
74
index.css
|
|
@ -27,8 +27,23 @@ body {
|
|||
background-size: cover;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.right-pane p {
|
||||
margin-top: 32em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.right-pane p a, .right-pane p a:visited {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.right-pane p a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page {
|
||||
|
|
@ -37,7 +52,7 @@ body {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3em;
|
||||
padding: 10em;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
|
|
@ -45,10 +60,15 @@ body {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-family: D3 Euronism;
|
||||
font-family: Comfortaa Light;
|
||||
font-weight: 100;
|
||||
font-size: 4em;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icons {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.icon {
|
||||
|
|
@ -56,7 +76,7 @@ a.icon {
|
|||
background-color: #325090;
|
||||
color: #FFF;
|
||||
border-radius: 50%;
|
||||
font-size: 3em;
|
||||
font-size: 2em;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
line-height: 1.6em;
|
||||
|
|
@ -76,7 +96,7 @@ a.icon:hover {
|
|||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
|
|
@ -84,12 +104,17 @@ a.icon:hover {
|
|||
background-color: #325090;
|
||||
color: #FFF;
|
||||
border-radius: 10% 0 0 10%;
|
||||
border-style: solid;
|
||||
border-right-style: none;
|
||||
border-color: #325090;
|
||||
box-shadow: 2px 2px 2px rgba(50, 80, 144, 0.5);
|
||||
width: 15em;
|
||||
margin-right: -12em;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
transition-property: all;
|
||||
transition-duration: 0.2s;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.selector i {
|
||||
|
|
@ -127,16 +152,47 @@ a.icon:hover {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) and (min-width: 900px) {
|
||||
.right-pane {
|
||||
width: 30%;
|
||||
}
|
||||
.left-pane {
|
||||
width: 70%;
|
||||
}
|
||||
.page {
|
||||
padding: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.right-pane {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 3em;
|
||||
background-color: #325090;
|
||||
background-image: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.icon {
|
||||
.right-pane p {
|
||||
/* display: none; */
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
a.icon, .hamburger label {
|
||||
font-size: 2em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
|
|
|||
30
index.html
30
index.html
|
|
@ -5,11 +5,28 @@
|
|||
<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">
|
||||
<meta property="og:description" content="Homepage of Ceda EI." />
|
||||
<meta property="og:image" content="https://webionite.com/images/webionite.jpg" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-body">
|
||||
<div class="left-pane">
|
||||
<div class="page" id="home">
|
||||
<img src="images/webionite.svg" class="title-image"/>
|
||||
<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>
|
||||
<div class="page" id="hosted">
|
||||
<h1>Hosted Services</h1>
|
||||
</div>
|
||||
<div class="page" id="contact">
|
||||
<h1>Contact Us</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-pane">
|
||||
<div class="selectors">
|
||||
<a href="#home" class="selector">
|
||||
|
|
@ -29,20 +46,11 @@
|
|||
<span>Contact Us</span>
|
||||
</a>
|
||||
</div>
|
||||
<p>Part of <a href="https://libreho.st/"> libreho.st</a> network</p>
|
||||
<div class="icons">
|
||||
<a class="icon" href="https://gitlab.com/ceda_ei/"><i class="fa fa-gitlab"></i></a>
|
||||
<a class="icon" href="https://git.webionite.com/ceda_ei/"><i class="fa fa-gitea"></i></a>
|
||||
</div>
|
||||
<div class="left-pane">
|
||||
<a name="home"></a>
|
||||
<div class="page">
|
||||
<img src="images/webionite.svg" class="title-image"/>
|
||||
<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>
|
||||
<a name="projects"></a>
|
||||
<div class="page">
|
||||
<h1>Projects</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue