I followed a tutorial on youtube on how to create tabs using html/css/javascript but I'm facing some problems. Note: I am not a computer science student and only learning to code so the terms that I'm using may not be accurate and these questions may be very elementary.
Only half of my body content is visible and the rest is cut off such that you could only see the top parts of the sentences/letters and the same goes to the images that I attached with. Is it because of the position absolute or other problems?
How do i move the texts from the anchor tag for "Order Now via Facebook/Whatsapp/email" upwards by a tiny margin? I've enlarged the icons by 2x but the resulting texts doesn't seem very aligned with the respective icons.
When I hover my cursor towards the btn-box, all other buttons at the tabs are animated simultaneously. Supposedly, the animations should only occur at the points where I am hovering instead of being applied at all the other btns.
Would love to receive any response to help me with these problems. Thank you.
*{
padding: 0;
margin: 0;
font-family: poppins;
}
.hero{
width: 80%;
height: 450px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.btn-box{
display: flex;
border-bottom: 1px solid #ccc;
}
.btn-box button{
background: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
margin-right: 50px;
font-size: 20px;
font-weight: bold;
}
.btn-box .fa{
margin-right: 20px;
}
.btn-box:hover .fa{
color: #ff7846;
}
.content-right img{
width: 350px;
}
.content{
display: flex;
justify-content: center;
align-items: center;
margin: 5% auto;
position: absolute;
transform: translateX(100%);
transition: 0.3s;
}
.content-left{
flex-basis: 50%;
}
.content-left p{
font-size: 15px;
padding: 30px 0;
}
.content-right{
flex-basis: 50%;
text-align: center;
}
#content1{
transform: translateX(0px);
}
#btn1{
color: #ff7846;
}
/*----PRODUCT DETAILS CONATCT ICON----*/
.content-left a{
width: 100%;
display: block;
padding: 10px 5px;
border-radius: 20px;
text-decoration: none;
background-color: #ff7846;
color: #fff;
text-align: center;
float: left;
}
#contact-ws{
width: 100%;
display: block;
padding: 8px 5px;
border-radius: 20px;
text-decoration: none;
background-color: #25D366;
color: #fff;
float: left;
margin-top: 10px;
text-align: center;
}
#contact-fb{
background-color: #0078ff;
color: #fff;
float: left;
margin-top: 10px;
text-align: center;
width: 100%;
display: block;
padding: 8px 5px;
border-radius: 20px;
text-decoration: none;
}
.content-left i{
margin: 10px;
}<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="faqstyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!--IONICON-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<title>Product details</title>
</head>
<body>
<div class="hero">
<div class="btn-box">
<button id="btn1" onclick="openHTML()"><i class="fa fa-info-circle"></i>Description</button>
<button id="btn2"onclick="openCSS()"><i class="fa fa-question-circle"></i>Specifications</button>
<button id="btn3"onclick="openJS()"><i class="fa fa-shopping-cart"></i>Place Order</button>
</div>
<div class="content" id="content1">
<div class="content-left">
<h1>How does it work?</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis mollitia suscipit temporibus incidunt consequatur autem eveniet tenetur consequuntur labore
atque odit optio dolore ipsa maxime, impedit laudantium dolorem illo unde! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum error, voluptates distinctio natus culpa vel, vitae eius dolore pariatur possimus beatae
commodi! Odit, quas commodi molestias placeat rerum harum recusandae!</p>
</div>
<div class="content-right">
<img src="#">
</div>
</div>
<div class="content" id="content2">
<div class="content-left">
<h1>Extra details</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nisi voluptas aut vero, commodi eum saepe temporibus expedita
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae blanditiis culpa ad, enim nisi velit perspiciatis aspernatur. Consequuntur neque asperiores ipsa voluptate alias labore ratione enim ipsum ut debitis? Officia.
quae, ab quo excepturi facere animi nulla quis labore deleniti totam nobis?</p>
</div>
<div class="content-right">
<img src="#">
</div>
</div>
<div class="content" id="content3">
<div class="content-left">
<h1>Get yours now!</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis mollitia suscipit temporibus incidunt consequatur autem eveniet tenetur consequuntur labore
atque odit optio dolore ipsa maxime, impedit laudantium dolorem illo unde!</p>
<a href="#"><i class="fas fa-envelope fa-2x"></i>Order via email</a>
<a href="#" id="contact-ws"><i class="fab fa-whatsapp fa-2x"></i>Order via Whatsapp</a>
<a href="#" id="contact-fb"><i class="fab fa-facebook-messenger fa-2x"></i>Order via Facebook Messenger-</a>
</div>
<div class="content-right">
<img src="#">
</div>
</div>
</div>
<script>
var content1 = document.getElementById("content1");
var content1 = document.getElementById("content2");
var content1 = document.getElementById("content1");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
function openHTML(){
content1.style.transform = "translateX(0)";
content2.style.transform = "translateX(100%)";
content3.style.transform = "translateX(100%)";
btn1.style.color = "#ff7846"
btn2.style.color = "#000"
btn3.style.color = "#000"
content1.style.transitionDelay = "0.3s"
content2.style.transitionDelay = "0s"
content3.style.transitionDelay = "0s"
}
function openCSS(){
content1.style.transform = "translateX(100%)";
content2.style.transform = "translateX(0)";
content3.style.transform = "translateX(100%)";
btn2.style.color = "#ff7846"
btn1.style.color = "#000"
btn3.style.color = "#000"
content1.style.transitionDelay = "0s"
content2.style.transitionDelay = "0.3s"
content3.style.transitionDelay = "0s"
} function openJS(){
content1.style.transform = "translateX(100%)";
content2.style.transform = "translateX(100%)";
content3.style.transform = "translateX(0)";
btn3.style.color = "#ff7846"
btn2.style.color = "#000"
btn1.style.color = "#000"
content1.style.transitionDelay = "0s"
content2.style.transitionDelay = "0s"
content3.style.transitionDelay = "0.3s"
}
</script>
</body>
</html>