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/gunjankadu/hotel-website

Hotel Website Only HTML & CSS

css3 html5 media-queries

Last synced: 05 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/harisdev-netizen/faqaccordioncard

Frontend Mentor Challenge - FAQ Accordion Card

css html media-queries

Last synced: 06 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/productmap/russian-travel

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

bem-methodology css html5 media-queries

Last synced: 01 Jan 2025

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

Tela inicial do site do Instagram - Html e Css

css3 flexbox html5 media-queries

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

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

Draggable & Droppable

html-css-javascript media-queries

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

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

SCSS Media Queries Mixins

media-queries mixins scss

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

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/lankaukk/cat-treat-landing-page

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

css cssflexbox html-css media-queries

Last synced: 01 Feb 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: 03 Feb 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/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/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/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/gabyfutemma/kitten

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

css3 grid html5 media-queries

Last synced: 27 Jan 2025

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/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: 03 Feb 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/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/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: 11 Feb 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: 11 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: 11 Feb 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/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: 04 Feb 2025

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

Landing page design

css3 html5 media-queries

Last synced: 12 Jan 2025

https://github.com/derektypist/navigationmenu

Example of Navigation Menu with Hover Effect

css3 gases header hover media-queries navigation solids vertical

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

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

Nike Ad - Basic HTML example

css html5 media-queries svg

Last synced: 12 Feb 2025

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

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

https://github.com/mehmet-github06/guess01

This is a simple web application. The game involves the user trying to guess a randomly selected number within a specific range (between 0 and 100).

flex html-css-javascript media-queries responsive sound

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

https://github.com/mehmet-github06/to-do-list

This is a simple web application that allows users to create and manage a to-do list. Users can enter tasks they want to add, mark completed tasks, and remove tasks from the list.

flex html-css-javascript media-queries responsive

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

https://github.com/brunonavarrooficial/dsmeta-css

Algoritmo Front-End em HTML e CSS criado para projeto java

css3 flexbox font google google-fonts html5 media-queries tags

Last synced: 30 Dec 2024

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

https://github.com/ardywsptr/dicoding-blog

Dicoding blog - Repositori ini merupakan latihan dari materi mobile first approach pada kelas Menjadi Front-End Web Developer Expert di Dicoding

dicoding-academy dicoding-submission grid-layout-library media-queries mobile-first-layout responsive-layout

Last synced: 14 Jan 2025

https://github.com/dorigonbruno/teste-lacrei

Teste Lacrei - Teste feito por mim Bruno Dorigon, Usando as tecnologias HTML, CSS, JavaScript. Projeto totalmente responsivo.

css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/europa1613/resproject

Responsive Web Design from Scratch

css media-queries responsive-design

Last synced: 22 Jan 2025

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/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

Media Queries Awesome Lists
Media Queries Categories