Travelgram is a single-page profile and gallery that showcases a travel creator using semantic HTML and modern, modular CSS.
-
HTML
<!DOCTYPE html>,<html lang="en">,<meta charset="UTF-8">, and viewport meta for standards mode and responsiveness.- Semantic sections:
<nav>,<header>,<main>,<footer>, plus utility wrappers like.containerand.bg-surface-color. - Navigation with a list-based primary menu, logo link, and profile avatar.
- Profile header with image, bio, and an info list (
#info) for location, countries, and photo count. - Gallery of images in
<main>, all usingloading="lazy"for performance.
-
CSS files
styles/index.css: imports all section styles (globals,nav,header,main,footer).globals.css: reset, CSS variables (colors, typography), basebody,a,img, and.container.nav.css,header.css,main.css,footer.css: layout and responsive rules per page section.
- Semantic layout elements instead of generic
divs wherever possible. - Descriptive
alttext on all images and icons. - Lazy-loaded gallery images (
loading="lazy") to reduce initial load time. - External Google Fonts (Poppins, 400/700) with
preconnecthints for faster font loading.
-
Design tokens with CSS variables
- Colors (
--brand-color,--surface-color, text colors, etc.) and a type scale (--text-lg,--text-md,--text-base,--text-sm) defined in:root.
- Colors (
-
Layout
.containerfor centered, max-width layouts with horizontal padding.- Flexbox used throughout:
nav: horizontal alignment of logo and menu, avatar sizing withobject-fit: coverandborder-radius: 50%.header: two-column layout for profile and info;#profileas a flex row with gaps.main: wrapping image grid usingdisplay: flex,flex-wrap: wrap, andgap.footer: flex row withmargin-right: autoon the first span to split content left/right.
-
Gallery styling
- Square tiles via
aspect-ratio: 1 / 1,object-fit: cover, and rounded corners.
- Square tiles via
-
Global styling
- Reset via
* { margin: 0; padding: 0; box-sizing: border-box; }. - Links styled to inherit color, with hover state changing to brand color and adding underline.
- Images constrained with
max-width: 100%anddisplay: blockfor responsive behavior.
- Reset via
- Single breakpoint at
max-width: 768pxused across styles:nav: wraps content and tightens gaps.header: stacks columns, shrinks avatar size, makes#infoa wrapping, two-column flex row.main: centers the gallery and caps image width withwidth: min(100%, 16rem).footer: switches to a vertical stack with left-aligned items..container: reduces horizontal padding for smaller screens.
- Open
index.htmldirectly in a browser