Frontend Blog 🖋️
Hope everyone is doing well and staying safe! After a few weeks of hard work, this is the frontend of a blog, a sort of template and project I made to practice my
CSS. This site was made using
CSS (of course!), and some
Quick look of how it looks like:
This blog takes the theme of photography (for the template) and has many pages like a home page, article page, about us page, and many more! However, it's only the frontend of the blog, meaning there's only the looks and the design. You can of course use the code, and add/change/remove what you want to make it functional (but please do credit me).
The design uses the following colors:
- Background color 1:
- Background color 2:
- Text color 1:
- Text color 2:
The 'organic' shapes you see (for example the blobs, waves, etc.) are
SVGs generated with this wonderful app called Haikei where you can create so many different designs.
The fonts are from Google Fonts; they are
'Merriweather', serif for the article font, and
'Roboto', sans-serif for most of the other things (buttons, descriptions, etc.)
The images of the blog that you can see:
Were made by myself with Google Slides by using wireframes and then creating the layout of the blog with shapes. You can view how it was made here.
This site is fully responsive, meaning that you can view it on any device (computer, tablet, phone, etc.) and it'll fit great!
For example, the About Us page on a phone:
Or on tablet:
This was probably the most challenging part of the creation of the site.
Here's a complete list of everything this blog contains:
- fade in, glowing name of blog with parallax effect (cool scrolling effect with background images)
- intro section with greeting, author image, name, short bio, contact icons, and 'read more about me' button
- about section with image of how the blog looks like, description of the blog, and 'read more about us' button
- contact section with image of an article, and full contact form
- gallery of articles, with each article having a title, date published, picture, short description, and read more button
- template article (article 1) with 'ribbon' to show it can be read
- main article which starts with a big picture, then title, author picture, author name, date published, how long it takes to read, and icons with tooltips to share the article
- other articles on side or bottom of article (depending on device size) with their name, date published, picture, short description, and 'read more' button
- landing page with name and short biography
- main section with 3 cards; about me, my projects, and blog
- contact section with closing sentence and contact icons
- landing page with name of blog and description of what the blog is about
- features section with 3 cards containing 3 key features of the blog; design, communnity, and learning
- more about us section, in an article form, with smaller sections inside (who we are, why we built this, our values and missions, and contact us)
Each page has a fully working, responsive navbar. The home page even has the navbar that clips on to the top of the page when scrolled to (which is the only part that uses
[If you want to be able to learn more about how I made the navbar, features section, and contact page, check out this tutorial/template!]
Well, that's about all! Please let me know of any questions, comments or thoughts! Feel free to fork and remix this Frontend Blog to customize it to your preferences! [And make sure to learn some useful features for websites here!]
Nice job! I see you tried to use Merriweather, but the font isn't imported so you end up using Times New Roman. You can import it using
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet"> or
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');. Nice job though!