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/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/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/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/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/article-preview-component

Article Preview Component build with HTML CSS Vanilla JavaScript

bem css flexbox html javascript javascript-vanilla media-queries

Last synced: 24 Nov 2024

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: 24 Nov 2024

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

Recipe page build with HTML and CSS

css css-reset flexbox html media-queries

Last synced: 24 Nov 2024

https://github.com/oppahero/social-links-profile

Social links profile made with HTML and CSS

css flexbox frontend-mentor html5 media-queries mobile-first-workflow

Last synced: 24 Nov 2024

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 Nov 2024

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 Nov 2024

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

A dynamic media-queries styling method for all dimensions

media-queries nodejs

Last synced: 07 Dec 2024

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/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/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: 03 Dec 2024

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 Nov 2024

https://github.com/saleh0987/mealify_site

Route_Frontend_Tasks-C43-

css3 html5 media-queries

Last synced: 07 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: 21 Nov 2024

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 Nov 2024

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/sauloroman/sunnyside-landingpage

Responsive web side about an artistic company.

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

Last synced: 03 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/praveenkumar8754/project1

to create a travel landing website using HTML,CSS

css3 html5 media-queries

Last synced: 22 Nov 2024

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

Projeto 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: 25 Nov 2024

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

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

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

Google UI clone made with HTML and CSS 3.

clone css3 html5 media-queries ui-design

Last synced: 26 Nov 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: 27 Nov 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: 02 Dec 2024

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/gustavogss/instagram-clone

Tela inicial do site do Instagram - Html e Css

css3 flexbox html5 media-queries

Last synced: 28 Nov 2024

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

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

css cssflexbox html-css media-queries

Last synced: 05 Dec 2024

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

Media Queries Awesome Lists
Media Queries Categories