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/al-rasels/natours-old-style-template

This is a HTML5 CSS3 Advance css and animation practice project template.

advance-css button buttons css-animations float html5 media-queries sass-mixins transition-animation

Last synced: 01 Mar 2025

https://github.com/mahmoudaliaboelhassan/leon-template

The website is a demo of a template called "Leon," designed for businesses or individuals to showcase their products or services. It has a minimalist design with a hero section and several sections highlighting different features.

css css-flexbox font-awesome google-fonts grid-system html media-queries responsive-design transition-animation

Last synced: 22 Feb 2025

https://github.com/kor1k/job_contact-lights-web

offer from Yaroslav (Contact Lights)

adaptive css frontend html landing media-queries offer website

Last synced: 29 Mar 2025

https://github.com/martapolii/www.polishchukart.com

This is a personal project built for a Toronto-based artist. The site showcases a gallery of his artwork, a CV highlighting his exhibitions, and contact information. The site uses HTML, CSS, and JavaScript for responsive design, gallery overlays, and mobile navigation.

css frontend gallery-images gallery-overlay html javascript media-queries mobile-navigation responsive-design web-development

Last synced: 02 Mar 2025

https://github.com/yerrouhamza/gpt-3_reactjs

GPT-3: Landing page created with ReactJS

css css3 javascript media-queries react reactjs scss

Last synced: 24 Feb 2025

https://github.com/cba85/simple-flexbox-navbar

A bootstrap-like simple navigation bar using only CSS flexbox and media queries.

css flexbox media-queries navbar

Last synced: 04 Mar 2025

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

This is A Order Summary Component Project using HTML5 and CSS3

css3 css3-flexbox html5 media-queries

Last synced: 21 Mar 2025

https://github.com/manu-karenite/responsivewebpage

This is my first repository which contains my first Webpage which is Responsive in Nature prepared with Media Query(s) in CSS file.

css3 cssgrid html html5 media-queries

Last synced: 22 Mar 2025

https://github.com/kirang89/css-mediaquery

Parses and determines if a given CSS Media Query matches a set of values. This is a port of https://github.com/ericf/css-mediaquery.

css css-mediaquery media-queries python

Last synced: 18 Feb 2025

https://github.com/rudradcruze/leader-board

This project is basically based on gird and flex box. Simple multiple columns layout.

css3 flex-box grid html5 media-queries responsive

Last synced: 31 Mar 2025

https://github.com/pushpendra-1697/adobe-xd-assignment

This React onboarding project includes pages for login, signup, home, and profile functionalities, catering to user authentication and navigation, facilitating a seamless design experience.

dom-manipulation html-css-javascript jsx-syntax localstorage media-queries react-components react-router-dom reactjs

Last synced: 24 Feb 2025

https://github.com/mpopv/pxsmlx

A Sass mixin library for concisely generating sets of single-property media queries

bootstrap-breakpoints breakpoint breakpoints css css3 media-queries mixin-library mixins sass sass-library sass-mixins scss scss-library scss-mixin scss-mixins

Last synced: 27 Mar 2025

https://github.com/yutahaga/vue-media-breakpoints

A plugin of Vue that store current viewport size name.

media-queries vue vue-plugin

Last synced: 13 Apr 2025

https://github.com/manu-karenite/guess-the-number

Contains a simple Web Application for a game called Guess -The- Number , bulit using HTML , CSS and JavaScript. The Web Application is totally reponsive in nature created with the help of Media Queries.

css3 cssgrid html5 javascript media-queries

Last synced: 22 Mar 2025

https://github.com/rupanguvi/landing-page

Landing page design

css3 html5 media-queries

Last synced: 01 Mar 2025

https://github.com/khizarwakeel/my-first-responsive-website

This is my first Resposive Website

bootstrap css3 flexbox html5 media-queries

Last synced: 01 Mar 2025

https://github.com/dimamirana/omnifood

A fully responsive website designing using html5, css3, media-query, ajax

css3-animations css3-transitions html5 jquery media-queries

Last synced: 02 Apr 2025

https://github.com/uzmakh/fcc-piano

Responsive Web Design Lesson-11

media-queries pseudo-selectors responsive-design

Last synced: 01 Mar 2025

https://github.com/stefanoconsonni/fylo-landing-page

A beautiful landing page built for a Tech Company. The page if fully responsive for all screen sizes. All the images used for the project have been optimized for better performance. I have also added specific favicons for android and apple devices.

css html javascript media-queries responsive-design

Last synced: 01 Mar 2025

https://github.com/stefanoconsonni/omnifood

A beautiful landing page built for a Tech Company. The page if fully responsive for all screen sizes. All the images used for the project have been optimized for better performance. Specific favicons for android and apple devices have been added.

css html javascript media-queries responsive-design

Last synced: 01 Mar 2025

https://github.com/matheusfdosan/responsive-project-with-sass

Esse projeto é uma mistura de dois Masterclass, o #08 que usamos estratégias de unidades de medidas do CSS, para que tanto o nosso Layout, quanto os nossos textos, e Media Queries para que fiquem responsivos. Já o #15, é a introdução ao SASS, onde coloco em prática tais ensinamentos.

dom git github html javascript media-queries responsive-design sass

Last synced: 23 Feb 2025

https://github.com/matheusfdosan/codeflix

Um projeto muito simples, onde é possível o usuário adicionar cards de filmes.

animation-css css dom git github html javascript media-queries

Last synced: 23 Feb 2025

https://github.com/kopepasah/sass-media-query-stack

Sass mixin which builds media queries, from simple to complex.

media-queries media-query sass sass-mixins

Last synced: 17 Jan 2025

https://github.com/emersoncarneirodasilva/projeto-box-shadow-generator

Projeto de um gerador de sombras, facilitando na produção de projetos front-end como uma ferramenta de fácil manuseio.

box-shadow css dom-manipulation flexbox html javascript media-queries

Last synced: 11 Mar 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: 12 Mar 2025

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: 21 Feb 2025

https://github.com/fernandams/responsive-portfolio

This repository presents the course project 'HTML and CSS: Working with Responsiveness and Project Deployment' on Alura

css html media-queries relative-units responsive-layout

Last synced: 11 Mar 2025

https://github.com/pijusp/7-sign-up2

Responsive HTML and CSS sign-up form

css3 html5 media-queries responsive

Last synced: 01 Apr 2025

https://github.com/productmap/russian-travel

Проект: Путешествие по России

bem-methodology css html5 media-queries

Last synced: 21 Feb 2025

https://github.com/msarmadqadeer/news-page

This is a static news page that I created using HTML5 and CSS3.

css3 html5 media-queries static-page

Last synced: 12 Mar 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: 21 Feb 2025

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

Article Preview Component build with HTML CSS Vanilla JavaScript

bem css flexbox html javascript javascript-vanilla media-queries

Last synced: 17 Mar 2025

https://github.com/oppahero/card-feature-section

Four Card feature section build with HTML and CSS

bem css css-flexbox css-grid html media-queries mobile-first

Last synced: 17 Mar 2025

https://github.com/oppahero/recipe-page

Recipe page build with HTML and CSS

css css-reset flexbox html media-queries

Last synced: 17 Mar 2025

https://github.com/mayarajaques/projeto-travelgram-v2.0

3º desafio desenvolvido com os conhecimentos adquiridos no módulo de responsividade do curso Fullstack da Rocketseat. Neste projeto adaptei a página utilizando Media Queries para desktop e mobile

css html media-queries

Last synced: 20 Mar 2025

https://github.com/gaurav1129/blog-page

A replica of news and blog user interface page.

animation css3 html5 media-queries

Last synced: 26 Mar 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: 18 Mar 2025

https://github.com/janan6768/landing-page-challange

Its a landing Page Challenge from SMIT.

bootstrap css css-variables html5 media-queries

Last synced: 10 Apr 2025

https://github.com/arakakimath/shoplist

Sixth Challenge of the Rocketseat Fullstack course. In this challenge, the author had to develop a responsive website with html and css. Then, he had to add some Javascript interactions to dynamically add and remove elements according to user's needs.

html-css javascript media-queries responsive-website

Last synced: 01 Apr 2025

https://github.com/justinlucky/techfarming_client

This is the Frontend side of my website for my startup idea called TechFarming. Built with lot of effort.

css-animations css-flexbox css3 media-queries react-chatbot-kit react-icon-kit react-router react-styled-components reactjs responsive-web-design scss-styles

Last synced: 26 Mar 2025

https://github.com/daun/mq-observer

Simple media query observer

css javascript media-queries

Last synced: 26 Mar 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: 27 Mar 2025

https://github.com/jasheloper/responsive-web-design-i-project

The project task is to create an adaptive version of a design & for it to work on multiple devices using media queries.

adaptive-layouts css desktop-development media-queries mobile-development responsive-web-design

Last synced: 03 Apr 2025

https://github.com/jasheloper/advanced-css-sprint-challenge

Demonstrate proficiency by updating a website that is missing content as well as adding mobile styling.

markup media-queries meta mobile-styling preprocessing semantic viewport

Last synced: 03 Apr 2025

https://github.com/diegodscamara/instagram-login

Instagram Login Page with HTML, CSS and JavaScript

css flex html media-queries

Last synced: 10 Apr 2025

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: 09 Apr 2025

https://github.com/barandev/media-queries

A collection of CSS media queries implemented for 236 different devices including mobiles, tablets, watches, and laptops. Perfect for developers seeking to create responsive designs that cater to a wide array of screen sizes and resolutions.

collection css css-media-queries dataset datasets media-queries

Last synced: 17 Mar 2025

https://github.com/gianmen91/fruit-slot-machine-html-css-js

Welcome to Fruit Slot Machine, a fun and interactive web-based game where players try their luck by spinning fruits! Feel free to explore, select your favorite fruit, and spin for a chance to win!

css font-awesome html javascript media-queries

Last synced: 02 Mar 2025

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

Builded weather app with in unit-3 @ Masai School.

css html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/star-wars

Builded star wars characters search app. Here you can search your favourite character and get basic information about them.

css debouncing html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/space-tourism-website

Solution of challenge of building Space Tourism Website given by Frontend mentor. Here you can get some information about space tours.

css frontend-mentor html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/hotstar-search-bar

Builded Hotstar searchbar with some functionalities in unit-3 @ Masai School.

css debouncing html js media-queries

Last synced: 11 Apr 2025

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

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

css debouncing html js media-queries

Last synced: 11 Apr 2025

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

Hotel Website on clean HTML5 & CSS3 and some JS

css3 font-awesome-5 html5 media-queries responsive-design

Last synced: 23 Feb 2025

https://github.com/dwmedeirosdev/bikcraft-origamid

Projeto incompleto - Origamid

css grid html media-queries

Last synced: 02 Mar 2025

https://github.com/dwmedeirosdev/league-of-legends-project

JavaScript Challenge 07 ( Acima de 8 caracteres ( Login e Senha ) o botão de acesso se altera )

css3 html5 javascript media-queries

Last synced: 02 Mar 2025

https://github.com/dwmedeirosdev/projeto-portfolio-origamid

Projeto criado durante o curso da Origamid, colocando em prática os conhecimentos adquiridos em Desenvolvimento Web.

css html media-queries

Last synced: 02 Mar 2025

https://github.com/kuzhalikumaraguru/htmlcssd5-rms-12

Github sample image build up in RWD

css html javascript media-queries rwd

Last synced: 21 Feb 2025

https://github.com/kurooo-yamiii/quickstash-inventory-management-sytem

PHP Native - Javascript - Ajax - JS Library - RESTFUL API - Laboratory Inventory System - SQL

ajax javascript js-library media-queries php-native phpmyadmin restful-api sql

Last synced: 17 Mar 2025

https://github.com/kurooo-yamiii/pst-monitoring-management-system

PHP Native - Javascript - XML - Ajax - SQL PhpyMyAdmin - JS Library - Media Query - PDO

javascript jquery media-queries pdo-mysql php-native phpmyadmin sql xml

Last synced: 17 Mar 2025

https://github.com/aurelily/trip-advisor

Trip Advisor clone : Simple web home page responsive demo project. by Aurélie PREAUD for Le Reacteur

css3 html5 javascript media-queries

Last synced: 02 Mar 2025

https://github.com/mahmoudaliaboelhassan/portfolio-website

This website is a portfolio of My work as a frontend developer. It showcases My Skills in HTML, CSS, and JavaScript through engaging and visually appealing designs.

css-flexbox css3 date font-awesome google-fonts grid-system html5 javascript media-queries transition

Last synced: 22 Feb 2025

https://github.com/mahmoudaliaboelhassan/tasks-list

This project is a task list web application designed to help users keep track of their daily tasks. The project uses HTML, CSS, and JavaScript to create a visually appealing and interactive interface

alert css-flexbox css3 font-awesome google-fonts html5 js json local-storage media-queries object-oriented-programming regular-expression

Last synced: 22 Feb 2025

https://github.com/dev-jakki/url-shortening

Encurtador de URL, desenvolvido usando Bitly API

angular angular-cli bitly-api media-queries responsive-layout scss typescript

Last synced: 02 Mar 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: 02 Mar 2025

https://github.com/matheusfdosan/login-screen-cursoemvideo

Uma tela de login, utilizando formulários em HTML e Media Queries.

css cursoemvideo forms git githb html media-queries

Last synced: 23 Feb 2025

https://github.com/boakaidorborkamara/responsive-registration-form-

Understanding Responsiveness and Media Queries

media-queries

Last synced: 17 Mar 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: 02 Mar 2025

https://github.com/matviyroman/resass

Mixins for checking device by width and height (width, min-width, max-width, height, min-height, max-height) or group of devices (mobile, tablet, laptop, desktop) or device by name (iPhone 5, iPhone X, iPhone 11 Pro Max, iPad Pro 12.9, etc). Expandable and very simple for usage.

css frontend media-queries mq resass sass sass-mediascreen scss scss-mediascreen

Last synced: 23 Feb 2025

https://github.com/mohammdhawa/egens-landing-page

Simple landing page using HTML & bootstrap5

bootstrap5 css github-pages html javascript media-queries

Last synced: 13 Mar 2025

https://github.com/tsheporamantso/css-grid-models

In this projects I build 5 CSS-GRID responsive models for Desktop, Tablet and mobile version sampled from Figma

grid-layout html5 media-queries scss-framework

Last synced: 13 Mar 2025

https://github.com/ibrahimalsabr/elzero-template

This is a project for creating Elzero Template using HTML and CSS.

background-image css css-animations css-flexbox css-grid hover-effects html media-queries responsive-design

Last synced: 27 Mar 2025

https://github.com/yoursandeshshrestha/learn-responsive-design

Best media queries to make website responsive (both mobile-first approach and Desktop-first approach) 🤝

css3 html5 media-queries resposive-design

Last synced: 18 Mar 2025

https://github.com/samuel-amaro/huddle-landing-page-with-introductory-section

Desafio da plataforma Front-End mentor, uma land page sobre comunidades com uma seção de introdução

bem-methodology css3 flexbox font-awesome html5 media-queries mobile-first responsive-layout

Last synced: 19 Mar 2025

https://github.com/samuel-amaro/fylo-data-storage-component

Desafio de codificação Front-End, projeto realista com objetivo de desafiar as habilidades de HTML5, CSS3. Componente de armazenamento de dados.

bem-methodology css3 flexbox-css grid-layout html-semantics html5 media-queries mobile-first normalize-css rwd-response

Last synced: 19 Mar 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: 20 Mar 2025

https://github.com/ayush-97techyboy/ez_assg_fe

A resoinsive one page UI without using BootStrap with the help of API.

css-flexbox css-grid css3 html5 javascript media-queries reactjs

Last synced: 20 Mar 2025

https://github.com/webwithaman/classroom-project-7-by-sheryians

Color Clash: Test Your Luck is a fun and interactive web game where users generate a random target color and shuffle through colors to match it, testing their luck. Built using JavaScript and DOM manipulation, the game features dynamic color changes, sound effects for an engaging experience.

css html5 javascript js media-queries responsive-design

Last synced: 27 Mar 2025

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: 20 Mar 2025

Media Queries Awesome Lists
Media Queries Categories