Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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/pijusp/7-sign-up2

Responsive HTML and CSS sign-up form

css3 html5 media-queries responsive

Last synced: 14 Dec 2024

https://github.com/europa1613/resproject

Responsive Web Design from Scratch

css media-queries responsive-design

Last synced: 22 Jan 2025

https://github.com/mendjoy/teste_mediaqueries

Projeto criado durante o curso de HTML5 e CSS do Cursoemvideo, para estudo do conceito de MOBILE FIRST e media Queries.

css html media-queries mobile

Last synced: 24 Jan 2025

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

Module-9 - Plain HTML CSS responsive website

css3 flex grid html5 media-queries

Last synced: 20 Dec 2024

https://github.com/rosines-almeida/kitten

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

css grid html5 media-queries

Last synced: 22 Jan 2025

https://github.com/daxchen/sass-respond-to

A sass mixin to write media queries with ease!

media-queries mixin respond-to sass

Last synced: 22 Dec 2024

https://github.com/ahmedmitwally77/mealify

Mealify is a responsive web app designed for food lovers who want an easy, elegant way to browse meal options. Built entirely with HTML, CSS, and media queries, Mealify showcases how powerful simple web technologies can be for creating engaging, user-friendly designs across all devices

css3 dark-mode flexbox googlefonts hover html5 media-queries responsive responsive-web-design transition

Last synced: 22 Jan 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: 14 Jan 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: 14 Jan 2025

https://github.com/mayen007/article-preview-component

A responsive article preview component built with HTML, SCSS, and JavaScript, featuring interactive share buttons and mobile-first design.

flexbox frontend-mentor frontendmentor-challenge html javascript media-queries scss web-development

Last synced: 14 Dec 2024

https://github.com/peterbenoit/getviewport

GetViewport is a lightweight JavaScript utility for responsive breakpoint detection. It dynamically injects CSS breakpoints and allows JavaScript to check the current viewport size directly. This setup avoids the need for complex SCSS configurations and pseudo-elements, making it simple to integrate into any web project.

javascript media-queries responsive-design viewport

Last synced: 28 Jan 2025

https://github.com/mafsida/greentech-survey

A responsive survey form for the fictional GreenTech Solutions, created for FreeCodeCamp's Responsive Web Design certification. Includes HTML5 validation, dropdowns, radio buttons, checkboxes, and custom styling with Montserrat and Lora fonts.

accessibility cross-browser-compatibility css flexbox forms freecodecamp frontend google-fonts html-css html5 media-queries normalize-css open-source responsive-design semantic-html survey-form web-design

Last synced: 17 Jan 2025

https://github.com/mafsida/goit-markup-hw-06

This is the sixth assignment from the Full Stack Developer course at GoIT. This module focuses on creating a responsive web page using CSS media queries. It incorporates the Mobile First approach and implements a fully functional mobile navigation menu

adaptive-images cross-browser-compatibility css frontend github-pages goit goit-markup-05 homework html media media-queries mobile-first mobile-menu modal responsive-design semantic-web studying web-design web-development

Last synced: 17 Jan 2025

https://github.com/martapolii/stand-for-ukraine-website

This project is a multi-page website created using solely HTML and CSS. It raises awareness about the Russian invasion of Ukraine, covering topics like stress, management techniques, and ways to help. The site uses HTML and CSS for styling and responsive design, with an emphasis on accessibility and information clarity.

accessibility css flexbox flexbox-css html media-queries responsive-design responsive-layout responsive-web-design styling-css web-development

Last synced: 13 Jan 2025

https://github.com/chiragaug6/responsive-gallery-css-grid

Here is the HTML and CSS assignment which i have submitted during my Full stack web development course Provided by pwskills.com

css-grid css3 html5 media-queries responsive-layout

Last synced: 14 Jan 2025

https://github.com/chiragaug6/fully-responsive-portfolio-layout

This is a assignment given in "Full Stack web development" course by PWSKILLS, built using HTML5 and CSS3

css3 html5 media-queries responsive-design

Last synced: 14 Jan 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: 23 Oct 2024

https://github.com/namonaki0/fe-mentor-3-column-preview-card

Frontend Mentor - 3 Column Preview Card

css frontend-mentor html media-queries

Last synced: 15 Jan 2025

https://github.com/oppahero/product-preview-card-component

Product preview card component build with HTML and CSS

css css-reset css-variables flexbox grid hml media-queries mobil-first

Last synced: 24 Jan 2025

https://github.com/oppahero/testimonials-grid-section

Testimonials grid section build with HTML CSS

bem css flex grid html media-queries mobile-first

Last synced: 24 Jan 2025

https://github.com/edijunior88/freecodecamp_principios_do_design_responsivo

Neste curso, você vai aprender a usar CSS para fazer suas páginas ficarem bonitas, não importa em qual dispositivo elas estão sendo visualizadas.

html html5 media-queries

Last synced: 22 Jan 2025

https://github.com/mikeludemann/dynamic-media-queries

A dynamic media-queries styling method for all dimensions

media-queries nodejs

Last synced: 02 Feb 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: 16 Jan 2025

https://github.com/abdulmoiz34/password-generator

Simple Project built by javascript | Practice project

css3 html javascript media-queries

Last synced: 23 Jan 2025

https://github.com/praveenkumar8754/project1

to create a travel landing website using HTML,CSS

css3 html5 media-queries

Last synced: 23 Jan 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: 21 Jan 2025

https://github.com/dmitrymalakhov/media-breakpoints-watcher

Library for easy use of media breakpoints in js

breakpoints css-in-js media media-queries

Last synced: 24 Jan 2025

https://github.com/noclist/carps-space

carps space is my personal website where I experiment with modern CSS techniques

css css-animations css-custom-properties css-flexbox css-grid css3 eleventy front-matter html html5 media-queries njk nunjucks sass ssg

Last synced: 18 Jan 2025

https://github.com/mediamonks/seng-device-state-tracker

DeviceStateTracker is a utility class that tracks which media query is currently active using the matchMedia API.

javascript media-queries seng typescript

Last synced: 30 Jan 2025

https://github.com/rmoongit/note-balls

NoteBalls! Add and edit your personal notes with vue reactive components! ( if don't work, use vpn for firebase )

bulma-css components composition-api firebase hosting laravel media-queries npm routers slots vue3

Last synced: 01 Feb 2025

https://github.com/anithad1625/howtocss-instaclone

HowToCSS-InstaClone is a simplified Instagram-like social media feed interface built using HTML, CSS, and Bootstrap Icons. It features a responsive design for various screen sizes, a grid-based feed layout, user profiles with profile pictures and usernames, posts with images and captions, and reactions and engagement options such as likes and comme

bootstrap-icons css html media-queries

Last synced: 13 Jan 2025

https://github.com/rfabreu/fptv-webfeatures

Official repository for the website of FPTV, a television channel. It contains the source code for the website's features and user interface, designed for a seamless viewing experience. This repository serves as a platform for collaboration, version control, and improvement of the FPTV website.

engeneering front-end-development glassmorphism html-css-javascript media media-queries streaming television television-stations television-studios webdevelopment website

Last synced: 25 Jan 2025

https://github.com/mesbol6647/net.wash-dry

NetWash&Dry Checkout App is a basic level web application(for educational purposes) that allows users to add and remove carpet cleaning products from their cart and calculate the total amount

css css-flexbox css3 dom-manipulation html5 javascript media-queries

Last synced: 22 Dec 2024

https://github.com/mesbol6647/html-css-projects

This repository contains some small-scale, basic level projects I worked on when I first started learning HTML and CSS.

css-flexbox css-grid css-grid-template css3 html-template html5 media-queries

Last synced: 22 Dec 2024

https://github.com/wadiebenabdouh/s.s.s-food

a restaurant webiste testing.

css flexbox html media-queries

Last synced: 22 Dec 2024

https://github.com/sourav-cse-dev/fitness

Created a responsive landing page design, used HTML and CSS, where I have applied Flex-box, Grid, Media Query, and some Optimizations.

css figma flexbox grid html media-queries responsive-web-design uiux-design webdesign webdevelopment

Last synced: 25 Jan 2025

https://github.com/sauloroman/nucleus-landingpage

Landing Page about a fictional credit card with a responsive design

bem-methodology css flexbox grid html media-queries

Last synced: 30 Jan 2025

https://github.com/sauloroman/sunnyside-landingpage

Responsive web side about an artistic company.

bem-methodology css html javascrtipt media-queries menu-mobile

Last synced: 30 Jan 2025

https://github.com/sauloroman/omnifood-landingpage

This is a landing page about a start-up which offers food plans.

css desktop-first flexbox-css grid-layout html javascript media-queries responsive-design

Last synced: 30 Jan 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: 23 Oct 2024

https://github.com/danfalcon225/responsive_hamburger_menu

Responsive Hamburger Menu with HTML, CSS, & JavaScript

css hamburger-menu html javascript media-queries responsive

Last synced: 29 Jan 2025

https://github.com/pedroreves/stats-card-preview

Stats Card Preview Website | FrontEnd Mentor Challenge

bem css css3 flexbox html html5 media-queries responsive

Last synced: 31 Dec 2024

https://github.com/iwatanikenji/rocket-nfts

Landing page challenge from Rocketseat with responsive layout added

challenge media-queries mobile-navigation responsive rocketseat

Last synced: 23 Dec 2024

https://github.com/aldamayorgadev/learning-responsive-web-design

Ejemplos de uso de Media Queries para el responsive web design.

css html media-queries responsive-web-design

Last synced: 23 Dec 2024

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: 09 Dec 2024

https://github.com/davealdon/advanced-tailwind

Advanced Tailwind Techniques for Interesting Use-Cases

media-queries nextjs react tailwind tailwind-css tailwindcss typescript

Last synced: 12 Jan 2025

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

React HOC for watching media queries.

higher-order-component media-queries

Last synced: 05 Jan 2025

https://github.com/archana-nagaraj/frontend-mentor---3-column-preview-card-component

Frontend Mentor challenge to design a 3-column preview card component using HTML and CSS. Used grid for layouts and media queries for covering various dimensions.

css frontend-mentor html media-queries

Last synced: 13 Jan 2025

https://github.com/gitusergb/myyoutube

This web application is a clone of YouTube, built using React JS and Material UI.

material-ui media-queries rapidapi react

Last synced: 11 Dec 2024

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

Sprint to practice HTML and CSS.

animations-css css3 html5 it-academy media-queries

Last synced: 11 Dec 2024

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: 26 Jan 2025

https://github.com/coderboy-raiyan/landing-template

Landing-template using pure CSS. Without any frameworks. And It's fully mobile & tablet responsive.

css3 flexbox html5 media-queries

Last synced: 17 Jan 2025

https://github.com/coderboy-raiyan/football-website

Responsive football website with pure css and html.

css3 flexbox html5 media-queries

Last synced: 17 Jan 2025

https://github.com/zoobereq/secret-agent-supply

Project developed for Codecademy Intensive "Build Websites from Scratch". Utilizes HTML5, CSS3 + Flexbox, Media queries, and responsive design

codecademy codecademy-intensive css css3 flexbox flexbox-css flexbox-grid html-css html5 media-queries responsive-design responsive-web-design

Last synced: 17 Dec 2024

https://github.com/zoobereq/tortoiseshell-optics

A project developed for a Codecademy Intensive "Build Websites from Scratch". It utilizes HTML5, CSS3 + Flexbox, and responsive design

codecademy codecademy-intensive css3 flexbox flexbox-css flexbox-grid html-css html5 media-queries responsive-design responsive-web-design

Last synced: 17 Dec 2024

https://github.com/leydev/freelance-isifid

Nesse freelance o site para Isifid foi construido com base em um arquivo .psd fornecido pelo contratante.

bootstrap4 css3 html5 jquery media-queries psd-to-html

Last synced: 10 Jan 2025

https://github.com/irynadidkivska/yummypug

A website with favourite sweets

adaptive-layouts css3 flexbox-css html5 media-queries

Last synced: 24 Dec 2024

https://github.com/akramadjab/order-summary-component

A simple Order Summary component code challenge to Frontend Mentor using Flexbox, Animation, and Hover state

animation animation-css animations bem bem-css bem-methodology css css-animations css-flexbox html media-queries responsive-design

Last synced: 01 Jan 2025

https://github.com/achalesh27022003/techdoc

This project is part of FCC curriculum and has responsive, descriptive and bookmarks use in technical writing of CSS

bookmarks css css3 cssflexbox documentation html media-queries technical-writing

Last synced: 01 Jan 2025

https://github.com/jmgogo/basic-webdev

A sandbox repository containing static web development files. 🗄️

css grid html media-queries

Last synced: 24 Dec 2024

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: 19 Dec 2024

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: 19 Dec 2024

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: 19 Dec 2024

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

Nike Ad - Basic HTML example

css html5 media-queries svg

Last synced: 19 Dec 2024

Media Queries Awesome Lists
Media Queries Categories