├── README.md ├── css └── style.css ├── favicon.ico ├── img ├── g-menu.PNG ├── icon.jpg ├── logo.png ├── search.svg └── vs.png └── index.html /README.md: -------------------------------------------------------------------------------- 1 | #How to Make Google Home Page using HTML and CSS 2 | Recreating the Google Homepage with HTML & CSS (Flexbox) 3 | 4 | 5 | ► Subscribe Us: 6 | https://www.youtube.com/codingwithelias?sub_confirmation=1 7 | 8 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin:0; 4 | box-sizing: border-box; 5 | text-decoration: none; 6 | font-family: arial, sans-serif; 7 | } 8 | body { 9 | display: flex; 10 | flex-direction: column; 11 | min-height: 100vh; 12 | } 13 | nav { 14 | display: flex; 15 | align-items: center; 16 | justify-content: flex-end; 17 | margin-right: 30px; 18 | margin-top: 14px; 19 | } 20 | nav a { 21 | font-size: 13px; 22 | display: inline-block; 23 | line-height: 24px; 24 | font-weight: 400; 25 | color: rgb(0,0,0, 0.87); 26 | cursor: pointer; 27 | padding: 5px 6.7px 28 | } 29 | nav a:hover { 30 | text-decoration: underline; 31 | opacity: .85; 32 | } 33 | nav img { 34 | width: 34px; 35 | padding: 5px; 36 | margin: auto 7px; 37 | cursor: pointer; 38 | } 39 | nav img:hover { 40 | opacity: .8; 41 | } 42 | nav button { 43 | border: 1px solid #4285f4; 44 | font-weight: bold; 45 | outline: none; 46 | background: #4285f4; 47 | color: #fff; 48 | padding: 7px 12px; 49 | border-radius: 3px; 50 | margin-left: 7px; 51 | cursor: pointer; 52 | } 53 | .section-1 { 54 | flex: 1; 55 | } 56 | .section-1 .logo { 57 | display: block; 58 | margin: 0px auto; 59 | margin-top: 107px; 60 | } 61 | .s-box { 62 | width: 580px; 63 | margin: 0px auto; 64 | position: relative; 65 | margin-top: -8px; 66 | text-align: center; 67 | } 68 | .s-box .s-input { 69 | display: block; 70 | border: 1px solid #ddd; 71 | color: rgba(0,0,0, 0.87); 72 | font-size: 16px; 73 | padding: 13px; 74 | padding-left: 45px; 75 | border-radius: 25px; 76 | width: 100%; 77 | transition: box-shadow 100ms; 78 | outline: none; 79 | } 80 | .s-box .s-input:hover { 81 | border: 1px solid #fff; 82 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 83 | 0 0 2px rgba(0, 0, 0, 0.05), 84 | 0 0 3px rgba(0, 0, 0, 0.05), 85 | 0 0 4px rgba(0, 0, 0, 0.05), 86 | 0 0 5px rgba(0, 0, 0, 0.05), 87 | 0 0 4px rgba(0, 0, 0, 0.05), 88 | 0 0 5px rgba(0, 0, 0, 0.05) 89 | } 90 | .s-box .search-icon { 91 | width: 20px; 92 | opacity: .4; 93 | position: absolute; 94 | top: 13px; 95 | left: 14px; 96 | } 97 | .s-box .vs-icon { 98 | width: 14px; 99 | position: absolute; 100 | top: 13px; 101 | right: 24px; 102 | } 103 | .s-btn { 104 | border: 1px solid transparent; 105 | padding: 9px 15px; 106 | color: #666; 107 | font-size: 14px; 108 | border-radius: 4px; 109 | display: inline-block; 110 | margin-right: 10px; 111 | margin-top: 28px; 112 | outline: none; 113 | cursor: pointer; 114 | transition: border-color 100ms; 115 | } 116 | .s-btn:hover { 117 | border: 1px solid #aaa; 118 | } 119 | .lang { 120 | margin-top: 30px; 121 | text-align: center; 122 | font-size: 13px; 123 | color: #111; 124 | } 125 | .lang a { 126 | margin-left: 5px; 127 | color: #1a0dab; 128 | } 129 | .lang a:hover { 130 | text-decoration: underline; 131 | } 132 | footer { 133 | background: #f2f2f2; 134 | } 135 | footer h4 { 136 | color: rgba(0,0,0, 0.54); 137 | font-size: 15px; 138 | line-height: 39.5px; 139 | font-weight: 400; 140 | padding-left: 29px; 141 | border: 1px solid #eee; 142 | } 143 | footer a { 144 | color: #5f6368; 145 | display: inline-block; 146 | padding: 12px 11.3px; 147 | font-size: 14px; 148 | } 149 | footer a:hover { 150 | text-decoration: underline; 151 | } 152 | .links { 153 | border-top: 1px solid #ddd; 154 | display: flex; 155 | } 156 | .link-1 { 157 | padding-left: 18.7px; 158 | flex: 1; 159 | } 160 | .link-2 { 161 | padding-right: 18.7px; 162 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/google-ui/68a8e32475fd9184d0a966dde920d5e96711ec51/favicon.ico -------------------------------------------------------------------------------- /img/g-menu.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/google-ui/68a8e32475fd9184d0a966dde920d5e96711ec51/img/g-menu.PNG -------------------------------------------------------------------------------- /img/icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/google-ui/68a8e32475fd9184d0a966dde920d5e96711ec51/img/icon.jpg -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/google-ui/68a8e32475fd9184d0a966dde920d5e96711ec51/img/logo.png -------------------------------------------------------------------------------- /img/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/vs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/google-ui/68a8e32475fd9184d0a966dde920d5e96711ec51/img/vs.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Google 6 | 7 | 8 | 9 | 10 | 16 |
17 | 18 |


19 |
20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |
28 | Google offered in: 29 | Nederlands 30 | Frysk 31 |
32 |
33 | 49 | 50 | 51 | --------------------------------------------------------------------------------