Priyatham-sai-chand/images.css

256 lines
4.8 KiB
CSS
Raw Normal View History

2020-07-17 00:21:29 -07:00
html {
height: 100%;
width: 100%;
}
#navbar {
display: grid;
grid-template-columns: 50px 50px 1fr 50px 50px 50px 50px;
grid-template-rows: 50px;
grid-template-areas:
"about store . advanced search menu sign-in";
margin-right: 30px;
}
a, p {
text-decoration: none;
color: rgba(0,0,0,0.87);
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
a:hover {
text-decoration: underline;
}
#search {
grid-area: search;
justify-self: center;
align-self: center;
margin-right: 10px;
width: 150px;
}
#menu{
grid-area: menu;
justify-self: center;
align-self: center;
margin-right: 10px;
}
#menu img {
margin: 0;
height: 25px;
width: 25px;
}
#sign-in {
grid-area: sign-in;
justify-self: center;
align-self: center;
background-color: #4683ea;
height: 30px;
width: 65px;
line-height: 30px;
text-align: centeR;
color: white;
font-weight: bold;
border: 1px solid #4285f4;
border-radius: 3px;
}
.Main{
margin-top: 90px;
}
div img {
width: 272px;
height: 100px;
display: flex;
margin-left: 550px;
}
#images_word{
color: #4285f4;
font: 16px/16px roboto-regular, arial, sans-serif;
margin-left: 763px;
display: flex;
flex:2;
white-space: nowrap;
margin-top: -20px;
}
input[type=search],textarea {
font: 16px arial, sans-serif;
text-indent:5px;
width: 534px;
height: 44px;
outline:none;
border:none;
border-radius:24px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/1200px-Google_mic.svg.png'), url('https://icon-library.com/images/google-search-magnifying-glass-icon/google-search-magnifying-glass-icon-5.jpg');
background-repeat:no-repeat;
background-position:536px 14px, 19px 12px;
background-size:14px 19px, 17px 19px;
padding-left: 40px;
display:flex;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
form,textarea{
width: 550px;
height: 42px;
display:flex;
flex:1;
outline: none;
padding: 3px 0px 3px 3px;
border: 1px solid #DDDDDD;
margin-right: 370px;
margin-left: 400px;
margin-top: 25px;
border-radius: 24px;
}
form:focus,textarea:focus{
display:flex;
flex:1;
box-shadow: 0 0 5px #bdbdbd;
border: 1px solid #dfe1e5;
margin-right: 370px;
margin-left: 400px;
border-radius: 24px;
}
form:hover,textarea:hover{
box-shadow: 0 0 5px #bdbdbd;
border: 1px solid #dfe1e5;
margin-right: 370px;
margin-left: 400px;
border-radius: 24px;
}
input[type=submit]{
background-image: url('glass_blue.jpg');
outline:none;
background-size:20px 20px;
background-color: white;
background-position: center;
width: 44px;
height: 44px;
border: none;
background-repeat:no-repeat;
border-radius: 24px;
margin-right:10px;
cursor:pointer;
}
#camera{
background-image: url('https://webstockreview.net/images/clipart-camera-svg-11.png');
outline:none;
background-size:25px 25px;
background-color: white;
background-position: center;
width: 44px;
height: 44px;
border: none;
background-repeat:no-repeat;
border-radius: 24px;
padding-right: 25px;
}
#microphone{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/1200px-Google_mic.svg.png');
outline:none;
background-size:17px 19px;
background-color: white;
background-position: center;
width: 44px;
height: 44px;
border: none;
background-repeat:no-repeat;
border-radius: 24px;
margin-right:5px;
}
footer {
position: absolute;
bottom: 0px;
left:0px;
right:0px;
background:#f3f3f3;
padding-top: 20px;
border-top: 1px solid #e9e9e9;
line-height: 20px;
}
footer a:link, a:visited, a:active {
color: #696969;
font-family: arial, sans-serif;
font-size: 14px;
text-decoration:none;
}
footer a:hover {
text-decoration:underline;
}
.leftlinks {
position: relative;
bottom:14px;
left:10px;
padding-right:15px;
padding-left:15px;
font-size: 55px;
}
.rightlinks {
display:none;
}
@media (min-width: 1000px){
.rightlinks {
position: relative;
bottom:12px;
float:right;
right:18px;
padding-right:15px;
padding-left:15px;
display: flex;
flex:2;
}
}