A Neuro Website Design Using HTML And CSS
Neuro Website Design
Learn how to make a neuro website design using HTML and CSS. Easy way to create a website for beginners using HTML And CSS. Pure HTML And CSS. You will create a website like this by following my video tutorial or steps, which I have given below.
How To Build A Neuro Website Design Using HTML And CSS
- 0.0 - 1.00 min : Intro
- 1.00 - 29.0 min: Building A Neuro Website Using HTML And CSS
About This Tutorial
In this tutorial, I will teach you how to make a Neuro Marketing website just using HTML and CSS. In the video tutorial, First 60s, I will show the design which I create in this tutorial. it is an eCommerce website design, which you also use for Marketing or Selling websites. it is easy to make and apply in your projects. If you have any questions about this tutorial or any problem, contact me.
1) First You Create A Website Folder.
2) Create HTML And CSS File, And Put This File In The Website Folder.
3) Link CSS File With HTML
4) Copy HTML Code Which I Given Below And Past In Your HTML File.
<html> <head> <meta charset="utf-8"> <title>Neuro Site</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <!--navigation--> <div class="naviagtion-container"> <!--logo--> <a class="logo" href="#"><font color="#f49661">ne</font>uro</a> <!--menu--> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Team</a></li> <li><a href="#">Support</a></li> </ul> </div> <!--cart--> <div class="cart"> <img src="images/basket-cart-icon-27.png" /> <a href="#">Cart</a> </div> </div> <!--text---------------------------------------> <div class="text-container"> <!--color-container--> <div class="color-container"> <div class="orange"></div> <div class="purple"></div> <div class="green"></div> </div> <!--text--> <div class="text"> <h1>Neuro</h1> <h2>Markiting</h2> </div> </div> <!--product-container----------------------------> <div class="product-container"> <!--product-box-1---------------------------> <div class="box-1"> <!--price--> <a class="price" href="#">$110</a> <!--detail--> <div class="product-img"> <img src="images/2.png" /> </div> <div class="detail"> <div class="type"> <!--icon--> <img class="icon" src="images/nike-logo.png" /> <!--type--> <p class="type-heading">SUPPORT SHOES</p> </div> <!--detail--> <div class="type-detail"> <p>Nike Shoes</p> <p>Shoes</p> </div> </div> <div class="cart-btn"> <a href="#">+</a> </div> </div> <!--product-box-2---------------------------> <div class="box-2"> <!--price--> <a class="price" href="#">$70</a> <div class="product-img"> <img src="images/1.png" /> </div> <div class="detail"> <div class="type"> <!--icon--> <img class="icon" src="images/nike-logo.png" /> <!--type--> <p class="type-heading">SUPPORT SHOES</p> </div> <!--detail--> <div class="type-detail"> <p>Nike Shoes</p> <p>Shoes</p> </div> </div> <div class="cart-btn"> <a href="#">+</a> </div> </div> <!--product-box-3---------------------------> <div class="box-3"> <!--price--> <a class="price" href="#">$900</a> <div class="product-img"> <img src="images/3.png" /> </div> <div class="detail"> <div class="type"> <!--icon--> <img class="icon" src="images/nike-logo.png" /> <!--type--> <p class="type-heading">SUPPORT SHOES</p> </div> <!--detail--> <div class="type-detail"> <p>Nike Shoes</p> <p>Shoes</p> </div> </div> <div class="cart-btn"> <a href="#">+</a> </div> </div> </div> <!--shoes-brand--> <img class="shoes-brand" src="images/shoe.png" /> <!--social--> <div class="social"> <a href="#"><img src="images/facebook.png" /></a> <a href="#"><img src="images/twitter.png" /></a> <a href="#"><img src="images/youtube.png" /></a> </div> </body> </html>
5) Copy CSS Code Which I Given Below And Past In Your CSS File.
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
background-image:url("../images/bg.png");
background-size:cover;
background-repeat:no-repeat;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
.naviagtion-container{
background-color: rgba(226,226,226,0.85);
height:60px;
font-family:calibri;
display:flex;
justify-content:space-between;
align-items: center;
padding:0px 4%;
box-shadow:2px 2px 12px rgba(0,0,0,0.1);
}
.logo{
color:#5f5f5f;
font-family:calibri;
font-weight:700;
font-size:34px;
}
.menu ul{
display: flex;
}
.menu ul li a{
margin:20px;
font-weight:bold;
color:#5f5f5f;
font-size:17px;
}
.menu a:hover {
color:#151515;
font-weight:bold;
transition:all ease 0.5s;
}
.cart{
display:flex;
align-items: center;
}
.cart img{
height:22px;
margin:10px;
}
.cart a{
font-weight:600;
color:#262525;
font-size:17px;
}
.color-container{
border-radius:10px;
overflow:hidden;
margin:20px;
width:14px;
height:170px;
box-shadow:-2px 2px 12px rgba(0,0,0,0.1);
}
.orange,.purple,.green{
height:57px;
}
.orange{
background-color:#fb7b33;
}
.purple{
background-color:#8b34ef;
}
.green{
background-color:#2fecbe;
}
.text-container{
display:flex;
align-items: center;
margin:7% 0px 4% 12%;
}
.text{
margin:10px;
width:350px;
}
.text h1,.text h2{
line-height:10px;
font-family:calibri;
}
.text h1{
font-size:110px;
font-weight:300;
letter-spacing:5px;
color:#4d4b4b;
}
.text h2{
font-size:55px;
font-weight:300;
color:#4d4b4b;
display:flex;
justify-content: flex-end;
}
.box-1,.box-2,.box-3{
width:230px;
height:370px;
background-size:cover;
margin:0px 50px;
border-radius:10px;
position:relative;
}
.box-1{
background-image: url("../images/box-1.png");
}
.box-2{
background-image: url("../images/box-2.png");
}
.box-3{
background-image: url("../images/box-3.png");
}
.product-container{
display: flex;
justify-content: center;
margin:0px 0px 20px 0px;
flex-wrap:wrap;
}
.price{
font-family:arial;
position: absolute;
font-size:20px;
color: #ffffff;
font-style:oblique;
font-weight:400;
text-shadow:2px 2px 5px rgba(0,0,0,0.1);
right: 7%;
top:16%;
transform:translate(-6%,-16%);
}
.icon {
width:40px;
}
.type-heading{
font-family:calibri;
font-weight:bold;
color:#191919;
padding:0px 0px 15px 0px;
}
.detail{
position:absolute;
left:30px;
bottom:20px;
}
.type-detail p{
font-family:arial;
font-weight:400;
color:#3A3A3A;
letter-spacing:1px;
line-height:5px;
font-size:18px;
}
.product-img img{
width:230px;
transform:rotate(52deg);
}
.product-img{
display: flex;
justify-content: center;
position: relative;
align-items: center;
height:70%;
}
.cart-btn{
position: absolute;
right:0px;
bottom:0px;
width: 50px;
height: 40px;
display: flex;
justify-content:center;
align-items: center;
background-color:#FFFFFF;
box-shadow:2px 2px 12px rgba(0,0,0,0.1);
border-bottom-right-radius:10px;
}
.cart-btn a{
color:#414040;
font-size:24px;
font-family: calibri;
font-weight:bold;
}
.cart-btn a:hover{
color:#1D1D1D;
transition:all ease 0.2s;
}
.shoes-brand{
position: fixed;
right:2%;
bottom:10px;
width:90px;
}
.social{
display:flex;
flex-direction: column;
left:0px;
top: 50%;
transform: translateY(-50%);
position: fixed;
}
.social img{
height:45px;
}
.social a{
line-height:0px;}
.social a:hover img{
transform: scale(1.1);
}
6) All Files link, Which I use in the project given below.
YOUR EXISTING AD GOES HERE
The Download Links Will Be Shown in 30 Seconds
Comments