Skip to content

Commit

Permalink
Fix responsiveness 🦇
Browse files Browse the repository at this point in the history
  • Loading branch information
@xSarscov
xSarscov committed Feb 14, 2024
1 parent 463378e commit ef5a749
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 54 deletions.
45 changes: 42 additions & 3 deletions advanced_search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,26 @@
<body class="d-flex flex-column">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="btn d-flex align-items-center" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample" id="menu">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000" class="bi bi-list"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5" />
</svg>
</button>
<a class="navbar-brand" href="">
<img src="https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg" alt="Google logo">
</a>
<ul class="navbar-nav ms-auto flex-row">
<li class="nav-item">
<a class="nav-link px-2" href="index.html">Google search</a>
<a class="nav-link px-2 menu-options" href="index.html">Google search</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="image_search.html">Images</a>
<a class="nav-link px-2 menu-options" href="image_search.html">Images</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="advanced_search.html">Advanced search</a>
<a class="nav-link px-2 menu-options" href="advanced_search.html">Advanced search</a>
</li>
<li class="nav-item">
<a class="nav-link text-white text-center rounded-5" id="google-apps" href="#"><svg class="align-top" fill="#5F6368" focusable="false" viewBox="0 0 24 24" height="24px" width="24px"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
Expand All @@ -40,6 +48,33 @@
<h1 class="">Advanced Search</h1>
</span>

<!-- Offcanvas mobile menu -->

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
<span class="align-middle">
Search
</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link px-2" href="index.html">Google search</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="image_search.html">Images</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="advanced_search.html">Advanced search</a>
</li>
</ul>
</div>
</div>

<main class="h-100">
<section class="h-100 d-flex flex-column">
<div class="d-flex justify-content-between align-items-center subtitles">
Expand Down Expand Up @@ -104,5 +139,9 @@ <h2 class="subtitle-2">To do this in the search box.</h2>
</ul>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<script src="assets/js/index.js"></script>
</body>
</html>
19 changes: 17 additions & 2 deletions assets/css/advance_search.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@ body {
white-space: nowrap;
}

.navbar .nav-link:hover {
.navbar .nav-link:hover, .navbar-nav .nav-link:hover {
text-decoration: underline;
}

#menu {
display: none !important;
}

#google-apps {
height: 40px !important;
width: 40px !important;
Expand Down Expand Up @@ -154,9 +158,10 @@ main section {
border: 1px solid #3079ed;
color: #fff;
}

}


footer {
background-color: #F2F2F2;
color: #70758D;
Expand Down Expand Up @@ -226,4 +231,14 @@ footer {
.submit-btn {
margin-left: 0 !important;
}
}

@media (max-width: 478px) {
.menu-options {
display: none;
}

#menu {
display: block !important;
}
}
24 changes: 20 additions & 4 deletions assets/css/image_search.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ footer li {
}


.navbar .nav-link:hover {
.navbar .nav-link:hover, .navbar-nav .nav-link:hover {
text-decoration: underline;
}

Expand All @@ -70,7 +70,7 @@ footer li {
}

.google-logo {
height: 233px;
height: 218px;
}

.search-input {
Expand Down Expand Up @@ -159,9 +159,14 @@ footer li {
}

@media (max-width: 1200px) {

.quick-links ul {
justify-content: space-evenly !important;
}

#menu {
display: none;
}
}

@media (max-width: 816px) {
Expand All @@ -176,22 +181,33 @@ footer li {

@media (max-width: 392px) {

#menu {
display: block;
}

.menu-options {
display: none;
}

footer {
margin-top: 3rem;
}

.quick-links ul {
flex-direction: column;
align-items: center;
}



.quick-links ul div {
flex-direction: column !important;
align-items: center !important;
div {
gap: 0;
}
}

.quick-links a {
font-size: 12px;
padding: 6px;
}
}
26 changes: 20 additions & 6 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ footer li {
}


.navbar .nav-link:hover {
.navbar .nav-link:hover, .navbar-nav .nav-link:hover {
text-decoration: underline;
}

Expand All @@ -71,7 +71,7 @@ footer li {
}

.google-logo {
height: 233px;
height: 218px;
}

.search-input {
Expand Down Expand Up @@ -152,6 +152,10 @@ footer li {
.quick-links ul {
justify-content: space-evenly !important;
}

#menu {
display: none;
}
}

@media (max-width: 816px) {
Expand All @@ -166,22 +170,32 @@ footer li {

@media (max-width: 392px) {

#menu {
display: block;
}

.menu-options {
display: none;
}

footer {
margin-top: 3rem;
}

.quick-links ul {
flex-direction: column;
align-items: center;
}



.quick-links ul div {
flex-direction: column !important;
align-items: center !important;
div {
gap: 0;
}
}

.quick-links a {
font-size: 12px;
padding: 6px;
}

}
83 changes: 63 additions & 20 deletions image_search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,71 @@

<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<ul class="navbar-nav ms-auto flex-row">
<li class="nav-item">
<a class="nav-link text-white px-2" href="index.html">Google search</a>
</li>
<li class="nav-item">
<a class="nav-link text-white px-2" href="image_search.html">Images</a>
</li>
<li class="nav-item">
<a class="nav-link text-white px-2" href="advanced_search.html">Advanced search</a>
</li>
<li class="nav-item">
<a class="nav-link text-white rounded-5" id="google-apps" href="#"><svg class="align-top" fill="#fff" focusable="false" viewBox="0 0 24 24" height="24px" width="24px"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white p-1 rounded-5" href="#" id="google-acc">
<img class="rounded-5" src="https://lh3.googleusercontent.com/ogw/ANLem4bm1hNKK33_iaqwEsQvTwRhtm_WwsfCFSuJslrY=s32-c-mo" srcset="https://lh3.googleusercontent.com/ogw/ANLem4bm1hNKK33_iaqwEsQvTwRhtm_WwsfCFSuJslrY=s32-c-mo 1x, https://lh3.googleusercontent.com/ogw/ANLem4bm1hNKK33_iaqwEsQvTwRhtm_WwsfCFSuJslrY=s64-c-mo 2x " alt="" aria-hidden="true" >
</a>
</li>
</ul>
<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample" id="menu">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff" class="bi bi-list"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5" />
</svg>
</button>
<ul class="navbar-nav ms-auto flex-row">
<li class="nav-item menu-options">
<a class="nav-link text-white px-2" href="index.html">Google search</a>
</li>
<li class="nav-item menu-options">
<a class="nav-link text-white px-2" href="image_search.html">Images</a>
</li>
<li class="nav-item menu-options">
<a class="nav-link text-white px-2" href="advanced_search.html">Advanced search</a>
</li>
<li class="nav-item">
<a class="nav-link text-white text-center rounded-5" id="google-apps" href="#"><svg class="align-top"
fill="#fff" focusable="false" viewBox="0 0 24 24" height="24px" width="24px">
<path
d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white p-1 rounded-5" href="#" id="google-acc">
<img class="rounded-5"
src="https://lh3.googleusercontent.com/ogw/ANLem4bm1hNKK33_iaqwEsQvTwRhtm_WwsfCFSuJslrY=s32-c-mo"
srcset="https://lh3.googleusercontent.com/ogw/ANLem4bm1hNKK33_iaqwEsQvTwRhtm_WwsfCFSuJslrY=s32-c-mo 1x, https://lh3.googleusercontent.com/ogw/ANLem4bm1hNKK33_iaqwEsQvTwRhtm_WwsfCFSuJslrY=s64-c-mo 2x "
alt="" aria-hidden="true">
</a>
</li>
</ul>
</div>
</nav>

<!-- Offcanvas mobile menu -->

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
<span class="align-middle">
Search
</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white px-2" href="index.html">Google search</a>
</li>
<li class="nav-item">
<a class="nav-link text-white px-2" href="image_search.html">Images</a>
</li>
<li class="nav-item">
<a class="nav-link text-white px-2" href="advanced_search.html">Advanced search</a>
</li>
</ul>
</div>
</div>

<main class="h-100">
<section class="h-100 d-flex flex-column align-items-center">
Expand Down
Loading

0 comments on commit ef5a749

Please sign in to comment.