ایجاد شده در ۱۱ آبان ۱۴۰۴
سلام وقت بخیر
inputها سمت چپcontainer قرار نمیگیرن
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: vazir;
/* direction: ltr; */
}
a {
text-decoration: none;
}
ul,
ol {
list-style: none;
}
ul,
ol,
li {
margin: 0;
padding: 0;
}
.container {
background-color: rgb(238, 56, 134);
height: 100vh;
width: 100vw;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
form {
width: 100vw;
display: inline-flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
position: fixed;
text-align: center;
padding: 22px;
}
form input {
/* left: 0; */
/* position: relative; */
height: 0;
margin: 12px 0;
z-index: 10;
}
input::before {
/* left: 1px; */
/* left: 0; */
content: "";
cursor: pointer;
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid rgba(255, 255, 255, 8);
border-radius: 50%;
transition: all 0.2s ease;
/* background-color: #fff; */
}
input:checked {
border: 0;
outline: none;
}
input::after {
left: 0 !important;
content: "" attr(title) "";
/* left: 60px; */
position: relative;
color: #fff;
font-size: 14;
font-weight: bold;
display: block;
min-width: 120px;
opacity: 0;
top: -1px;
transition: left 0.3s ease-in-out, opacity 0.3s ease;
}
input:checked::before {
content: "";
background-color: rgb(35, 124, 179);
display: block;
}
input:checked::after {
opacity: 1;
left: 30px;
}
.labels {
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
input:nth-child(1):checked ~ .labels label {
transform: translateY(-0%);
}
input:nth-child(2):checked ~ .labels label {
transform: translateY(-100%);
}
</style>
</head>
<body>
<div class="container">
<form action="" class="form">
<input type="radio" name="solid" id="slide1" title="Home" checked />
<input type="radio" name="solid" id="slide2" title="about us" />
<input type="radio" name="solid" id="slide3" title="content" />
<input type="radio" name="solid" id="slide4" title="projects" />
<input type="radio" name="solid" id="slide5" title="users" />
<div class="labels">
<label for="slide1" id="slide1">
<div class="content">
<p>about us</p>
</div>
</label>
<label for="slide2" id="slide2">
<div class="content">
<p>content</p>
</div>
</label>
<label for="slide3" id="slide3">
<div class="content">
<p>projects</p>
</div>
</label>
<label for="slide4" id="slide4">
<div class="content">
<p>users</p>
</div>
</label>
<label for="slide5" id="slide5">
<div class="content">
<p>conection</p>
</div>
</label>
</div>
</form>
</div>
</body>
</html>
