My own site!
By
@Nasko
- 2 Devlogs
- 3 Total hours
It's very personal to me :D
Ship #1
I created my personal site using HTML and CSS. I thought of making a ticket-shaped design that had two rectangles, one bigger than the other, with corners cut at a specific point to make two octagons, and I achieved it using polygons in CSS, and I created multiple elements so that I could use them seperately in HTML, becuase I was met with a bug that when I combined the two, their clip-path would sync and leave me with the same shape with the same dimensions, so I came up with the idea to do it that way using a wrapper, a back element, and a front element. I wanted a navigation bar to move between sections (which would come in handy if I were to make the site longer), and I managed the movement of the sidebar and the photo I placed on the right using position commands. I chose a blue color palette from ColorHunt (I provided the link in the README) to make the site look better. I needed to divide the page into left, middle and right at the first place, I tried using float boxes at the first place becuase it was what I saw from a YouTube tutorial, but after digging in some more, I found flex boxes, and I used flex boxes to make a partition of 1:3:1. Site is hosted in GitHub pages, and the code is on GitHub too, I tested them. You just have to go to the site to see it.
2h 16m 48s logged
I spent more time on developing the design. I came up with the idea to make ticket shapes for the sections and the navigation bar, and splitting the diagram into 3 as I needed left, right, and middle sections on my design. I created them using flexes and a flex container, and I did some debugging to display content in them.
After doing the split, I created ticket as a css class with a clip-path class named cut-corners to get a basic ticket shape which I did get. Afterwards, I tried making a bigger copy of that ticket that would sit behind the smaller one to give a sense of a border, but I struggled on that for some time, because the solution I tried with .ticket::before didn’t work as it got its clip-path directly from ticket, thus making their dimensions same, and making the bigger one disappear, so I thought of doing it with a container. I created ticket-wrapper, and turned .ticket::before to ticket-back, did some splitting up in html, and I got my desired look on the page.
40m 22s logged
I started writing the html code as I completed the tutorial, and made a simple site with some descriptions, but it lacks design elements as I only used a background indicator and nothing else in css file. My next step will be to organise those with proper design in css.
