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/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: 18 Jan 2025

https://github.com/eltonsantos/indecor

Tutorial: https://www.youtube.com/watch?v=6wd7PK3G7Zo

css3 html5 media-queries

Last synced: 11 Jan 2025

https://github.com/hardikaz/githubusersapi

This project is made using HTML, CSS,JavaScript and GithubUsersApi. It will return the github user info of the user whose username is provided. Find the deployed link of the project below

css fully-responsive github-users-api html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/formulario

Formulário de Contato

css git html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/jordanshoes_codelandia

JordanShoes - Segundo desafio completado da codelândia, projeto feito com HTML CSS e JavaScript, totalmente responsivo.

bootstrap5 css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/gerador-de-cores

Gerador de Paleta de Cores

css git html javascript media-queries

Last synced: 11 Jan 2025

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

This is my first Resposive Website

bootstrap css3 flexbox html5 media-queries

Last synced: 12 Jan 2025

https://github.com/khizarwakeel/html-css-hackathon

Module 1 Hackathon by Sir Ghous Ahmed (SMIT) Batch 11 2024

bootstrap5 css3 hackathon html5 media-queries

Last synced: 12 Jan 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: 18 Jan 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: 12 Jan 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: 12 Jan 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: 19 Jan 2025

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

Simple landing page using HTML & bootstrap5

bootstrap5 css github-pages html javascript media-queries

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

https://github.com/gabyfutemma/kitten

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

css3 grid html5 media-queries

Last synced: 28 Nov 2024

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: 12 Jan 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: 05 Jan 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 Nov 2024

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: 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/beanloop/react-with-media

React HOC for watching media queries.

higher-order-component media-queries

Last synced: 05 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/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/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/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/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/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/pijusp/7-sign-up2

Responsive HTML and CSS sign-up form

css3 html5 media-queries responsive

Last synced: 14 Dec 2024

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

Hotel Website Only HTML & CSS

css3 html5 media-queries

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

https://github.com/rudradcruze/influencer-gear

This project is about simple photography equipments and blogs.

css3 grid html5 media-queries responsive

Last synced: 13 Dec 2024

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

SCSS Media Queries Mixins

media-queries mixins scss

Last synced: 18 Dec 2024

https://github.com/simonapiz/tsunamicoffee

Make this site responsive with CSS media queries

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

Last synced: 20 Dec 2024

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

Frontend Mentor Challenge - FAQ Accordion Card

css html media-queries

Last synced: 06 Jan 2025

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

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

bem-methodology css html5 media-queries

Last synced: 01 Jan 2025

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

Draggable & Droppable

html-css-javascript media-queries

Last synced: 06 Jan 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: 06 Dec 2024

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: 21 Jan 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: 13 Jan 2025

https://github.com/pedrodevvv/landing-page-ktm

Landing page usando um evento da KTM como inspiração

css flexbox html ktm media-queries

Last synced: 21 Dec 2024

https://github.com/pedrodevvv/alpha-host

Projeto de hospedagem de sites, desenvolvido com o objetivo de treinar a responsividade, neste projeto foi trabalhado apenas a parte de estrutura e estilização.

css-flexbox css3 html-css media-queries responsive-web-design

Last synced: 21 Dec 2024

https://github.com/esraaalzoghby/fokir-project

Fokir project It was designed using HTML and CSS to practice media queries, animation, and responsive design

animation css html media-queries responsive-web-design web-design web-development

Last synced: 06 Dec 2024

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

Simple media query observer

css javascript media-queries

Last synced: 04 Dec 2024

https://github.com/panxitus/hospital_v.4

Escalonamiento Proyecto Sitio Web Hospital /media queries

7-1architecture bem-methodology css3 html5 media-queries mobile responsive-design sass

Last synced: 21 Dec 2024

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

https://github.com/mu-senpai/fitness

A responsive landing page for a gym using HTML5, vanilla CSS3 and its media query feature to make the landing page responsive.

css3 htlm5 media-queries

Last synced: 21 Dec 2024

https://github.com/mu-senpai/gamer-zone

A gaming website landing page using HTML5 and vanilla CSS3 with responsive features for two different types of devices.

css3 html5 media-queries

Last synced: 21 Dec 2024

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

A responsive product preview card component solution for the Frontend Mentor challenge. Built using HTML, CSS, and responsive images, this project features a clean and minimal design. It includes mobile-first styling, custom fonts with @font-face, hover effects, and media queries for an optimal user experience on different devices.

beginner beginner-code beginner-friendly card css-flexbox html-css media-queries

Last synced: 21 Dec 2024

https://github.com/mosalem149v2/staff-dish-booking-management_debi-task

A comprehensive web application for managing staff roles, dishes, and table bookings for a restaurant. This project includes functionalities for adding, editing, and deleting staff roles and dishes, checking the restaurant's operating status, managing daily specials, and tracking customer bookings.

application-development css3 customer-management frontend-development html5 javascript media-queries responsive restaurant-management user-interface web-development

Last synced: 14 Jan 2025

https://github.com/yashi-singh-1/piano-using-html-and-css

a responsive piano interface using HTML and CSS, exploring media queries and pseudo selectors for screen size adaptability. Dive into responsive web development fundamentals while building an engaging project!

css css3 front-end frontend frontend-development github html html-css html5 media-queries open-source pseudo-selectors pseudocode responsive-design responsive-web-design web-development

Last synced: 07 Jan 2025

https://github.com/nadim-nion/2nd-assignment

This is a responsive website for all devices e.g. Desktop, Mobile, Tablet etc. I have used HTML5, CSS3 and Media queries to build the whole website.

css html media-queries responsive

Last synced: 08 Jan 2025

https://github.com/lilymilano/landing-page-responsive-html-css-aug2922

Building a responsive e-learning landing page. HTML and CSS with media queries.

css3 html media-queries

Last synced: 08 Jan 2025

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

Landing page design

css3 html5 media-queries

Last synced: 12 Jan 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: 04 Jan 2025

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

Frontend Mentor - NFT Preview Card

html media-queries responsive-design scss

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

https://github.com/hemants1703/results-summary-component-frontend-mentor

A Summary of Results as a Component frontend development practice

css css3 html html5 media-queries responsive-design

Last synced: 22 Jan 2025

https://github.com/victorlcastro-dsa/login-site-desafio

Este projeto é um exemplo de uma tela de login simples e responsiva, desenvolvida apenas com HTML e CSS. O foco está no uso de media queries para adaptar o layout a diferentes dispositivos. Não inclui funcionalidades de back-end ou autenticação, sendo destinado apenas para fins de visualização e aprendizado.

html-css media-queries project-based-learning web-development

Last synced: 13 Jan 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: 08 Jan 2025

https://github.com/mrbrunelli/css-flexbox

Meus estudos sobre flexbox, heranças com nth-child e media queries

css flexbox media-queries nth-child

Last synced: 15 Jan 2025

https://github.com/rimshasajid436/facebook

Create Responsive Facebook Clone For CSS Final Task..

box-shadow cursor flex media-queries

Last synced: 16 Jan 2025

https://github.com/hardikaz/dicegame

This is a game of dice. Responsive and functioning.

css html javascript media-queries

Last synced: 11 Jan 2025

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

Understanding Responsiveness and Media Queries

media-queries

Last synced: 23 Nov 2024

https://github.com/sumaiyabanu15/css-project

This page Is about Travel Landing Page - Using HTML & CSS

css html5 media-queries

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

https://github.com/sahithyabeesu03/food_recipe

App allows users to search for recipes and view detailed information using the MealDB API.The app features a responsive design and JavaScript for dynamic content loading and user interactions

api html5 javascript mealdb-api media-queries

Last synced: 11 Jan 2025

Media Queries Awesome Lists
Media Queries Categories