Read more
Ticket home page site
Hello dosto here is my ticket buying site home page see this is very good home page......
Here is source code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ticket website</title>
<style>
body{
background-image:url(/Screenshotbg1.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
background-size:100% 100%;
}
.navbar{
background-color:#8282E8;
border-radius:20px;
padding:1px;
transition:2s;
}
.navbar:hover{
background-color:#00FFA7;
}
.navbar ul{
overflow:auto;#C5DFDE;
}
.navbar li {
list-style:none;
float:right;
padding:10px 10px;
margin:9px 8px;
}
.navbar li a{
border-radius:20px;
box-shadow:0 0 20px;
text-decoration:none;
color:black;
padding:10px 10px;
margin:8px 9px;
}
.navbar li a:hover{
color:white;
}
.logo{
float:left;
font-size:20px;
text-transform:uppercase;
margin:9px 0px 7px;
color:#30E6E7;
text-shadow:3px solid #30E6E7;
}
.logo:hover{
color: black;
}
.logo span{
color:#30B1E7;
}
.contener{
display:flex;
align-items:center;
width:90%;
height:100vh;
padding:20px;
}
.box img{
border-radius:30px;
width:250px;
height:vh;
margin:20px;
}
.box {
width:250px;
height:1000px;
transition:2s;
margin:20px;
transition: 1s;
}
.box:hover{
transform:scale(1.6);
}
.contene{
display:flex;
align-items:center;
width:90%;
height:100vh;
padding:20px;
}
.bo img{
border-radius:30px;
width:250px;
height:vh;
}
.bo {
width:250px;
transition:2s;
margin:20px;
}
.bo:hover{
transform:scale(1.3);
}
.search{
display:flex;
align-items:center;
height:40px;
justify-content: center;
}
.search h2{
color:#7A7CB8;
font-size:40px;
transition:2s linear;
}
.search:hover h2{
color:white;
}
.name{
font-size:70px;
display:flex;
align-items: center;
justify-content: center;
color:white;
text-shadow:0 0 30px;
}
span{
color:#7A7FB8;
transition:2s;
}
.ss:hover {
color:white;
}
.kris{
padding:20px 80px;
border-radius:20px;
border:1px solid black;
box-shadow:0 0 10px;
background: transparent;
}
button{
padding:30px 90px;
margin-left:140px;
background-color:#1493CE;
box-shadow:0 0 10px #1493CE;
border:#1493CE;
border-radius:20px;
}
button:hover{
box-shadow:0 0 30px #1493CE;
}
.kk{
text-decoration:none;
font-size:30px;
color:white;
}
.kk::hover.name{
color:#1493CE;
}
.collum{
float:left;
padding:5px;
}
.collum img{
width:200px;
display:flex;
align-items:center;
justify-items:center;
margin-left:25px;
border-radius:20px;
transition:2s;
}
img:hover{
transform:scale(1);
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<h1>kri<span>shna</span></h1>
</div>
<ul>
<li><a href="https://m.indiacustomercare.com/indian-railways-customer-care-contact-helpline-numbers#gsc.tab=0">contect.us</a></li>
<li><a href="https://www.railyatri.in/m/pnr-status?utm_source=mwebhome_pnr_status">PNR/status</a></li>
<li><a href="#">home</a></li>
</ul>
</nav>
<br>
<br
<br>
<div class="search">
<h2>search box</h2>
<input type="text" name="search"
i class="kris"placeholder="search buty lace"></p>
</div>
<br>
<div class="name">
<h1>wellcome to<br><span class="ss">Railway</span></h1>
</div>
<div>
<button><a href="https://www.railyatri.in/m/train-ticket?utm_source=train_search_campaign_Compt&pt_source=googleads&pt_medium=cpc&pt_campaign=&gad_source=1&gclid=CjwKCAjw34qzBhBmEiwAOUQcF87iIA8gs-WeVMgotC1fRktMx1oDVLgNUeRpi2Jegw4lnCPyHpo62RoCIrUQAvD_BwE" class="kk">buy ticket</a></button>
</div class="glowing">
<br>
<div class="contener">
<div class="box">
<img src="/Screenshot1.jpg">
</div>
<div class="box">
<img src="/Screenshot2.jpg">
</div>
<div class="contene">
<div class="box">
<img src="/Screenshot_20240607-154527.jpg">
</div>
</div>
/div>
</div>
</body>
</html>
Portfolio home page
(Background img)
.png)
0 Reviews