Skip to content

Commit

Permalink
Media queries
Browse files Browse the repository at this point in the history
  • Loading branch information
izabela-marcinkowska committed Apr 14, 2023
1 parent a90b0cf commit 160eb5e
Show file tree
Hide file tree
Showing 10 changed files with 636 additions and 21 deletions.
21 changes: 12 additions & 9 deletions carte.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/carte-style.css" />
<link rel="stylesheet" href="styles/carte-media-queries.css" />
<title>Johnie's Restaurant | Menu Lunch</title>
</head>
<body>
Expand All @@ -28,7 +29,7 @@
<ul class="nav-list">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="lunch.html" class="nav-link">Lunch</a></li>
<li class="current-link">A'la carte</li>
<li class="current-link"><p class="p-link">A'la Carte</p></li>
<li><a href="find-us.html" class="nav-link">Find us</a></li>
<li>
<a href="book-a-table.html" class="nav-link cta-btn"
Expand All @@ -37,14 +38,16 @@
</li>
</ul>
</nav>
<p class="hero-title">A'la Carte Menu</p>
<p class="hero-text">
Welcome to Johnie's Restaurant, where we offer an exquisite fusion of
international cuisines in our "A la carte" menu! Our carefully crafted
menu features a selection of starters, main courses, and desserts that
are sure to delight your senses. Please find our "A la carte" menu
below:
</p>
<div class="low-box">
<p class="hero-title">A'la Carte Menu</p>
<p class="hero-text">
Welcome to Johnie's Restaurant, where we offer an exquisite fusion of
international cuisines in our "A la carte" menu! Our carefully crafted
menu features a selection of starters, main courses, and desserts that
are sure to delight your senses. Please find our "A la carte" menu
below:
</p>
</div>
</header>
<!--######## MENU SECTION #########-->
<main class="section">
Expand Down
6 changes: 4 additions & 2 deletions find-us.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/find-us-style.css" />
<link rel="stylesheet" href="styles/find-us-media-queries.css" />
<title>Johnie's Restaurant | Find us</title>
</head>
<body>
Expand All @@ -29,7 +30,7 @@
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="lunch.html" class="nav-link">Lunch</a></li>
<li><a href="carte.html" class="nav-link">A'la Carte</a></li>
<li class="current-link">Find us</li>
<li class="current-link"><p class="p-link">Find us</p></li>
<li>
<a href="book-a-table.html" class="nav-link cta-btn"
>Book a Table</a
Expand All @@ -46,8 +47,9 @@ <h1 class="hero-title">Find us</h1>
<div class="map-box">
<iframe
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2487.863435636812!2d-0.19994588427946408!3d51.42393522462344!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s9407%20Queens%20Road%20London%20E61%200QN!5e0!3m2!1ssv!2sse!4v1681229701705!5m2!1ssv!2sse"
width="600"
width="550"
height="450"
class="map"
style="border: 0"
allowfullscreen=""
loading="lazy"
Expand Down
3 changes: 2 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/index-style.css" />
<link rel="stylesheet" href="styles/index-media-queries.css" />
<title>Johnie's Restaurant | Start</title>
</head>
<body>
<!--##### HEADER SECTION #######-->
<header class="header">
<nav class="nav-main">
<ul class="nav-list">
<li class="current-link">Home</li>
<li class="current-link"><p class="p-link">Home</p></li>
<li><a href="lunch.html" class="nav-link">Lunch</a></li>
<li><a href="carte.html" class="nav-link">A'la carte</a></li>
<li><a href="find-us.html" class="nav-link">Find us</a></li>
Expand Down
19 changes: 11 additions & 8 deletions lunch.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/lunch-style.css" />
<link rel="stylesheet" href="styles/lunch-media-queries.css" />
<title>Johnie's Restaurant | Menu Lunch</title>
</head>
<body>
Expand All @@ -27,7 +28,7 @@
<nav class="nav-main">
<ul class="nav-list">
<li><a href="index.html" class="nav-link">Home</a></li>
<li class="current-link">Lunch</li>
<li class="current-link"><p class="p-link">Lunch</p></li>
<li><a href="carte.html" class="nav-link">A'la carte</a></li>
<li><a href="find-us.html" class="nav-link">Find us</a></li>
<li>
Expand All @@ -37,13 +38,15 @@
</li>
</ul>
</nav>
<p class="hero-title">Lunch Menu</p>
<p class="hero-text">
Welcome to Johnie's Restaurant, where we offer a unique and flavourful
fusion of international cuisines! Our menu features a variety of
starters, main courses, and desserts that will surely satisfy your taste
buds. Please find our lunch menu below:
</p>
<div class="low-box">
<p class="hero-title">Lunch Menu</p>
<p class="hero-text">
Welcome to Johnie's Restaurant, where we offer a unique and flavourful
fusion of international cuisines! Our menu features a variety of
starters, main courses, and desserts that will surely satisfy your
taste buds. Please find our lunch menu below:
</p>
</div>
</header>
<!--######## MENU SECTION ###########-->
<main class="section">
Expand Down
113 changes: 113 additions & 0 deletions styles/carte-media-queries.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/* ************************* */
/* BELOW 1280px (smaller desktops)*/
/* ************************* */

@media (max-width: 72em) {
html {
font-size: 56.25%;
}

.menu-container {
margin: 4rem 3rem;
}
}

@media (max-width: 60em) {
html {
font-size: 56.25%;
}

.hero.title {
font-size: 6rem;
}
.menu-title {
font-size: 4rem;
}
}

@media (max-width: 43em) {
.header {
display: flex;
padding: 6rem 3rem;
height: auto;
}

.nav-main {
width: 50%;
align-self: center;
}

.low-box {
width: 50%;
}

.nav-list {
display: flex;
flex-direction: column;
text-align: center;
}

.nav-link {
font-size: 40%;
border-radius: 1rem;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
padding: 0.5rem 2.3rem;
}

.nav-link:link {
border: none;
}

.p-link {
display: inline;
border-radius: 1rem;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
padding: 0.5rem 2.3rem;
}

.hero-title {
padding: 6rem 0 0 0;
font-size: 6rem;
}

.hero-text {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
border-radius: 2rem;
margin-top: 4rem;
}

.menu-container {
flex-direction: column;
align-items: center;
}

.first-row,
.second-row {
width: 100%;
}

.footer-section {
padding: 2rem 1rem;
}

.footer-container {
gap: 2rem;
row-gap: 0;
}
}

@media (max-width: 32em) {
.footer-section {
padding: 2rem 1rem;
}

.footer-container {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
row-gap: 0;
}

.copyright {
align-self: end;
}
}
142 changes: 142 additions & 0 deletions styles/find-us-media-queries.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/* ************************* */
/* BELOW 1280px (smaller desktops)*/
/* ************************* */

@media (max-width: 72em) {
html {
font-size: 56.25%;
}
.section {
margin: 8rem 2rem;
}

.container {
gap: 2rem;
}
.adress {
padding-left: 0;
}
}

@media (max-width: 60em) {
html {
font-size: 56.25%;
}
.map {
max-width: 100%;
}
}

@media (max-width: 54em) {
.title {
font-size: 4rem;
}
.secondary-title {
font-size: 3rem;
margin-bottom: 1rem;
}

.link-text:link {
margin-top: 1rem;
}
}

@media (max-width: 51em) {
.container {
flex-direction: column-reverse;
margin: 8rem 2rem;
}

.right-box {
padding: 1rem;
width: auto;
}

.map {
width: 800px;
}

.title {
font-size: 6rem;
}
.secondary-title {
font-size: 4rem;
}
.link-text:link {
margin-top: 1.5rem;
}

.contact-us-text,
.adress {
text-align: center;
}
}

@media (max-width: 43em) {
.header {
display: flex;
padding: 6rem 3rem;
height: auto;
}

.nav-main {
width: 50%;
align-self: center;
}

.nav-list {
display: flex;
flex-direction: column;
text-align: center;
}

.nav-link {
font-size: 40%;
border-radius: 1rem;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
padding: 0.5rem 2.3rem;
}

.nav-link:link {
border: none;
}

.p-link {
display: inline;
border-radius: 1rem;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
padding: 0.5rem 2.3rem;
}

.hero-title {
padding: 6rem 0 0 0;
font-size: 6rem;
justify-self: center;
width: 50%;
}

.footer-section {
padding: 2rem 1rem;
}

.footer-container {
gap: 2rem;
row-gap: 0;
}
}

@media (max-width: 32em) {
.footer-section {
padding: 2rem 1rem;
}

.footer-container {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
row-gap: 0;
}

.copyright {
align-self: end;
}
}
5 changes: 5 additions & 0 deletions styles/find-us-style.css
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,12 @@ img {
box-shadow: 1.2rem 1.2rem 3rem rgba(0, 0, 0, 0.1);
}

.map-box {
width: auto;
}

.right-box {
width: 50%;
display: flex;
flex-direction: column;
margin: 2rem 3rem 2rem 3rem;
Expand Down
Loading

0 comments on commit 160eb5e

Please sign in to comment.