mirror of
https://github.com/Stone-Red-Code/Stone-Red-Code.github.io.git
synced 2026-09-04 09:06:28 +02:00
Improved home page
This commit is contained in:
Stone-Red-Code
+25
-48
@@ -29,8 +29,10 @@
|
|||||||
$("#nav-placeholder").replaceWith(data);
|
$("#nav-placeholder").replaceWith(data);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<!--end of Navigation bar-->
|
<!--end Navigation bar-->
|
||||||
|
|
||||||
|
|
||||||
|
<!--Main-->
|
||||||
<div class="container main">
|
<div class="container main">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-8 d-flex justify-content-start">
|
<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.
|
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.
|
On this page I will post all my current projects and updates.
|
||||||
</p>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!--end Main-->
|
||||||
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<footer class="page-footer font-small">
|
<!--Footer-->
|
||||||
<div class="row">
|
<footer class="page-footer">
|
||||||
<div class="container-fluid ml-3 mr-3 p-3 d-flex align-items-center fg-theme">
|
<div class="row m-0 p-3 d-flex align-items-center fg-theme">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div>Get in contact:</div>
|
<div>Get in contact:</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -73,50 +70,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row m-0 p-3 justify-content-start bg-dark ">
|
||||||
<div class="row justify-content-center bg-dark p-3 m-0">
|
<div class="col col-sm-4">
|
||||||
<div class="col col-sm-3">
|
<h3>About me</h3>
|
||||||
<h3>Company Name</h3>
|
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. A quia nihil fugit<br>
|
||||||
<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<br>
|
||||||
repellendus, aut officia libero. Magnam nobis, cumque sint ea laudantium sequi illum saepe harum
|
|
||||||
voluptas excepturi aspernatur eveniet?</p>
|
voluptas excepturi aspernatur eveniet?</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col col-sm-3">
|
<div class="col-sm-4">
|
||||||
<h3>Products</h3>
|
<h3>Languages & Tools:</h3>
|
||||||
<div><a href="#">Product 1</a></div>
|
<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>
|
||||||
<div><a href="#">Product 2</a></div>
|
<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>
|
||||||
<div><a href="#">Product 3</a></div>
|
<a href="https://visualstudio.microsoft.com/vs"><img src="https://img.icons8.com/fluent/50/000000/visual-studio-2019.png" height="40"/></a>
|
||||||
<div><a href="#">Product 4</a></div>
|
<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>
|
||||||
<div class="col col-sm-3">
|
<div class="col-sm-4">
|
||||||
<h3>Useful Links</h3>
|
<h3>Links</h3>
|
||||||
<div><a href="#">Link 1</a></div>
|
<div><a href="https://icons8.com">Icons8</a></div>
|
||||||
<div><a href="#">Link 2</a></div>
|
<div><a href="https://github.com/anuraghazra/github-readme-stats">GitHub-Readme-Stats</a></div>
|
||||||
<div><a href="#">Link 3</a></div>
|
|
||||||
<div><a href="#">Link 4</a></div>
|
|
||||||
</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>
|
||||||
<div class="row contact">
|
<div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2020 Copyright: Heigl David</div>
|
||||||
<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>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
<!--end Footer-->
|
||||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||||||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
|||||||
@@ -15,21 +15,6 @@
|
|||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="projects.html">Projects</a>
|
<a class="nav-link" href="projects.html">Projects</a>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -1,9 +1,28 @@
|
|||||||
|
:root {
|
||||||
:root
|
|
||||||
{
|
|
||||||
--fg-theme: gray;
|
--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 {
|
.header {
|
||||||
background: url("Images/code.png");
|
background: url("Images/code.png");
|
||||||
height: 100px;
|
height: 100px;
|
||||||
@@ -15,10 +34,6 @@
|
|||||||
background-color: var(--fg-theme);
|
background-color: var(--fg-theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #40444B;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
@@ -44,33 +59,37 @@ h3 {
|
|||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
a:link {
|
a:link {
|
||||||
color: gray;
|
color: gray;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* visited link */
|
/* visited link */
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* mouse over link */
|
/* mouse over link */
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* selected link */
|
/* selected link */
|
||||||
|
|
||||||
a:active {
|
a:active {
|
||||||
color: rgb(180, 180, 180);
|
color: rgb(180, 180, 180);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link
|
.nav-link {
|
||||||
{
|
|
||||||
text-decoration: var(--fg-theme);
|
text-decoration: var(--fg-theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolIcon img{
|
||||||
|
width: 100;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@@ -83,8 +102,7 @@ a:active {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 360px)
|
@media screen and (max-width: 360px) {
|
||||||
{
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user