mawacode/mawacode.de
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Change nav style

Browse source
This commit is contained in:
malik 2024-02-02 18:19:31 +01:00
parent 318ef841fa
commit 8b762ee631
8 changed files with 128 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
aboutme.html
View file

@ -15,7 +15,7 @@
<nav>
<ul id="menuList">
<li><a href="index.html" id="homenav"></a></li>
<li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="aboutme.html" id="aboutmenav" class="activeTab"></a></li>
<li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
@ -23,27 +23,27 @@
</nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="aboutmetitle"></h1>
<h2 id="aboutme1"></h2>
<p>‎</p>
<h2 id="aboutme2"></h2>
<p>‎</p>
<h2 id="aboutme3"></h2>
<div class="row">
<div class="col-1">
<h1 id="aboutmetitle"></h1>
<h2 id="aboutme1"></h2>
<p>‎</p>
<h2 id="aboutme2"></h2>
<p>‎</p>
<h2 id="aboutme3"></h2>
<ul id="aboutmelinks">
<li><a href="aboutme/cats.html" id="aboutmebutton1"></a></li>
<li><a href="aboutme/linux.html" id="aboutmebutton2"></a></li>
<li><a href="aboutme/techno.html" id="aboutmebutton3"></a></li>
</ul>
</div>
<div class="col-2">
<img src="webicons/foto.png" class="fotovonmir">
<ul id="aboutmelinks">
<li><a href="aboutme/cats.html" id="aboutmebutton1"></a></li>
<li><a href="aboutme/linux.html" id="aboutmebutton2"></a></li>
<li><a href="aboutme/techno.html" id="aboutmebutton3"></a></li>
</ul>
</div>
<div class="col-2">
<img src="webicons/foto.png" class="fotovonmir">
</div>
</div>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>

34
aboutme/cats.html
View file

@ -16,7 +16,7 @@
<nav>
<ul id="menuList">
<li><a href="../index.html" id="homenav"></a></li>
<li><a href="../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../aboutme.html" id="aboutmenav" class="activeTab"></a></li>
<li><a href="../projects.html" id="projectsnav"></a></li>
<li><a href="../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
@ -24,24 +24,24 @@
</nav>
<img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class="row">
<div class="col-1">
<h1 id="catstitle"></h1>
<h2 id="cats"></h2>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="catstitle"></h1>
<h2 id="cats"></h2>
</div>
<div class="col-2" id="catpics">
<img src="catpics/catpic2.jpg">
<img src="catpics/catpic1.jpg">
</div>
</div>
<div class="col-2" id="catpics">
<img src="catpics/catpic2.jpg">
<img src="catpics/catpic1.jpg">
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../webicons/GitHub.png"></a>
</div>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../webicons/GitHub.png"></a>
</div>
</div>
</div>
<script src="../js/lang.js"></script>

4
aboutme/linux.html
View file

@ -16,7 +16,7 @@
<nav>
<ul id="menuList">
<li><a href="../index.html" id="homenav"></a></li>
<li><a href="../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../aboutme.html" id="aboutmenav" class="activeTab"></a></li>
<li><a href="../projects.html" id="projectsnav"></a></li>
<li><a href="../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
@ -24,7 +24,7 @@
</nav>
<img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="linuxtitle"></h1>

46
aboutme/techno.html
View file

@ -16,7 +16,7 @@
<nav>
<ul id="menuList">
<li><a href="../index.html" id="homenav"></a></li>
<li><a href="../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../aboutme.html" id="aboutmenav" class="activeTab"></a></li>
<li><a href="../projects.html" id="projectsnav"></a></li>
<li><a href="../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
@ -24,30 +24,30 @@
</nav>
<img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="technotitle"></h1>
<h2 id="techno"></h2>
<ul class="technolist">
<li id="technoli1"></li>
<li id="technoli2"></li>
<li id="technoli3"></li>
<li id="technoli4"></li>
<li id="technoli5"></li>
<li id="technoli6"></li>
<li id="technoli7"></li>
<li id="technoli8"></li>
<li id="technoli9"></li>
<li id="technoli10"></li>
</ul>
<div class="row">
<div class="col-1">
<h1 id="technotitle"></h1>
<h2 id="techno"></h2>
<ul class="technolist">
<li id="technoli1"></li>
<li id="technoli2"></li>
<li id="technoli3"></li>
<li id="technoli4"></li>
<li id="technoli5"></li>
<li id="technoli6"></li>
<li id="technoli7"></li>
<li id="technoli8"></li>
<li id="technoli9"></li>
<li id="technoli10"></li>
</ul>
</div>
<div class="col-2">
</div>
</div>
<div class="col-2">
</div>
</div>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a>

6
contactme.html
View file

@ -18,13 +18,13 @@
<li><a href="index.html" id="homenav"></a></li>
<li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="contactme.html" id="contactnav"></a></li>
<li><a href="contactme.html" id="contactnav" class="activeTab"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul>
</nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="contacttitle"></h1>
@ -40,7 +40,7 @@
<a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div>
</div>
</div>

45
css/style.css
View file

@ -7,25 +7,29 @@
.container{
width: 100%;
min-height: 100vh;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box;
overflow: hidden;
background: rgb(56,56,56);
background: linear-gradient(117deg, rgba(56,56,56,1) 0%, rgba(130,130,130,1) 100%);
}
.content {
padding-left: 8%;
padding-right: 8%;
}
.navbar {
width: 100%;
display: flex;
align-items: center;
background-color: #e2de84;
box-shadow: 5px 5px 5px;
padding: 30px 0;
}
.logo {
width: 180px;
margin: 30px 0;
background-color: #e2de84;
box-shadow: 5px 5px 5px;
margin-left: 8%;
}
.menu-icon{
@ -34,12 +38,12 @@
display: none;
background-color: #e2de84;
padding: 10px;
box-shadow: 5px 5px 5px;
}
nav{
flex: 1;
text-align: right;
padding-right: 8%;
}
nav ul li{
@ -49,11 +53,10 @@ nav ul li{
nav ul li a{
color: black;
font-size: 100%;
padding: 5px;
font-size: 120%;
text-decoration: none;
background-color: #e2de84;
box-shadow: 5px 5px 5px black;
padding-left: 20px;
font-style: italic;
}
nav ul li a:hover{
@ -61,6 +64,15 @@ nav ul li a:hover{
cursor: pointer;
}
.activeTab{
text-decoration-line: underline;
text-decoration-thickness: 3px;
}
#menuList{
margin-top: -1%;
}
h1{
color: black;
}
@ -173,15 +185,10 @@ h2{
@media only screen and (max-width:900px){
.container{
padding-left: 4%;
padding-right: 4%;
}
nav ul{
width: 100%;
position: absolute;
top: 75px;
top: 100px;
right: 0;
z-index: 2;
background-color: #e2de84;
@ -197,10 +204,12 @@ h2{
nav ul li a{
box-shadow: 0 0 0;
cursor: pointer;
margin-right: 10px;
}
.menu-icon{
display: block;
margin-right: 4%;
}
#menuList{
@ -208,6 +217,10 @@ h2{
transition: 0.5s;
}
.logo{
margin-left: 4%;
}
.row{
flex-direction: column;
margin: 50px 0

38
index.html
View file

@ -16,7 +16,7 @@
<img src="webicons/logo.png" class="logo">
<nav>
<ul id="menuList">
<li><a href="index.html" id="homenav"></a></li>
<li><a href="index.html" id="homenav" class="activeTab"></a></li>
<li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="contactme.html" id="contactnav"></a></li>
@ -25,25 +25,25 @@
</nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="welcometitle">Looks like you have JavaScript deactivated. Please activate JavaScript. My entire JavaScript is Open-Source btw. https://github.com/malikwachter/mawacode.de/blob/main/js/lang.js</h1>
<h2 id="welcome1"></h2>
<p>‎</p>
<h2 id="welcome2"></h2>
</div>
<div class="col-2">
<img src="webicons/foto.png" class="fotovonmir">
</div>
</div>
<div class="row">
<div class="col-1">
<h1 id="welcometitle">Looks like you have JavaScript deactivated. Please activate JavaScript. My entire JavaScript is Open-Source btw. https://github.com/malikwachter/mawacode.de/blob/main/js/lang.js</h1>
<h2 id="welcome1"></h2>
<p>‎</p>
<h2 id="welcome2"></h2>
</div>
<div class="col-2">
<img src="webicons/foto.png" class="fotovonmir">
</div>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div>
</div>
</div>
<script src="js/lang.js"></script>

32
projects.html
View file

@ -17,30 +17,30 @@
<ul id="menuList">
<li><a href="index.html" id="homenav"></a></li>
<li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="projects.html" id="projectsnav" class="activeTab"></a></li>
<li><a href="contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul>
</nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class="row">
<div class="col-1">
<h1 id="projectstitle"></h1>
<h2 id="projects"></h2>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="projectstitle"></h1>
<h2 id="projects"></h2>
</div>
<div class="col-2">
<img src="webicons/foto.png" class="fotovonmir">
</div>
</div>
<div class="col-2">
<img src="webicons/foto.png" class="fotovonmir">
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div>
</div>
</div>