Improved home page

This commit is contained in:
Stone-Red-Code
2021-01-04 17:29:09 +01:00
parent 8afab26c54
commit 02caaacf40
3 changed files with 57 additions and 77 deletions
+25 -48
View File
@@ -29,8 +29,10 @@
$("#nav-placeholder").replaceWith(data);
});
</script>
<!--end of Navigation bar-->
<!--end Navigation bar-->
<!--Main-->
<div class="container main">
<div class="row">
<div class="col-sm-8 d-flex justify-content-start">
@@ -48,21 +50,16 @@
Keep in mind, some things here are just placeholders and will be replaced or removed.
On this page I will post all my current projects and updates.
</p>
<h4>Icons:</h4>
<ul style="list-style-type: none; padding: 0; margin: 0;">
<li><a href="https://icons8.de">https://icons8.de</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--end Main-->
<br>
<br>
<footer class="page-footer font-small">
<div class="row">
<div class="container-fluid ml-3 mr-3 p-3 d-flex align-items-center fg-theme">
<!--Footer-->
<footer class="page-footer">
<div class="row m-0 p-3 d-flex align-items-center fg-theme">
<div class="col">
<div>Get in contact:</div>
</div>
@@ -73,50 +70,30 @@
</div>
</div>
</div>
</div>
<div class="row justify-content-center bg-dark p-3 m-0">
<div class="col col-sm-3">
<h3>Company Name</h3>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. A quia nihil fugit
repellendus, aut officia libero. Magnam nobis, cumque sint ea laudantium sequi illum saepe harum
<div class="row m-0 p-3 justify-content-start bg-dark ">
<div class="col col-sm-4">
<h3>About me</h3>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. A quia nihil fugit<br>
repellendus, aut officia libero. Magnam nobis, cumque sint ea laudantium sequi illum saepe harum<br>
voluptas excepturi aspernatur eveniet?</p>
</div>
<div class="col col-sm-3">
<h3>Products</h3>
<div><a href="#">Product 1</a></div>
<div><a href="#">Product 2</a></div>
<div><a href="#">Product 3</a></div>
<div><a href="#">Product 4</a></div>
<div class="col-sm-4">
<h3>Languages & Tools:</h3>
<a href="https://docs.microsoft.com/en-us/dotnet/csharp"><img src="https://img.icons8.com/color/50/000000/c-sharp-logo.png" height="40"/></a>
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5"><img src="https://img.icons8.com/color/48/000000/html-5.png" height="40"/></a>
<a href="https://visualstudio.microsoft.com/vs"><img src="https://img.icons8.com/fluent/50/000000/visual-studio-2019.png" height="40"/></a>
<a href="https://code.visualstudio.com/"><img src="https://img.icons8.com/fluent/48/000000/visual-studio-code-2019.png" height="40"/></a>
</div>
<div class="col col-sm-3">
<h3>Useful Links</h3>
<div><a href="#">Link 1</a></div>
<div><a href="#">Link 2</a></div>
<div><a href="#">Link 3</a></div>
<div><a href="#">Link 4</a></div>
<div class="col-sm-4">
<h3>Links</h3>
<div><a href="https://icons8.com">Icons8</a></div>
<div><a href="https://github.com/anuraghazra/github-readme-stats">GitHub-Readme-Stats</a></div>
</div>
<div class="col col-sm-3">
<h3>Contact</h3>
<div class="row contact">
<img src="https://img.icons8.com/metro/26/ffffff/home.png" width="19" height="19" />
<p>Some adress</p>
</div>
<div class="row contact">
<img src="https://img.icons8.com/metro/26/ffffff/new-post.png" width="19" height="19" />
<p>[email protected]</p>
</div>
<div class="row contact">
<img src="https://img.icons8.com/metro/26/ffffff/phone.png" width="19" height="19" />
<p>+01 234 567 89</p>
</div>
<div class="row contact">
<img src="https://img.icons8.com/metro/26/ffffff/print.png" width="19" height="19" />
<p>+01 234 567 89</p>
</div>
</div>
</div>
<div class="row justify-content-center align-items-center p-1 m-0 bg-secondary">©2020 Copyright: Heigl David</div>
<div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2020 Copyright: Heigl David</div>
</footer>
<!--end Footer-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
-15
View File
@@ -15,21 +15,6 @@
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</div>
</nav>
+31 -13
View File
@@ -1,9 +1,28 @@
:root
{
:root {
--fg-theme: gray;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 257px;
overflow-x: hidden;
background-color: #40444B;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
padding-right: 1.9rem;
/* Set the fixed height of the footer here */
height: 255px;
}
.header {
background: url("Images/code.png");
height: 100px;
@@ -15,10 +34,6 @@
background-color: var(--fg-theme);
}
body {
background-color: #40444B;
}
h1 {
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
@@ -44,33 +59,37 @@ h3 {
color: black;
}
a:link {
color: gray;
text-decoration: underline;
}
/* visited link */
a:visited {
color: gray;
}
/* mouse over link */
a:hover {
color: rgb(0, 0, 0);
}
/* selected link */
a:active {
color: rgb(180, 180, 180);
}
.nav-link
{
.nav-link {
text-decoration: var(--fg-theme);
}
.toolIcon img{
width: 100;
}
@media screen and (max-width: 768px) {
h2 {
font-size: 20px;
@@ -83,8 +102,7 @@ a:active {
}
}
@media screen and (max-width: 360px)
{
@media screen and (max-width: 360px) {
h1 {
font-size: 30px;
}