Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I make some change to the index.html header and added some css styles #127

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,23 @@
</head>
<body>
<header>
<h1>My Name</h1>
<h1>Jordy</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li class="current"><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li class="current"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main tabindex="0">
<section id="about">
<header><h2>About Me</h2></header>
<header>
<h3>Software Developer</h3>
<h2>Hi, I'm Jordy<br>
Ilunga Mukandayi From South Africa
</h2>
</header>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
Expand Down
19 changes: 17 additions & 2 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
html,
body {
scroll-behavior: smooth;
background: var(--paper);
/* background: var(--paper); */
background: #fff;
color: var(--ink);
font-family: var(--font);
}
Expand All @@ -36,18 +37,32 @@ a:focus {
}
/* Site header and navigation */
body > header {
background: var(--paper);
/* background: var(--paper); */
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1;
}

nav{
background: var(--paper);
border-radius: 20px;
padding: 8px 40px 8px 4px;
margin-top: 10px;
}
nav ul {
display: flex;
list-style: none;
gap: var(--gap);
border-radius: 20px;
}
nav .current a{
background: #ffffff;
border-radius: 100px;
width: 20%;
padding: 8px 20px ;
}

/* Text readability */
Expand Down