lisonallie / starexpress-fw Goto Github PK

My framework is viewable here.

This is a one-off project I created in a week of my own time. I wanted to redesign the framework I had already created because I didn't explore the full possibilities I felt and wanted to enhance the experience. At the end of the project it turned into more of a website than a framework because I was having a fun time.

My objective was to explore some areas of CSS and HTML I hadn't yet discovered (such as a website with multiple pages) and some areas I felt needed more practice (such as positioning and CSS and how to change image opacity). Another objective was to learn more about frameworks and how they are built. I achieved all of these objectives. None of them are perfect I'm sure, but I learn more with each project.

I have quite an affinity for spacey and sciency things and I love learning. I thought it would be fun to create an educational site about each of the planets in our solar system and the minerals that create them. Each page is one planet with exception to the world logo in the middle which redirects to a page with information about space dust and space. Each page begins with a navbar at the top with all planets separated with 1 world logo in the middle of them, spaced evenly. The background of each page is a generic galaxy gradient with stars. The text for each page is white for the headers, and slightly off-white for text content. I boxed each paragraph into a left & bottom-bordered outline and positioned it to the right. Each paragraph on each page gives information over the planet the page concerns. To the left is a photo with some opacity representing each mineral for each planet with the name of the mineral as a header and a paragraph set on an opaque background div giving some information about the mineral. Below all of this is a footer which contains icons representing each planet and their relative sizes (except for the sun of course). The website is meant to be friendly to kids and an educational experience.

The framework elements are relatively the same as my previous framework so that they coincide. I have styles for blockquote, button, card, code, form, header, and nav elements. I also used this exercise to learn how to create my own grid. The blockquote style is as it is in the framework: with a left and bottom border that is slightly off-white. The button has a few styles. It has one main style of aqua with white text and with a hover text and drop-shadow of deep purple. There are small, medium, and large customizations available in regards to the size of the button. The card is just a simple container with a header and content space and is mostly customizable in regards to background. The codetext has a set background color and text color so it's obviously code. The form has custom borders and hover elements as well as set positioning. The header sets the font style and color and positioning, etc. for each header in the framework. The navbar is made to contain many menu elements and center-align them with hover effects namely a purple box over the hovered element. The navbar is made to have a central logo element and have the menu elements spread out from it evenly spaced. For the grid element I created only a left and right section and had them take up half of the full column amount each. The columns span 1 / 13 like always with auto rows.