r0r-5chach/CSY1018-assignment-1
r0r-5chach
/
CSY1018-assignment-1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated/reformatted nav bar

This commit is contained in:
jpez 2022-03-09 17:14:22 +00:00
parent 35c9aba5c5
commit 8f43cebdcc
3 changed files with 13 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
home/index.css
View File

@ -87,6 +87,7 @@
} }
.langList { .langList {
margin-top: -1em;
display: none; display: none;
pointer-events: none; pointer-events: none;
} }
@ -126,6 +127,8 @@
main { main {
color: #E5E5E5; color: #E5E5E5;
font-size: larger; font-size: x-large;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.5);
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
} }

4
home/index.html
View File

@ -13,11 +13,9 @@
<link rel="stylesheet" href="../home/index.css" media="screen"> <link rel="stylesheet" href="../home/index.css" media="screen">
</head> </head>
<body> <body>
<header class="title-card">
<a class="nav link" href="./index.html"><h1>J-Pez Development</h1></a>
</header>
<nav class="navigation"> <nav class="navigation">
<a class="nav link" id="home" href="./index.html"><h2>J-Pez Development</h2></a>
<a class="nav link" id="port" href="../portfolio/portfolio.html"><h2>Portfolio</h2></a> <a class="nav link" id="port" href="../portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="../blog/blog.html"><h2>Blog</h2></a> <a class="nav link" id="blog" href="../blog/blog.html"><h2>Blog</h2></a>
<a class="nav link" id="contact" href="../contact/contact.html"><h2>Contact</h2></a> <a class="nav link" id="contact" href="../contact/contact.html"><h2>Contact</h2></a>

32
style/main.css
View File

@ -1,6 +1,5 @@
body { body {
margin: 0; margin: 0;
background-color: transparent;
background-image: url("../assets/images/background.jpg"); background-image: url("../assets/images/background.jpg");
background-size: cover; background-size: cover;
font-family: body; font-family: body;
@ -9,7 +8,7 @@ body {
grid-template-columns: 20% 40% 40%; grid-template-columns: 20% 40% 40%;
grid-template-rows: 20% 60% 20%; grid-template-rows: 20% 60% 20%;
grid-template-areas: grid-template-areas:
"header nav nav" "nav nav nav"
"main main aside" "main main aside"
"footer footer footer"; "footer footer footer";
} }
@ -23,31 +22,13 @@ main {
grid-area: main; grid-area: main;
} }
.title-card {
background-color: #000000;
opacity: 90%;
margin: 0;
color: #f29602;
font-family: headers;
grid-area: header;
font-size: x-large;
}
.title-card > a {
text-decoration: none;
}
.title-card > a > h1 {
margin: 0;
}
.navigation { .navigation {
margin: 0; margin: 0;
margin-right: -12em; margin-right: -24em;
display: grid; display: grid;
grid-template-columns: 25% 25% 25%; grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 100%; grid-template-areas: "home port blog contact";
grid-template-areas: "port blog contact"; z-index: 1000;
} }
.link { .link {
@ -63,6 +44,7 @@ main {
color: #f29602; color: #f29602;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
border-bottom: 0.1em solid #000000;
} }
.link > h2 { .link > h2 {
@ -71,7 +53,7 @@ main {
nav > .link:hover { nav > .link:hover {
border-bottom: 0.5em solid #32cd32; border-bottom: 0.1em solid #32cd32;
} }
.link #home { .link #home {