Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

Media Queries

Media Queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.

https://github.com/odiegosilva1/ui-clone

Google UI clone made with HTML and CSS 3.

clone css3 html5 media-queries ui-design

Last synced: 21 Mar 2025

https://github.com/jayanth-kotni/match-game-react.js

Match Game is a fun and challenging game where you match images within categories. Score points, beat the timer, and enjoy multiple rounds. Play again to reset scores and categories for endless fun!

components css flexbox media-queries reactjs responsive-web-design timeinterval

Last synced: 28 Mar 2025

https://github.com/saleh0987/mealify_site

Route_Frontend_Tasks-C43-

css3 html5 media-queries

Last synced: 28 Mar 2025

https://github.com/oleg-putseiko/match-breakpoint

A library of optimized React components and hooks for matching media queries

breakpoint match-media media-queries performance react tailwindcss typescript

Last synced: 11 Apr 2025

https://github.com/zeeshanali90233/nexskill-frontend-b-5

Frontend Development with AI Chatbot Course - Batch 5 by NeXskill, Lahore. Learn the fundamentals of HTML, CSS, JavaScript, Git/GitHub, and AI chatbot integration using APIs like ChatGPT, Gemini, Phind, and Claude LLM. A beginner-friendly, 16-lecture course to kickstart your journey in frontend development and AI-powered applications. 🚀

ai animations api chatbot chatgpt clone-website css dom event-loop gemini git github githubdesktop html javascript llm media-queries restful-api weather-app

Last synced: 04 Apr 2025

https://github.com/hashal890/youtube-app

Builded YouTube app with some functionalities in unit-3 @ Masai School.

css html js media-queries

Last synced: 11 Apr 2025

https://github.com/arpit-shrivastva/useability-hub-webpage

Experience the sleek and responsive design of our Usability Hub webpage, meticulously crafted with HTML, CSS, and media queries. Navigate seamlessly across devices as our website adapts effortlessly to different screen sizes, ensuring a user-friendly experience on desktops, tablets, and smartphones.

css html media-queries responsive

Last synced: 03 Mar 2025

https://github.com/irynadidkivska/yummypug

A website with favourite sweets

adaptive-layouts css3 flexbox-css html5 media-queries

Last synced: 13 Apr 2025

https://github.com/prabhu30/three-column-card-design

This is a challenge project listed on frontend mentor website. I built the project by looking at the design image given.

css3 html5 media-queries

Last synced: 28 Mar 2025

https://github.com/ameyjoshi0209/mealmate

Mealmate is an innovative system designed to automate and streamline attendance tracking for messes and cafeterias using unique QR code generation.

bootstrap composer css3 html5 javascript jquery media-queries mysql-database php phpmyadmin qrcode-generator xampp-server

Last synced: 21 Mar 2025

https://github.com/matheusfdosan/devlinks-rocketseat

O DevLinks é um agregador de links para usar como cartão de visitas online.

css dom figma git github html javascript media-queries rocketseat

Last synced: 23 Feb 2025

https://github.com/maroun-baydoun/use-media-query

Listen to media query matches in React

hook media-queries react responsive typescript

Last synced: 21 Mar 2025

https://github.com/gunjankadu/edge-ledger

A Fictional Website Markup Using HTML5,CSS3,Flex and Media Queries

css3 flexbox html5 javascript media-queries

Last synced: 23 Feb 2025

https://github.com/gunjankadu/hotel-website

Hotel Website Only HTML & CSS

css3 html5 media-queries

Last synced: 23 Feb 2025

https://github.com/dimitribouteille/sass-no-duplicate-breakpoints

Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.

css media-queries responsive responsive-css sass sass-library sass-mixins

Last synced: 05 Apr 2025

https://github.com/beanloop/react-with-media

React HOC for watching media queries.

higher-order-component media-queries

Last synced: 23 Feb 2025

https://github.com/harisdev-netizen/faqaccordioncard

Frontend Mentor Challenge - FAQ Accordion Card

css html media-queries

Last synced: 24 Feb 2025

https://github.com/talhat298/bus-travel

A simple, pure CSS animation featuring a bus and a car traveling across a detailed background. The animation includes moving vehicles with rotating wheels, all designed using only HTML and CSS, without any JavaScript.

html-css media-queries

Last synced: 05 Apr 2025

https://github.com/talhat298/quader

A responsive web page featuring a full-screen background, Bengali text overlay, and looping audio, prompting the question: "Will all problems be solved just by saying sorry?"

audioapi css3 html5 media-queries responsive-web-design

Last synced: 05 Apr 2025

https://github.com/pushpendra-1697/kalvium

Draggable & Droppable

html-css-javascript media-queries

Last synced: 24 Feb 2025

https://github.com/nermfrontdev/practice-index

CSS practice project. Basic HTML file with its tags, in CSS I added a @media (min-width: 1900px) making "Mobile First".

css3 html5 media-queries

Last synced: 03 Mar 2025

https://github.com/mosalem149v2/bank-account-simulator_debi-task

A web-based bank account simulator allowing users to create accounts of various types (Savings, Checking, Business), perform transactions, and manage loans. The simulator supports deposit, withdrawal, loan requests, interest calculation, and more.

account-creation business-features css3 dom-manipulation error-handling html5 interest-calculation js media-queries responsive transactions

Last synced: 04 Mar 2025

https://github.com/mosalem149v2/football-match-scoreboard_debi-task

A simple web application to display a football match scoreboard, featuring team rosters, match odds, and functionalities for substitutions and goal tracking. Built using HTML, CSS, and JavaScript.

css3 html5 js media-queries responsive

Last synced: 04 Mar 2025

https://github.com/mdmourao/nike-advertising

Nike Ad - Basic HTML example

css html5 media-queries svg

Last synced: 05 Apr 2025

https://github.com/byteyard/fluidsizingcss

FluidSizingCSS is a pure CSS solution for responsive design, offering fluid sizing locks for seamless scaling across devices. It eliminates the need for external tools, enabling developers to create adaptable, lightweight, and fast interfaces with native CSS.

adaptive-design css fluid-sizing media-queries native-css responsive-design scaling web-development

Last synced: 05 Apr 2025

https://github.com/narendrakoya999/nft-preview-card-component

This is A NFT Preview Card Component Project using HTML5 and CSS3

css-flexbox css3 html5 media-queries

Last synced: 21 Mar 2025

https://github.com/gustavogss/instagram-clone

Tela inicial do site do Instagram - Html e Css

css3 flexbox html5 media-queries

Last synced: 21 Mar 2025

https://github.com/amokorankye/personal-portfolio-website

Welcome to my portfolio. Explore my work, get in touch, and learn more about my journey in the tech industry.

html-css javascript media-queries

Last synced: 06 Apr 2025

https://github.com/eaglestear/first-production-website

A website I developed for a graphic designer - this is currently waiting to be tweaked and can then go live. Uses JS Flickity plugin to power the gallery.

first-client media-queries responsive-web-design web-development

Last synced: 29 Mar 2025

https://github.com/mohamedsanosy/nataliapnk

🚀 Welcome to my GitHub! Here, I thrive on embracing 💡 new tech challenges and crafting seamless user experiences. 💻☕ Fueled by coffee, I see every line of code as an opportunity ✨ to make the web better 🌐!

css flexbox grid html javascript media-queries react redux responsive-web-design

Last synced: 24 Feb 2025

https://github.com/muhammadaliashraf/grumpy_bear_town

Grumpy Bear Town: A whimsical and charming single-page website that transports you to a world of grumpy bears and their daily adventures. Explore delightful illustrations, funny anecdotes, and interactive elements that capture the spirit of these lovable but grumpy characters. Dive into Grumpy Bear Town and experience a bear-y good time!

css-flexbox css3 front-end htm-css html html-website landing-page landingpage media-queries muhammadaliashraf resposive-design single-page-app website-development websitedesign

Last synced: 17 Feb 2025

https://github.com/cabosmanuel/grid-food

Grid Food, responsive grid website

css grid html media-queries responsive

Last synced: 06 Apr 2025

https://github.com/cabosmanuel/batata-bit-mobile

Batatabit website project (HTML+CSS)

css html media-queries mobile-first responsive scroll-snap

Last synced: 06 Apr 2025

https://github.com/grayturtle01/google-front-end

Google Search Front-End Implementation

css flexbox html javascript media-queries responsive-design

Last synced: 04 Apr 2025

https://github.com/sohomsaha/tindog

In this project I had used HTML5,CSS,BOOTSTRAP and MEDIA QUERIES

bootstrap4 css html5 media-queries

Last synced: 22 Mar 2025

https://github.com/ushihiraga/scss-media-queries

SCSS Media Queries Mixins

media-queries mixins scss

Last synced: 04 Apr 2025

https://github.com/maiquitome/rocketseat-projeto-zingen-responsividade

🎤🎙️🎶🎵 Projeto do curso `Full-Stack` da **Rocketseat**

media-queries responsive-design rocketseat-fullstack-course

Last synced: 05 Mar 2025

https://github.com/gabyfutemma/kitten

Laboratoria - Sprint 3 - Challenge: make images fit the screen size

css3 grid html5 media-queries

Last synced: 22 Mar 2025

https://github.com/etcdigital/atomic-css

Atmc provides a reusable html styling process, eliminating any duplication of styles and minimizing on demand, reducing about 70% of the CSS weight. Styles are automatically added to the page without any additional effort.

css-atomic-elements css-in-js css-in-react css-prefix css3 keyframes media-queries

Last synced: 05 Mar 2025

https://github.com/mujahidbcs92/ifza-intvtask

Promo landing page using html, css, js and for responsive only media quries.

css css-flexbox css-grid css-grid-layout css3 html javascript media-queries

Last synced: 22 Mar 2025

https://github.com/lankaukk/cat-treat-landing-page

Responsive Landing Page for Public Good's cat food Product 🐱

css cssflexbox html-css media-queries

Last synced: 26 Mar 2025

https://github.com/danilosalvador/zingen

Projeto 05 do MBA Rocketseat Full-stack para reforçar os conceitos de CSS Media Queries para criação de páginas responsivas.

css html media-queries

Last synced: 25 Feb 2025

https://github.com/rohitchourey0809/my-camera-app

CaptureCam is your go-to camera app for effortless photo and video capture. With intuitive controls and dynamic features, it's designed to enhance your photography experience.

css-flexbox grid-layout media-queries optimization react react-hooks react-webcam

Last synced: 14 Mar 2025

https://github.com/rasujon3/leader-board-css3

Module-9 - Plain HTML CSS responsive website

css3 flex grid html5 media-queries

Last synced: 06 Apr 2025

https://github.com/rimshasajid436/facebook

Create Responsive Facebook Clone For CSS Final Task..

box-shadow cursor flex media-queries

Last synced: 05 Mar 2025

https://github.com/simonapiz/tsunamicoffee

Make this site responsive with CSS media queries

codecademy-solutions css html media-queries responsive-design website

Last synced: 07 Apr 2025

https://github.com/anandchowdhary/prefers-contrast

🕶️ Check a user's preference using CSS @media(prefers-contrast)

css media-queries prefers-contrast typescript

Last synced: 18 Feb 2025

https://github.com/anandchowdhary/light-level

💡Get a user's light level using CSS @​media(light-level)

css light-level media-queries typescript

Last synced: 18 Feb 2025

https://github.com/annal001/deep-dish-pizzeria

A web application of a fictional pizzeria (Deep Dish Pizzeria) that allows users to place order(s) for their pizzas online, in terms of size, type of crust and toppings

bootstrap5 css3 html5 javascript jquery media-queries

Last synced: 14 Mar 2025

https://github.com/mehmet-github06/password-genarator

This is a simple web application that allows users to generate secure passwords with various options for customization.

html-css-javascript media-queries notyfication responsive-design

Last synced: 05 Mar 2025

https://github.com/mehmet-github06/informative-web-page

This is a simple informative web page template showcasing various sections such as navigation, posts, and developer's features.

css3 flex html5 media-queries responsive

Last synced: 05 Mar 2025

https://github.com/mehmet-github06/transistor-website

TRANSİSTOR is a website that showcases various courses and information sessions.

animation css3 flex html5 media-queries

Last synced: 05 Mar 2025

https://github.com/mehmet-github06/password-genarator-2

This is a simple web application where users can generate secure passwords with various customization options.

dom-manipulation html-css-javascript media-queries responsive-web-design

Last synced: 05 Mar 2025

https://github.com/mehmet-github06/travel-app

This project is a simple web interface designed for a travel site using HTML, CSS - SASS and JS.

flexbox html-css-javascript media-queries responsive sad

Last synced: 05 Mar 2025

https://github.com/mehmet-github06/sport-news-website

This is a simple website template for displaying sports news. It consists of a grid layout showcasing various news articles with images and brief descriptions.

css-grid html5 media-queries responsive

Last synced: 05 Mar 2025

https://github.com/derektypist/navigationmenu

Example of Navigation Menu with Hover Effect

css3 gases header hover media-queries navigation solids vertical

Last synced: 22 Mar 2025

https://github.com/dracudev/html-css-flex

Project to practice HTML and CSS.

animations-css css3 html5 media-queries

Last synced: 30 Mar 2025

Media Queries Awesome Lists
Media Queries Categories