Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

changes #24

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

changes #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions advancedSearch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Set viewport with -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to CSS -->
<link rel="stylesheet" href="styles.css" />
<title>Advanced Search</title>
</head>

<body>
<!-- HEADER START -->
<div class="header-advanced">
<div class="header-advanced-logo">
<a href="index.html">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo" />
</a>
</div>
<div class="header-links">
<a href="index.html">Google Search</a>
<a href="images.html">Google Images</a>
</div>
</div>
<!-- HEADER END -->
<!-- APPBAR START -->
<div class="appbar">
<label>Advanced Search</label>
</div>
<div class="separator-line"></div>
<!-- APPBAR END -->
<!-- SEARCH CONTAINER START -->
<div class="advanced-search-container">
<form action="https://www.google.com/search" method="get">
<label>Find pages with...</label>
<div class="whitespace"></div>
<label>To do this in the search box.</label>
<div class="form-group">
<label>All these words:</label>
<input type="text" name="as_q">
<div class="clarification">
Type the important words: <span class="monospace">tri-colour rat terrier</span>
</div>
</div>
<div class="form-group">
<label>This exact word or phrase:</label>
<input type="text" name="as_epq">
<div class="clarification">
Put exact words in quotes: <span class="monospace">"rat terrier"</span>
</div>
</div>
<div class="form-group">
<label>Any of these words: </label>
<input type="text" name="as_oq">
<div class="clarification">
Type OR between all the words you want: <span class="monospace">miniature OR standard</span>
</div>
</div>
<div class="form-group">
<label>None of these words:</label>
<input type="text" name="as_eq">
<div class="clarification">
Put a minus sign just before words that you don't want: <span class="monospace">-rodent, -"Jack Russell"</span>
</div>
</div>
<div class="form-group">
<label></label>
<div class="right-align">
<input type="submit" class="blue-button" value="Google Advanced Search">
</div>
</div>
</form>
</div>
<!-- SEARCH CONTAINER END -->
</body>

</html>
43 changes: 43 additions & 0 deletions imageSearch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Set viewport with -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to CSS -->
<link rel="stylesheet" href="styles.css" />
<title>Image search</title>
</head>

<body>
<!-- HEADER START -->
<div class="header">
<div class="header-links">
<a href="index.html">Google Search</a>
<a href="advanced.html">Google Advanced Search</a>
</div>
</div>
<!-- HEADER END -->
<!-- SEARCH CONTAINER START -->
<div class="search-container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo" />
<div class="logo-subtext">
<span>images</span>
</div>
<form action="https://www.google.com/search" method="get">
<div class="search-field">
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="#808080" stroke-linecap="round" stroke-linejoin="round">
<circle cx="8.5" cy="8.5" r="5" />
<path d="m17.571 17.5-5.571-5.5" />
</g>
</svg>
<input type="text" name="q">
</div>
<input type="hidden" name="tbm" value="isch" />
</form>
</div>
<!-- SEARCH CONTAINER END -->
</body>

</html>
35 changes: 35 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Set viewport with -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to CSS -->
<link rel="stylesheet" href="../search/styles/styles.css" />
<title>Search</title>
</head>
<body>
<!-- HEADER START -->
<div class="header">
<div class="header-links">
<a href="imageSearch.html">Google Images</a>
<a href="advancedSearch.html">Google Advanced Search</a>
</div>
</div>
<!-- HEADER END -->
<!-- SEARCH CONTAINER START -->
<div class="search-container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo" />
<form action="https://www.google.com/search" method="get">
<div class="search-field">
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#808080" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="5" /><path d="m17.571 17.5-5.571-5.5" /></g></svg>
<input type="text" name="q">
</div>
<input type="submit" value="Google Search">
<!-- Adding a name to the feeling lucky button will include the parameter in the URL -->
<input type="submit" name="btnI" value="I'm feeling lucky">
</form>

</div>
<!-- SEARCH CONTAINER END -->
</body>
</html>
160 changes: 160 additions & 0 deletions styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
body {
margin: 0px;
height: 100vh;
font-family: Arial, sans-serif;
}

/* This CSS code snippet is styling various types of input elements. Here's a breakdown of what each
part of the code is doing: */
input {
font-size: 16px;
width: 300px;
padding: 13px 0;
/* Parent selector = & */
}
input:focus {
outline: none;
}
input[type=text] {
/* Give input text a lighter color */
color: #464646;
margin: 0 0 0 5px;
}
input[type=submit] {
font-size: 14px;
width: 185px;
/* Remove border */
border-width: 0px;
border-radius: 15px;
margin: 20px;
}
input[type=submit]:hover {
/* Add box-shadow when hovering button (border adds space) */
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
}
input.blue-button {
background-color: dodgerblue;
color: white;
font-size: smaller;
max-width: 200px;
border-radius: 0px;
border: 1px solid #156bbd;
float: right;
padding: 10px 2px;
margin: 0;
}

/* The CSS code snippet you provided is styling the header section of a webpage. Here's a breakdown of
what each part of the code is doing: */
.header, .header-links, .header-advanced-logo, .header-advanced {
display: flex;
align-items: center;
}
.header a, .header-links a, .header-advanced-logo a, .header-advanced a {
color: black;
padding: 10px;
text-decoration: none;
}
.header-advanced {
background-color: #f1f1f1;
height: 50px;
}
.header-advanced-logo {
padding: 10px;
}
.header-advanced-logo img {
height: 30px;
}
.header-links {
margin-left: auto;
}

/* The `.appbar` CSS code is styling an element with the class name "appbar". It sets a margin of 30px
from the top and bottom, and 10px from the left and right. */
.appbar {
margin: 30px 10px;
}
.appbar label {
color: #d93025;
font-size: 20px;
margin: 50px 30px;
}

/* The `.separator-line` CSS class is styling an element with a bottom border. The border style is set
to `solid`, the thickness is `1px`, and the color of the border is `#d6d6d6`, which is a shade of
gray. This CSS rule is used to create a horizontal line separator with the specified style and
color. */
.separator-line {
border-bottom: solid 1px #d6d6d6;
}

/* The CSS code snippet you provided is styling a search container on a webpage. Here's a breakdown of
what each part of the code is doing: */
.search-container {
display: flex;
flex-direction: column;
/* Align the search container in the center of the viewport */
justify-content: center;
align-items: center;
height: 90%;
}
.search-container .search-field {
display: flex;
flex-direction: row;
border-radius: 25px;
border: 1px solid #afafaf;
align-items: center;
margin: 10px;
padding-left: 15px;
}
.search-container .search-field input {
border: none;
border-radius: 25px;
}
.search-container .logo-subtext {
color: #4285f4;
position: relative;
left: 110px;
top: -18px;
}

/* The CSS code snippet you provided is styling an advanced search container on a webpage. Here's a
breakdown of what each part of the code is doing: */
.advanced-search-container {
margin: 50px 40px;
}
.advanced-search-container label {
display: inline-block;
width: 16%;
font-size: 20px;
}
.advanced-search-container .whitespace {
display: inline-block;
width: 50%;
}
.advanced-search-container .form-group {
display: flex;
align-items: center;
margin-top: 10px;
padding: 10px 0;
}
.advanced-search-container .form-group label {
width: 16%;
font-size: 14px;
}
.advanced-search-container .form-group input[type=text] {
width: 49%;
padding: 2px 0;
}
.advanced-search-container .form-group .clarification {
font-size: 11px;
width: 30%;
margin-left: 1%;
}
.advanced-search-container .form-group .clarification .monospace {
font-family: monospace;
}
.advanced-search-container .form-group .right-align {
width: 50%;
}