From 78f40bff50063d8cba8937a23c5e6656c46c042f Mon Sep 17 00:00:00 2001
From: JovanaBozhinovska <bozinovskajovana@gmail.com>
Date: Sun, 2 Jun 2024 20:50:31 +0200
Subject: [PATCH] Adding Mobile Responsivness
---
index.html | 165 +++++++++++++++++++++++++++++++++++++++++++++--------
style.css | 48 +++++++++++++++-
2 files changed, 188 insertions(+), 25 deletions(-)
diff --git a/index.html b/index.html
index 8d6a365..d43b50b 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
<nav>
<div class="navbar">
<p>Logo</p>
+ <div id="menu-icon">☰</div>
<ul>
<li><a href=""></a>Home</li>
<li><a href=""></a>About us</li>
@@ -20,43 +21,159 @@
</div>
</nav>
- <div class="about-us">
- <div class="inner">
- <div class="text-content">
- <h2>About us</h2>
- <p>
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- Exercitationem totam odit similique sunt. Assumenda eos pariatur
- veniam tempore officiis temporibus esse velit, repellendus
- voluptates error neque perferendis iure ab dolor! Doloremque
- aperiam iusto incidunt veritatis? Aliquam et nesciunt ex, dolorem
- minima nisi impedit, nihil iure recusandae voluptas quod assumenda
- veritatis velit similique, repudiandae sapiente! Porro, nulla
- aliquam! Earum, repellendus enim?
- </p>
+ <div class="scrolling-section">
+ <div class="about-us">
+ <div class="inner">
+ <div class="text-content">
+ <h2>About us</h2>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Exercitationem totam odit similique sunt. Assumenda eos pariatur
+ veniam tempore officiis temporibus esse velit, repellendus
+ voluptates error neque perferendis iure ab dolor! Doloremque
+ aperiam iusto incidunt veritatis? Aliquam et nesciunt ex,
+ dolorem minima nisi impedit, nihil iure recusandae voluptas quod
+ assumenda veritatis velit similique, repudiandae sapiente!
+ Porro, nulla aliquam! Earum, repellendus enim?
+ </p>
+ </div>
+
+ <div class="flex-parent">
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-02.jpg" alt="img2" />
+ </div>
+ </div>
+
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-03.jpg" alt="img3" />
+ </div>
+ </div>
+
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-04.jpg" alt="img4" />
+ </div>
+ </div>
+ </div>
</div>
+ </div>
+
+ <!-- delete this -->
+ <div class="about-us">
+ <div class="inner">
+ <div class="text-content">
+ <h2>About us</h2>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Exercitationem totam odit similique sunt. Assumenda eos pariatur
+ veniam tempore officiis temporibus esse velit, repellendus
+ voluptates error neque perferendis iure ab dolor! Doloremque
+ aperiam iusto incidunt veritatis? Aliquam et nesciunt ex,
+ dolorem minima nisi impedit, nihil iure recusandae voluptas quod
+ assumenda veritatis velit similique, repudiandae sapiente!
+ Porro, nulla aliquam! Earum, repellendus enim?
+ </p>
+ </div>
+
+ <div class="flex-parent">
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-02.jpg" alt="img2" />
+ </div>
+ </div>
+
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-03.jpg" alt="img3" />
+ </div>
+ </div>
- <div class="flex-parent">
- <div class="flex-item">
- <div class="flex-inner">
- <img src="./images/image-02.jpg" alt="img2" />
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-04.jpg" alt="img4" />
+ </div>
</div>
</div>
+ </div>
+ </div>
+ <div class="about-us">
+ <div class="inner">
+ <div class="text-content">
+ <h2>About us</h2>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Exercitationem totam odit similique sunt. Assumenda eos pariatur
+ veniam tempore officiis temporibus esse velit, repellendus
+ voluptates error neque perferendis iure ab dolor! Doloremque
+ aperiam iusto incidunt veritatis? Aliquam et nesciunt ex,
+ dolorem minima nisi impedit, nihil iure recusandae voluptas quod
+ assumenda veritatis velit similique, repudiandae sapiente!
+ Porro, nulla aliquam! Earum, repellendus enim?
+ </p>
+ </div>
+
+ <div class="flex-parent">
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-02.jpg" alt="img2" />
+ </div>
+ </div>
+
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-03.jpg" alt="img3" />
+ </div>
+ </div>
- <div class="flex-item">
- <div class="flex-inner">
- <img src="./images/image-03.jpg" alt="img3" />
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-04.jpg" alt="img4" />
+ </div>
</div>
</div>
+ </div>
+ </div>
+ <div class="about-us">
+ <div class="inner">
+ <div class="text-content">
+ <h2>About us</h2>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Exercitationem totam odit similique sunt. Assumenda eos pariatur
+ veniam tempore officiis temporibus esse velit, repellendus
+ voluptates error neque perferendis iure ab dolor! Doloremque
+ aperiam iusto incidunt veritatis? Aliquam et nesciunt ex,
+ dolorem minima nisi impedit, nihil iure recusandae voluptas quod
+ assumenda veritatis velit similique, repudiandae sapiente!
+ Porro, nulla aliquam! Earum, repellendus enim?
+ </p>
+ </div>
+
+ <div class="flex-parent">
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-02.jpg" alt="img2" />
+ </div>
+ </div>
+
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-03.jpg" alt="img3" />
+ </div>
+ </div>
- <div class="flex-item">
- <div class="flex-inner">
- <img src="./images/image-04.jpg" alt="img4" />
+ <div class="flex-item">
+ <div class="flex-inner">
+ <img src="./images/image-04.jpg" alt="img4" />
+ </div>
</div>
</div>
</div>
</div>
</div>
+ <!-- end -->
<footer>
<p>© 2023 Animals website. All rights reserved.</p>
</footer>
diff --git a/style.css b/style.css
index 3f39cdf..21e3f4e 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,7 @@
body {
margin: 0;
+ overflow: hidden;
}
h1,
@@ -23,6 +24,7 @@ img {
background-image: url(./images/image-01.jpg);
background-color: rgb(161, 156, 156);
height: 100vh;
+ overflow: hidden;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
@@ -30,8 +32,28 @@ img {
background-blend-mode: multiply;
}
.about-us .inner {
+ margin: 10px 20px;
+}
+.scrolling-section {
width: 50%;
- margin: 0 auto;
+ height: 80vh;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ margin: 10px auto;
+}
+
+.scrolling-section::-webkit-scrollbar {
+ width: 8px; /* Width of the scrollbar */
+}
+
+.scrolling-section::-webkit-scrollbar-track {
+ background-color: rgba(255, 255, 255, 0.1); /* Color of the scrollbar track */
+ border-radius: 6px;
+}
+
+.scrolling-section::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 6px;
}
.about-us .flex-parent {
@@ -60,6 +82,11 @@ img {
padding: 10px 15px;
letter-spacing: 2px;
}
+
+.navbar #menu-icon {
+ display: none;
+}
+
.navbar p {
margin-bottom: 0;
}
@@ -92,3 +119,22 @@ footer {
footer p {
margin-bottom: 0;
}
+
+@media (max-width: 768px) {
+ .navbar #menu-icon {
+ display: block;
+ }
+
+ .navbar ul {
+ display: none;
+ }
+ .scrolling-section {
+ width: 80%;
+ }
+}
+
+@media (max-width: 425px) {
+ .scrolling-section {
+ width: 100%;
+ }
+}
--
GitLab