- Joined
- Dec 9, 2018
- Posts
- 3,731
- Solutions
- 1
- Reaction
- 1,322
- Points
- 1,520
- Age
- 23
ganyan sana yung pag nag resize ka ng windows mo mag rere adjust ang mga button po hehehe...hirap pala mag self study ng css hahahah
bali ito code ko
Code:
<!DOCTYPE html>
<html lang="en">
<header>
<style>
.opening{
background-color: bisque;
padding: 20px;
margin-left: none;
margin-top: 0px;
text-align: center;
}
body{
margin: 0px;
background-color: burlywood;
}
.Kali{
list-style: none;
padding: 5px;
float: left;
margin-left: 25px;
margin-top: -15px;
display: flex;
background-color: aquamarine;
border-radius: 10px;
}
.Google{
list-style: none;
padding: 5px;
float: left;
margin-left: 25px;
margin-top: -15px;
display: flex;
background-color: aquamarine;
border-radius: 10px;
}
.YøùTùbé{
list-style: none;
padding: 5px;
float: left;
margin-left: 25px;
margin-top: -15px;
display: flex;
background-color: aquamarine;
border-radius: 10px;
}
.phcorner{
list-style: none;
padding: 5px;
float: left;
margin-left: 25px;
margin-top: -15px;
display: flex;
background-color: aquamarine;
border-radius: 10px;
}
.button-container{
display: flex;
max-width: 300px;
gap: 1px;
}
button{
background-color: whitesmoke;
text-align: left;
border-radius: 15px;
}
.button1{
color: rgb(31, 202, 65);
background-image: url(Kali_Linux.jpg);
font-size: 20px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
width: 175px;
height:100px;
}
.button2{
color: black;
background-image: url(google.png);
font-size: 30px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
background-position: center;
background-size: cover;
width: 175px;
height:100px
}
.button3{
background-image: url(673518.png);
background-size: cover;
background-position: center;
width: 175px;
height:100px
}
.button4{
background-image: url(XenForo.webp);
background-size: 85%;
background-position: center;
max-width: 100%;
width: 175px;
height:100px;
}
</style>
</header>
<head>
<h1 class="opening">Redirection Example</h1>
</head>
<body>
<div class="button-container">
<div class="Kali"><a href=Kali_Linux.jpg target="_blank"><button class="button1">Kali Linux</button></a></li></div>
<div class="Google"><a href="https://www.google.com/" target="_blank"><button class="button2">Google</button></a></li></div>
<div class=YøùTùbé><a href="https://www.YøùTùbé.com/" target="_blank"><button class="button3"></button></a></div>
<div class="phcorner"><a href="https://phcorner.net/" target="_blank"><button class="button4"></button></a></div>
</div>
</body>
</html>
Attachments
-
You do not have permission to view the full content of this post. Log in or register now.