Intro
Day 5 is here and gone. I have started to flesh out my website a little more. There isn't a ton but it's a good start. The main things that got done today where a mockup of what the about me page and the blog navigation page is going to look like. These are both just the start of the pages and will be refined more.
About Me Page
I wanted the about me section to emulate the section that I have on the home page. This was going to be something have an image and a little bit about me. Here is the HTML and the CSS for the page minus the long text
HTML About me page Code
<body>
<nav>
<h1 id='mainTitle'>Journey To Improve</h1>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='#'>About Me</a></button>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='#'>Projects</a></button>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='BlogPost/BlogNavigation.html'>Blogs</a></button>
<button class='NavButton' type='button' name='button'> <a Class='NavLink'href='index.html'>Home</a> </button>
</nav>
<div class='grid-container'>
<div class=''>
</div>
<div id='AboutMeSection'>
<div id='Profilepic'>
<p> </p>
</div>
<br>
<br>
<p class='AboutmeText'>text </p>
<br>
<p class='AboutmeText'>text</p>
<br>
<br>
</div>
<div class=''>
</div>
</div>
</body>
About me page CSS
#mainTitle{
color:white;
text-align: left;
display: inline;
position: relative;
top: 1vw;
padding-left: 1vw;
font-size: 2vw;
}
.NavButton{
float: right;
position: relative;
font-size: 1vw;
top: 1.5vw;
background-color: Black;
color: white;
border-left: solid white 0.25vw;
}
nav{
background-color: Black;
height: 4vw;
}
.NavLink{
color: white;
text-decoration: none;
}
body{
background-color: gray;
}
.grid-container{
display: grid;
grid-template-columns: 30% 40% 30%;
grid-column-gap: 1vw;
}
#AboutMeSection{
background-color: white;
text-align: center;
}
#Profilepic{
background-color: lightgray;
width: 15vw;
border-radius: 100%;
position: relative;
left: 12vw;
text-align: center;
height: 15vw;
}
.AboutmeText{
padding: 0 5vw;
}
The about me section only has two paragraph elements in it and some divs to create the container for the grid. The grid uses the same code as the blog pages to create a container using CSS.
Blog Navigation Page
Blog Navigation HTML Code
<body>
<nav>
<h1 id='mainTitle'>Journey To Improve</h1>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='../AboutMe.html'>About Me</a></button>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='#'>Projects</a></button>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='BlogNavigation.html'>Blogs</a></button>
<button class='NavButton' type='button' name='button'> <a Class='NavLink'href='../index.html'>Home</a> </button>
</nav>
<div class='grid-container'>
<div>
</div>
<div id='blog-container'>
<h2 class='center'>Blogs</h2>
<div class='BlogPostBox'>
<a class='blogLink' href='#'><h3 class='BlogPostText'>Day 5 Blog</h3></a>
</div>
<div class='BlogPostBox'>
<a class='blogLink' href='Day4.html'><h3 class='BlogPostText'>Day 4: Blog Post Upgrade</h3></a>
</div>
<div class='BlogPostBox'>
<a class='blogLink' href='Day3.html'><h3 class='BlogPostText'>Day 3: A Better Looking Site</h3></a>
</div>
<div class='BlogPostBox'>
<a class='blogLink' href='Day2.html'><h3 class='BlogPostText'>Day 2: Basics and headers</h3></a>
</div>
<div class='BlogPostBox'>
<a class='blogLink' href='Day1.html'><h3 class='BlogPostText'>Day 1: Staring a Blog and Website </h3></a>
</div>
</div>
<div >
</div>
</div>
</body>
CSS Code for the Blog Navigation
.grid-container{
display: grid;
grid-template-columns: 20% 60% 20%;
grid-column-gap: 1vw
}
.title{
text-align: center;
font-size: 2em;
}
#mainTitle{
color:white;
text-align: left;
display: inline;
position: relative;
top: 1vw;
padding-left: 1vw;
font-size: 2vw;
}
.NavButton{
float: right;
position: relative;
font-size: 1vw;
top: 1.5vw;
background-color: Black;
color: white;
border-left: solid white 0.25vw;
}
nav{
background-color: Black;
height: 4vw;
}
body{
background-color: gray;
}
.NavLink{
color: white;
text-decoration: none;
}
.grid-container{
display: grid;
grid-template-columns: 30% 40% 30%;
grid-column-gap: 1vw
}
#blog-container{
background-color: white;
}
.BlogPostBox{
background-color: black;
color: white;
height: 3vw;
border: solid white 0.1vw;
}
.center{
text-align: center;
}
.BlogPostText{
position: relative;
padding: 0.6vw;
margin: 0vw;
}
.blogLink{
text-decoration: none;
color: white;
}
For the blog page I wanted to have a way that I could keep adding different blog posts in this for the future. The way that I achieved that is with a few divs to break up the sections. These way I have a good way to copy and paste a div above all the other blog posts. Then I just have to change the title and the link and I will have new navigation. Finally I made sure to do the grid again to bring everything in the middle. I have future plans for this page to add an animation on hover.
The very basics of the website have been made now. The only page left to make is the project page but that will wait till I have actually made a project. Some of the things that I will do in the near future is refresh my JavaScript and jQuery knowledge. I would also like to find a good way to automate adding pages to my website