Create an Attractive HOME Webpage of any Website
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
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>
© 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);
}
0 Comments