Add Contact section
This commit is contained in:
parent
deb6852813
commit
e74cd83f22
Binary file not shown.
After Width: | Height: | Size: 85 KiB |
35
index.css
35
index.css
|
@ -51,7 +51,7 @@ body {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 10em;
|
padding: 0 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-image {
|
.title-image {
|
||||||
|
@ -92,6 +92,19 @@ a.icon:hover {
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.large {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large > .icon {
|
||||||
|
font-size: 2em;
|
||||||
|
width: 2.8em;
|
||||||
|
height: 2.8em;
|
||||||
|
line-height: 2.8em;
|
||||||
|
}
|
||||||
|
|
||||||
.selectors {
|
.selectors {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -203,6 +216,15 @@ h3 {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-about {
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact h3 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1300px) and (min-width: 600px) {
|
@media (max-width: 1300px) and (min-width: 600px) {
|
||||||
.project {
|
.project {
|
||||||
width: 46%;
|
width: 46%;
|
||||||
|
@ -218,6 +240,13 @@ h3 {
|
||||||
.projects {
|
.projects {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.large > .icon {
|
||||||
|
font-size: 1.8em;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1100px) and (min-width: 900px) {
|
@media (max-width: 1100px) and (min-width: 900px) {
|
||||||
|
@ -275,4 +304,8 @@ h3 {
|
||||||
.selectors {
|
.selectors {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-about {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
12
index.html
12
index.html
|
@ -136,7 +136,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page" id="contact">
|
<div class="page" id="contact">
|
||||||
<h2>Contact Us</h2>
|
<h2>Contact</h2>
|
||||||
|
<img src="images/ceda.jpg" class="image-about"/>
|
||||||
|
<h3>@ceda_ei</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="icons large">
|
||||||
|
<a class="icon" href="https://matrix.to/#/@ceda_ei:matrix.org"><i class="fa fa-matrix-org"></i></a>
|
||||||
|
<a class="icon" href="https://t.me/ceda_ei"><i class="fa fa-paper-plane"></i></a>
|
||||||
|
<a class="icon" href="mailto:ceda_ei@webionite.com"><i class="fa fa-envelope"></i></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-pane">
|
<div class="right-pane">
|
||||||
|
@ -155,7 +163,7 @@
|
||||||
</a>
|
</a>
|
||||||
<a href="#contact" class="selector">
|
<a href="#contact" class="selector">
|
||||||
<i class="fa fa-angle-left"></i>
|
<i class="fa fa-angle-left"></i>
|
||||||
<span>Contact Us</span>
|
<span>Contact</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<p>Part of <a href="https://libreho.st/"> libreho.st</a> network</p>
|
<p>Part of <a href="https://libreho.st/"> libreho.st</a> network</p>
|
||||||
|
|
Loading…
Reference in New Issue