Easy Tic-Tac-Toe Game using HTML, CSS & JavaScript

Frontend Everything — Mon, 10 Jan 2022 05:08:13 +0000

Hello everyone,

Today I have build a simple tic tac toe game using HTML, CSS & JavaScript. I have shared the code in detailed and is available here: CLick Here

Google Homepage Clone With HTML and CSS | By Frontend Everything

Frontend Everything — Wed, 10 Nov 2021 16:06:36 +0000

Hello Everyone 👋Welcome to My New Blog Post! Today I have made a Google homepage clone with the help of HTML and CSS | We have used no JavaScript in this 😎

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything .

Let's start making the google homepage clone step by step

First,
We will make the nav, in the navbar we will include 4 things - Gmail, images, menu, sign-in button.

Let's see the HTML Code of the navbar

Gmail
Images
Sign in

Output till now

google
This is nav with CSS we will move on CSS after html

Second part of HTML,

We will make the center part of the google home page with will include logo, searchbar and buttons.

Let's see the Code of the center part

Output till now

this is with CSS styling will show the CSS code after this html

The final HTML Part,

This is the final part we will make the footer of the google homepage it will not contain many things!

Let's see the Code of the footer/last part

India
About

Privacy
Terms
Settings

This is the Output till now note: this output is not with css

output with css

This is the full CSS,

Before we have only code HTML, this is the full CSS code
html {

height: 100%;

font-size: 100%

}

body {

font: 13px arial;

sans-serif;

}

/* ------- Nav Items ------- /

ul {

list-style: none;

padding: 0px;

line-height: 0px;

}

li {

display: inline-block;

padding: 5px 7px;

vertical-align: middle;

}

nav, footer {

padding: 4px 20px;

}

/ ------- Top Nav ------- /

nav img {

list-style: none;

color: #000;

opacity: 0.85;

}

nav a {

text-decoration: none;

color: #000;

opacity: 0.75;

}

nav ul li a:hover {

text-decoration-line: underline;

opacity: 0.65;

}

/ ------- Right Nav Items ------- /

.r_nav {

float: right;

position: relative;

padding-top: 0px;

padding-right: 8px;

}

.apps {

width: 16px;

height: 16px;

margin-top: -2px;

padding-right: 9px;

opacity: 0.75;

}

.apps:hover {

opacity: 1;

}

/ ------- Sign In Button ------- /

.sign_in {

border: 1px solid #4285f4;

outline: none;

background: #4285f4;

display: inline-block;

line-height: 28px;

padding: 0 12px;

border-radius: 2px;

}

.sign_in a {

font-weight: bold;

color: #fff;

opacity: 1;

text-decoration: none;

}

.sign_in a:hover {

opacity: 1;

text-decoration: none;

}

.sign_in:hover {

opacity: 1;

box-shadow: 0 1.5px 0 0 #e4e4e4;

}

/ ------- Center Conte ------- /

.cntr_pg {

position: absolute;

top: 40%;

left: 50%;

margin-right: -50%;

transform: translate(-50%, -50%)

}

.logo {

display: 100%;

height: 92px;

width: 272px;

display: block;

margin: auto;

}

.form {

display: block;

margin: auto;

}

.search_bar {

border-radius: 40px;

width: 585px;

margin: auto;

height: 39px;

border: .7px solid #E4E4E4;

background-color: #fff;

box-shadow:0px 1px 4px #E4E4E4;

margin-bottom: 20px;

outline: none;

text-indent: 15px;

}

.search_bar:hover, .search_bar:active {

padding-bottom: 2px;

padding-top: 1px;

margin-top: -1px;

width: 585px;

box-shadow:0px 3px 8px #E4E4E4;

outline: none;

}

.mic {

width: 14px;

height: 20px;

position: relative;

left: 555px;

top: 34px;

}

.submit_buttons {

display: inline-block;

height: 36px;

cursor: pointer;

line-height: 27px;

background-color: #f2f2f2;

border: 1px solid #f2f2f2;

border-radius: 2px;

color: #757575;

cursor: default;

font-family: arial,sans-serif;

font-size: 13px;

font-weight: bold;

margin: 11px 4px;

min-width: 54px;

padding: 0 16px;

text-align: center;

}

.submit_buttons {

position: relative;

left: 25%;

right: -50%;

cursor: pointer;

}

.submit_buttons:hover {

border: .7px solid #d0d0d0;

color: #000;

box-shadow:0px 1px 4px #E4E4E4;

}

/ ------- Footer ------- */

.l_ftr {

float: left;

}

.r_ftr {

float: right;

}

footer {

line-height: 0px;

position: absolute;

left: 0;

right: 0;

bottom: 0;

color: #666666;

background-color: #f2f2f2;

border-top: solid 1px #e4e4e4;

}

footer a {

text-decoration: none;

color: #000;

opacity: 0.75;

}

footer a:hover {

text-decoration-line: underline;

}

This is complete code of CSS

Final Output
google
Final output of google homepage

To make your work easier here is the codepen link 🤩. don't forget to follow me there if you liked the project 😄.

This is codepen link: https://codepen.io/CodedByPiyush/pen/vYJpMpV
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything . I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.

DEV Community: Frontend Everything

Easy Tic-Tac-Toe Game using HTML, CSS & JavaScript

Hello everyone,

Google Homepage Clone With HTML and CSS | By Frontend Everything