How To Create A Attractive Website Design Using HTML And CSS
Learn How to make an Attractive website Just Using HTML And CSS. Easy way to learn How to Create an Attractive website for beginners. You will easily create this website design by watching my video tutorial, which I have given below. Master File(Source Code) also available in the post.
How To Make A Attractive Website Design Using HTML And CSS.
- 0.0 - 1.00 min : Intro
- 1.00 - 17.0 min: How To Create A Attractive Website Design Using HTML And CSS
You can easily make this Attractive Website Design by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML, CSS, and JavaScript code that I give below. Paste this HTML, CSS, and JavaScript code into your HTML, CSS, and JavaScript file. On the youtube video tutorial, I tell you all the important points which help you to make the Attractive Website Design like that for your website. So I recommended you watch the Attractive Website Design video Tutorial on how can I make this Attractive Website Design. This Attractive Website Design is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand the attractive Website Design video tutorial on how I make this. You can use this without any copyright.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <title>Makeup Website</title> <link rel="stylesheet" href="css/style.css"/> </head> <body > <!--navigation--> <div class="navigation"> <div class="logo"> <a href="#"><font style="font-family:coalition; color:#f2125b;">X</font> -GTN</a> </div> <div class="bars"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> </div> <!--navigation-end--> <img class="modal" src="images/modal.png"> <div class="container"> <div class="text-container"> <h1>Holidays</h1> <h2>Brunete</h2> <h1>Makeup</h1> </div> <div class="button-container"> <div class="button"> <a href="#"><img src="images/play-button2.png"></a> </div> <a href="#" class="play-text">Play Music</a> </div> </div> <p class="left">GOING-TO INTERNET</p> <p class="right">GOING-TO INTERNET</p> <div class="social"> <a href="#"><img src="images/google.social.png"></a> <a href="#"><img src="images/fb-social.png"></a> <a href="#"><img src="images/in-social.png"></a> <a href="#"><img src="images/twitter-social.png"></a> </div> <div class="bottom-left"> <h1>01</h1> <div class="line"></div> </div> </body> </html>
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
background-image:url(../images/bg.png);
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;}
a{
text-decoration:none;}
.navigation{
margin:40px 50px;
display:flex;
justify-content:space-between;
}
.logo a{
font-family:bebas kai;
color:#ececec;
font-size:30px;
}
.bar1,.bar2,.bar3{
margin:5px 0px;
background-color:#FFFFFF;
border-radius:20px;
height:3px;}
.bar1{
width:10px;}
.bar2{
width:20px;}
.bar3{
width:35px;}
.bars{
transform:rotate(180deg);}
.modal{
height:600px;
position:absolute;
left:55%;
bottom:0px;
transform:translateX(-55%);}
h1,h2{
color:#FFFFFF;
font-family:bebas kai;
letter-spacing:2px;
line-height:0px;
}
h1{
font-size:130px;}
h2{
font-size:80px;}
.button-container{
position:absolute;
right:12%;
text-align:center;}
.button{
border:5px solid #23303d;
border-radius:50%;
width:80PX;
height:70px;
padding:10px 5px;
margin:20px;
display:flex;
align-items:center;
justify-content:center;
}
.button img{
height:30px;
margin-left:8px;
margin-top:3px;}
.container{
margin:0px 90px;
display:flex;
align-items:center;
justify-content:space-between;
height:80vh;
position:relative;}
.text-container{
position:absolute;}
.play-text{
color:#bbb9b9;
font-family:myriad pro;
font-size:22px;}
.button:hover{
background-color:rgba(12,14,26,1.00);
transition:all ease 0.5s;
box-shadow:2px 2px 12px rgba(255,255,255,0.20);}
.left,.right{
color:#f0f0f0;
font-size:14px;
position:absolute;
font-family:myriad pro;
top:50%;
transform:translateY(-50%);
transform:rotate(90deg);
}
.left{
left:-20px;}
.right{
right:-20px;}
.social {
position:absolute;
bottom:30px;
right:40px;}
.social img{
height:17px;}
.social a{
margin:0px 10px;}
.bottom-left{
position:absolute;
bottom:10px;
left:50px;
display:flex;
align-items:center;}
.bottom-left h1{
color:#f2125b;
margin-right:5px;
font-size:70px;}
.line{
width:130px;
height:4px;
background-color:#FFFFFF;
border-radius:10px;
}
The Download Links Will Be Shown in 30 Seconds
I liked your work and, as a result, the manner you presented this content about web design dubai.It is a valuable paper for us. Thank you for sharing this blog with us.
ReplyDelete