Skip to content

Commit

Permalink
done 🦇
Browse files Browse the repository at this point in the history
  • Loading branch information
xSarscov committed Dec 24, 2023
1 parent 7ae7308 commit 51ad1ed
Show file tree
Hide file tree
Showing 7 changed files with 675 additions and 273 deletions.
136 changes: 90 additions & 46 deletions advanced_search.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,105 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Google Advanced Search</title>
<link rel="shortcut icon" href="https://www.google.com/favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/advance_search.css">
</head>
<body>
<nav>
<ul>
<li><a href="/image_search.html">Images</a></li>
<li><a href="/advanced_search.html">Advanced search</a></li>
</ul>
<body class="d-flex flex-column">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<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="/">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>
<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>
</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>
<span class="title">
<h1 class="">Advanced Search</h1>
</span>

<main>
<form action="https://www.google.com/search" method="get">
<input type="hidden" name="hl" value="es">
<div>
<label for="">
todas estas palabras:
<input type="text" name="as_q">
</label>
</div>
<div>
<label for="">
esta palabra o frase exactas:
<input type="text" name="as_epq">
</label>
</div>
<div>
<label for="">
cualquiera de estas palabras:
<input type="text" name="as_oq">
</label>
</div>
<div>
<label for="">
ninguna de estas palabras:
<input type="text" name="as_eq">
</label>
<main class="h-100">
<section class="h-100 d-flex flex-column">
<div class="d-flex justify-content-between align-items-center subtitles">
<h2 class="subtitle-1">Find pages with...</h2>
<h2 class="subtitle-2">To do this in the search box.</h2>
</div>
<input type="submit" value="Advanced search">
</form>

<form action="https://www.google.com/search" method="get">
<input type="hidden" name="hl" value="en">
<div class="d-flex flex-column justify-content-center inputs">
<div class="">
<label class="label">
all these words:
</label>
<input type="text" autocomplete="off" name="as_q">
<span class="todo-text">Type the important words: <span class="example">tri-colour rat terrier</span>
</span>
</div>
<div class="">
<label class="label">
this exact word or phrase:
</label>
<input type="text" autocomplete="off" name="as_epq">
<span class="todo-text">Put exact words in quotes: <span class="example">"rat terrier"</span>
</span>
</div>
<div class="">
<label class="label">
any of these words:
</label>
<input type="text" autocomplete="off" name="as_oq">
<span class="todo-text">
Type <span class="example">OR</span> between all the words you want: <span class="example">miniature OR standard</span>
</span>
</div>
<div class="">
<label class="label">
none of these words:
</label>
<input type="text" autocomplete="off" name="as_eq">
<span class="todo-text">
Put a minus sign just before words that you don't want: <span class="example text-nowrap">-rodent, -"Jack Russell"</span>
</span>
</div>
<div class="d-flex justify-content-center">
<input type="submit" value="Advanced Search" class="submit-btn">
</div>
</div>
</form>
</section>
</main>

<footer>
<div>
<p>Nicaragua</p>
</div>
<div>
<p>Sobre google</p>
<p>Publicidad</p>
<p>Negocios</p>
<p>Cómo funciona la Búsqueda</p>
<p class="country m-0">Nicaragua</p>
</div>
<div>
<p>Privacidad</p>
<p>Condiciones</p>
<p>Preferencias</p>
<div class="">
<ul class="d-flex">
<li><a href="#" class="nav-link">Help</a></li>
<li><a href="#" class="nav-link">Privacy</a></li>
<li><a href="#" class="nav-link">Terms</a></li>
</ul>
</div>
</footer>
</body>
Expand Down
229 changes: 229 additions & 0 deletions assets/css/advance_search.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
body,
html {
height: 100%;
}

body {
background-color: #fff;
color: #000;
font-size: 14px;
font-family: arial, sans-serif;
}


.navbar {
padding: 0.7rem 0 !important;
}

.navbar-brand {
padding-left: 8px;
}

.navbar a {
font: 13px/27px Roboto,Arial,sans-serif;
white-space: nowrap;
}

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

#google-apps {
height: 40px !important;
width: 40px !important;
}

#google-apps:hover, #google-acc:hover {
background-color: #F0F0F0
}

.title {
color: #d93025;
border-bottom: 1px solid #ebebeb;
}

.title h1 {
font-size: 20px;
margin-left: 21px;
margin-top: 0;
margin-bottom: 0;
padding: 1.4rem 1.5rem 1.6rem 1.5rem;
}

main section {
max-width: 1203px;
min-width: 200px;
width: 96%;
font-size: 13px;
padding: 2.8rem 2.81rem;

.subtitles {
margin-bottom: 18px;
}

.subtitle-1, .subtitle-2 {
margin-bottom: 0;
}

.subtitle-1 {
font-size: 16px;
}

.subtitle-2 {
padding-top: 3px;
font-size: 13px;
font-weight: 700;
color: #777;
width: 31.97%;
}

input[type='text'] {
width: 51.4%;
height: 27px;
}

.label {
min-width: 167px;
width: 16%;
}

.todo-text {
vertical-align: middle;
color: #555;
font-size: 11px;
display: inline-block;
width: 31%;
line-height: 1.1;
padding-left: 11px;

.example {
color: #666;
font-family: monospace;
font-size: 11px;
}
}

.inputs {

div {
height: 42px;
}

input {
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
font-size: 13px;
height: 29px;
padding: 1px 8px;
min-width: 167px;
}

input:focus {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
border: 1px solid #4d90fe;
outline: none;
}

}

.submit-btn {
margin-left: 274px;
user-select: none;
line-height: 100%;
height: 30px;
min-width: 120px !important;
font-size: 11px !important;
font-weight: bold;
text-align: center;
white-space: nowrap;
border-radius: 2px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #4d90fe;
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ed;
color: #fff;
}

}

footer {
background-color: #F2F2F2;
color: #70758D;

.country {
border-top: #DADCE0 1px solid;
border-bottom: #DADCE0 1px solid;
padding: 9px 45px 9px;
font-size: 15px;
}



.nav-link:hover {
color: #4d5156;
}

ul {
gap: 1.7rem;
margin: 0 0 0 45px;
padding-left: 0;
}

li {
list-style: none;
padding: 9.4px 0 9.4px 0;
}

a {
white-space: nowrap;

}
}

@media (max-width: 1124px) {
.inputs {
align-items: center !important;
gap: 2rem;

input {
width: 100% !important;
margin-top: 12px;
margin-bottom: 12px;
}
}

.todo-text, .subtitle-2 {
display: none !important;
}

.submit-btn {
margin-left: 235px !important;
}

}

@media (max-width: 459px) {
.inputs {
gap: 2rem;

input {
margin-top: 12px;
margin-bottom: 12px;
}
}

.submit-btn {
margin-left: 0 !important;
}
}
Loading

0 comments on commit 51ad1ed

Please sign in to comment.