My Codes
This is a repository to host some layouts types I've learned and made while following tutorials.
☆ My First Jquery Code: This is the first code I write, basing with jquery basics .click, .toggleClass(), .hide() and .show(). I can't believe I just started the script with $(".btn-menu").click(function(){ and tried a few things I've learned so far and actually wrote my own very first jquery code.
☆ A facebook inspired post style: This was really cool and funny to made. And I was very impressed on how less time I used to code this little thing. credits to flaticon.com for the svg icons.
☆ My first pop up box written with Jquery: I wrote from scratch yeassssssssss
☆ Abeno's Porfolio: This is a site result of this tutorial by Kevin Powell on how to make a portfolio with slide navigation and a modal gallery. The character on the 'Porfolio' is Abeno Haruitsuki from the anime Fukigen na Mononokean
☆ Image animation on scroll: It was a tutorial I've learned with this brazilian youtube channel.
☆ CSS Grid Layout with Column-Count: Was a tutorial I've refreshed my memory with this site.
☆ My first Sticky with Javascript: The first javascript code I wrote ever!!! I've tried some js things I've learned in the past week and came up alone, with a sticky sidebar on scroll effect!!!
☆ My first Pop Up Box with Javascript: After doing the sticky sidebar with javascript only, I tried a few things and could create a click show and hide box, a popup box with fade in and out effects!!
☆ Posts changing content to a menu content It was inspired by those false iframe menu that was trend in tumblrs of tutorials, back in 2013.
☆ Menu Fake Iframe Since I wrote a post content that changes into a menu content, based on the fake iframe tutorial, I decided to make the actual menu fake iframe following some of these tutorials. I created nothing here.
☆ My Hamburger Menu with Pure Javascript I just made a hamburger menu with javascript only!
The horizontal menu changes to a full page and vertical menu on mobile.
☆ Horizontal Layout with Display Grid A responsive horizontal layout using display grid.
☆ Cool Sidebar A simple responsive layout with a cool sidebar style.
☆ Grid Layout with Grid Menus A simple and responsive grid layout with some grid menus inside of the boxes.
☆ Sticky sidebar in a Grid Layout A simple and responsive grid layout, and the sidebar sticks on top when scrolled, using position sticky.
☆ Sidebar Examples Some simple examples of sidebar (mostly the welcome gif/description).
☆ Display Grid with Javascript A simple two columns grid layout fixing height issues with javascript. This layout I did while following this youtube tutorial.
☆ A story with css An engaging story with css, using position sticky, while following this youtube tutorial by Kevin Powell. I didn't know position sticky could as useful and cool as this.
☆ Javascript Lightbox This is really really really weird lightbox script I just wrote. It's really funny and I don't know how I cannot get repetitive but, well, that worked! lol
☆ Colors Full Page I decided to split the colors page into two: one with my fave colors for real, and other for colors I think is cute but are not my faves.
☆ Responsive Portfolio Mobile First One of the first ones responsives layouts I made while following responsive tutorials. This one is the result of following this tutorial on youtube. I was trying to figure out the 'mobile first' layout.
☆ Fun Grid Trying new things with grid-column and grid-row to make a grid layout.
☆ Grid with some Tumblr Posts Altough display grid is not the best to tumblr (or other blogs) posts, I tried to make a grid layout using some of my blog's posts as examples. I think is very nice, but is not perfect for blogs. I recommend column-count, even though it will change the posts order.
☆ Hoozuki no Reitetsu Layout A responsive and simple layout using css grid and flexbox, featuring characters from the anime Hoozuki no Reitetsu. The layout was inspired by this youtube video. Since I made the coding on my own, when he updated with the coding process, I decided to follow the tutorial as well, to see things I did different, or similar, etc.
☆ Ten Count Site Inspired Layout A responsive and simple layout ispired by the shop site of manga (and soon anime) Ten Count. I used css grid, flexbox and lots of position absolute/relative in some of the parts of the layout. It was fun!
☆ Tumblr posts as a mosaic grid layout I just tried a different thing using display grid with actual posts on tumblr. Instead of trying to figure out which size each post must have, i just trew a nth-of-type stuff and forced the post to fit that part of the grid, and hid things with overflow hidden. It has option to hover the post and see links to like, reblog and permalink (which should be a full ver of the post.
☆ Bishonenlover About Page An about page inspired by the current theme of the blog bishonenlover. In addition, the last three boxes, that had the contents hidden, show said contents when clicking, as a popup box kind of.
☆ Pink is, indeed, the best! A simple but powerfull responsive layout with a strong pink color as accent. It was used a lot of css grid and flexbox to build it. It also has a hamburger menu when on small screens.
☆ Copyable SVG codes for demos
Since I like to do a lot of coding using social media icons, I just tought I should make them codes a lot easy to access. Using the same codes as my color page, I just thought of something simple with copyable codes on click. The layout itself is responsive but very simple.
☆ Grid Layout using VW
A simple grid layout using VW (viewport width) to make it responsive.
☆ Palevioletred Layout
A grid layout with CSS and Javascript with palevioltred color as main accent.