With the use of coding skill like

HTML (Hypertext Markup Language),

CSS (Cascading Style Sheets) you can do anything on your browser.

This is another kind of new way to express the power of Front end coding. Here you can learn “how to Create an Attractive/Beautiful/Decent/Impressive HOME Webpage of any Website”.

You just copy and paste into your code editor software and run it on your browser. You Don’t need to write manually it again. Just Copy & Paste.

If you don’t understand clearly so you can watch three youtube videos which mention the end of the page.

There are three videos.

In the first video, you can see the “Create an Attractive/Beautiful/Decent/Impressive HOME Webpage of any Website” then

the second video you can see “Use Font In your Website or Web Pages | Fontawesome” and the

last video you can see “Social Button and Cool Rotation Effects only with HTML & CSS”.

HTML

HEAD SECTION

<title>Webpage</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

BODY SECTION

    <div class="wrapper">
    	<header>
    		<div></div>
    		<nav>
    			<ul>
    				<li><a href="#" class="current"><i class="fas fa-home"></i> Home</a></li>
    				<li><a href="#"><i class="fas fa-book"></i> Classes</a></li>
    				<li><a href="#"><i class="fas fa-phone"></i> Order</a></li>
    				<li><a href="#"><i class="fas fa-portrait"></i> Contact</a></li>
    				<li><a href="#"><i class="fas fa-hand-point-up"></i> About Us</a></li>
    			</ul>
    		</nav>
    	</header>
    	<section class="sectiona">
    		<article>
    			<figure>
    				<img src="images/c.jpg">
    				<figcaption>Name1</figcaption>
    			</figure>
    			<hgroup>
    				<h2>Dish 1</h2>
    				<h3>Detail About Dish 1</h3>
    			</hgroup>
    			<p>Here you can write long discription about your dish which you serve at your restaurant</p>
    		</article>
    		<article>
    			<figure>
    				<img src="images/e.jpg">
    				<figcaption>Name2</figcaption>
    			</figure>
    			<hgroup>
    				<h2>Dish 2</h2>
    				<h3>Detail About Dish 2</h3>
    			</hgroup>
    			<p>Here you can write long discription about your dish which you serve at your restaurant</p>
    		</article>
    	</section>
    	<aside>
    		<section>
    			<h2 class="line">Popular Recipes <i class="fas fa-arrow-circle-down"></i></h2>
    			<a href="#">Recipe Name 1</a>
    			<a href="#">Recipe Name 2</a>
    			<a href="#">Recipe Name 3</a>
    			<a href="#">Recipe Name 4</a>
    		</section>
    		<address>
    			<i class="fas fa-map-marker-alt"></i>  Jawahar Marg,<br>Opposite Sarwate Bus Stand,<br>Chhoti Gwaltoli,<br>Indore, Madhya Pradesh 452001
    		</address>
    	</aside>
    	<a href="#" class="flipt">
    		<span class="frontt"><i class="fab fa-twitter"></i></span>
    		<span class="centert"></span>
    		<span class="backt">Click Here</span>
    	</a>
    	<a href="#" class="flipi">
    		<span class="fronti"><i class="fab fa-instagram"></i></span>
    		<span class="centeri"></span>
    		<span class="backi">Click Here</span>
    	</a>
    	<a href="#" class="flipg">
    		<span class="frontg"><i class="fab fa-google-plus-g"></i></i></span>
    		<span class="centerg"></span>
    		<span class="backg">Click Here</span>
    	</a>
    	<a href="#" class="flipy">
    		<span class="fronty"><i class="fab fa-youtube"></i></i></span>
    		<span class="centery"></span>
    		<span class="backy">Click Here</span>
    	</a>
    	<footer>
    		&copy 2018 <i class="fas fa-arrow-circle-right"></i> yashraj.online
    	</footer>
  </div><!-- .wrapper -->

CSS

header, nav, section, footer, article, figure, figcaption{
	display: block;
}
body{
	margin: 0;
	padding: 0;
	color: #666666;
	background-image: url(images/d.jpg);
	background-repeat: no-repeat;
}
.wrapper{
	width: 940px;
	margin: 10px 350px;
	border: 1px solid green;
	background-color: #ffffff;
}
nav, footer{
	clear: both;
	color: #ffffff;
	background-color: #aeaca8;
}
header div{
	margin: 0;
	padding:0;
	height: 260px;
	background-image: url(images/b.jpg);
}
nav ul{
	margin-top:0px;
	margin-bottom: 0px;
	padding: 15px 0px 15px 30px;
}
nav ul:hover li{
	opacity:0.5;
}
nav li{
	display: inline;
	margin-right: 40px;
}
nav ul li:hover{
	opacity: 1;
}
nav li a {
	color: #ffffff;
	text-decoration: none;
	transition: font-size 1s, color 1s, border 1s;
}
nav li a:hover, nav li a.current:hover{
	font-size: 40px;
	color: yellow;
	border-bottom: 1px solid black;
}
nav li a.currant{
	color: #666666;
}
section.sectiona{
	float: left;
	width: 660px;
	border-right: 1px solid #eeeeee;
}
article{
	clear: both;
	overflow: auto;
	width: 100%;
	background-color: #efefef;
}
figure{
	float: left;
	width: 290px;
	height: 235px;
	padding: 0;
	margin:10px;
	border: 1px solid #eeeeee;
}
figcaption{
	padding: 0;
	font-size: 90%;
	text-align: left;
}
hgroup{
	margin-top: 40px;
}
aside{
	background-image: url(images/a.jpg);
	float: left;
	width: 258px;
	height: 515px;
	padding-right: 20px;
	margin: 0;
}
aside section a{
    display: block;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid black;
    transition: color 1s, background-color 1.5s;
}
aside section a:hover{
    color:#ffee84;
    font-weight: 700;
    font-size: 20px;
    text-align: right;
    background-color: #726334;
}
aside address{
	display: block;
	padding: 10px;
	text-decoration: none;
	transition: font-size 1s ease-in-out;
}
aside address:hover{
	color: #985d6a;
	font-size: 25px;
}
h2,h3{
	font-weight: normal;
}
h2 {
	margin: 10px 0px 5px 0px;
	padding: 10px;
    transition: 1s ease-in-out;
}
h2{
	padding: 0;
}
h2.line:hover{
    border-top:10px inset #f2042c;
    border-bottom:10px inset #f2042c;
}
h3{
	margin: 0px 0px 10px 0;
	color: #de6581;
}
aside h2{
	padding: 10px 0 10px 0;
	color:#de6581;
}
footer{
	font-size: 100%;
	padding: 7px 0px 5px 20px;
	transition: 1s ease-in-out;
}
footer:hover{
	text-transform: uppercase;
	color: blue;
	background-color: #cedbef;
	text-align: center;
}
/*coding for twitter button*/
a.flipt{
	position: absolute;
	top:5%;
	left: 16%;
	transform:translate(-50%, -50%);
	width: 200px;
	height: 60px;
	text-align: center;
	transform-style: preserve-3d;
	perspective: 1000px;
	transform-origin: center;
}
span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	line-height: 60px;
	font-style:24px;
	background:rgba(255,255,255,0.05);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	border-radius: 30px;
	text-transform:uppercase;
	color: #fff;
	transition: 1s;
}
span.frontt{
	transform:rotateX(0deg) translateZ(20px);
}
a:hover span.frontt{
	transform:rotateX(-180deg) translateZ(20px);
}
span.backt{
	transform:rotateX(180deg) translateZ(20px);
}
a:hover span.backt{
	transform:rotateX(0deg) translateZ(20px);
}
span.centert{

}
span.centert:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	border-radius: 30px;
	transform:translateZ(-1px);
}
a:hover span.centert{
	transform:rotateX(-180deg);
}
.fab{
	font-size: 40px;
}
/*coding for Instagram button*/
a.flipi{
	position: absolute;
	top:12%;
	left: 16%;
	transform:translate(-50%, -50%);
	width: 200px;
	height: 60px;
	text-align: center;
	transform-style: preserve-3d;
	perspective: 1000px;
	transform-origin: center;
}
span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	line-height: 60px;
	font-style:24px;
	background:rgba(255,255,255,0.05);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	border-radius: 30px;
	text-transform:uppercase;
	color: #fff;
	transition: 1s;
}
span.fronti{
	transform:rotateX(0deg) translateZ(20px);
}
a:hover span.fronti{
	transform:rotateX(-180deg) translateZ(20px);
}
span.backi{
	transform:rotateX(180deg) translateZ(20px);
}
a:hover span.backi{
	transform:rotateX(0deg) translateZ(20px);
}
span.centeri{

}
span.centeri:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	border-radius: 30px;
	transform:translateZ(-1px);
}
a:hover span.centeri{
	transform:rotateX(-180deg);
}
/*coding for Google Plus button*/
a.flipg{
	position: absolute;
	top:20%;
	left: 16%;
	transform:translate(-50%, -50%);
	width: 200px;
	height: 60px;
	text-align: center;
	transform-style: preserve-3d;
	perspective: 1000px;
	transform-origin: center;
}
span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	line-height: 60px;
	font-style:24px;
	background:rgba(255,255,255,0.05);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	border-radius: 30px;
	text-transform:uppercase;
	color: #fff;
	transition: 1s;
}
span.frontg{
	transform:rotateX(0deg) translateZ(20px);
}
a:hover span.frontg{
	transform:rotateX(-180deg) translateZ(20px);
}
span.backg{
	transform:rotateX(180deg) translateZ(20px);
}
a:hover span.backg{
	transform:rotateX(0deg) translateZ(20px);
}
span.centerg{

}
span.centerg:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	border-radius: 30px;
	transform:translateZ(-1px);
}
a:hover span.centerg{
	transform:rotateX(-180deg);
}
/*coding for youtube button*/
a.flipy{
	position: absolute;
	top:28%;
	left: 16%;
	transform:translate(-50%, -50%);
	width: 200px;
	height: 60px;
	text-align: center;
	transform-style: preserve-3d;
	perspective: 1000px;
	transform-origin: center;
}
span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	line-height: 60px;
	font-style:24px;
	background:rgba(255,255,255,0.05);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	border-radius: 30px;
	text-transform:uppercase;
	color: #fff;
	transition: 1s;
}
span.fronty{
	transform:rotateX(0deg) translateZ(20px);
}
a:hover span.fronty{
	transform:rotateX(-180deg) translateZ(20px);
}
span.backy{
	transform:rotateX(180deg) translateZ(20px);
}
a:hover span.backy{
	transform:rotateX(0deg) translateZ(20px);
}
span.centery{

}
span.centery:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	border-radius: 30px;
	transform:translateZ(-1px);
}
a:hover span.centery{
	transform:rotateX(-180deg);
}

Images Used In This Project. You Can Download Here👇

YouTube

Part – 1

Part – 2

Part – 3

Like Our Facebook Page For Update!

Read More👇

• Oneplus 10 Pro SpecificationSeptember 10, 2022
• Google New Policy Will Kill Third-Party Call Recording AppsApril 22, 2022
• WhatsApp Pay Can Now Be Rolled out to 100 Million UsersApril 14, 2022
• Elon Musk Now Wants to Buy TwitterApril 14, 2022
• Things aren’t “back to normal” yet but GPU prices are…April 13, 2022
• Apple plans to build its own financial infrastructureApril 13, 2022
• DuckDuckGo Coming with Web BrowserApril 13, 2022
• Apple iPhone 13 Is Now Made in India: Manufacturing BeginsApril 12, 2022
• What is Bitcoin Mining and What are Its Benefits?April 11, 2022
• Measurement Apps for Android and iPhoneApril 11, 2022
• वनप्लस 10 प्रो उत्तरी अमेरिका में दुर्भाग्य से 65W फास्ट चार्जिंग तक सीमित रहेगाApril 10, 2022
• Many Ways to Get Netflix at a DiscountApril 10, 2022
• Leaks Its Unreleased 35W Dual Port USB-C Charger – AppleApril 10, 2022
• Detect Depression Based on Your Twitter ProfileApril 10, 2022
• Cool Hover Effects with CSSJuly 30, 2019
• 20 Modern Submit / Send Button Making with HTML, CSS, and JAVASCRIPTJuly 15, 2019
• UFO Loader Pure With CSSJune 3, 2019
• Going Back to History- LOADER | Pure through CSS |June 2, 2019
• CSS Grid & animation Slack logoJune 2, 2019
• Header With CSSJune 2, 2019
• Know About Search Engine Optimization (SEO) in HindiMay 5, 2019
• Create an Attractive HOME Webpage of any WebsiteApril 28, 2019
• Chat Box With CSSApril 28, 2019
• Heart Beating Pure With CSSApril 28, 2019
• Sun, Tree and Clouds Pure With CSSApril 28, 2019

Categories👇

• Apple
• Coding Power- HTML, CSS, JAVASCRIPT
• Cryptocurrency
• Oneplus
• Smartphone
• Tech
• YouTube