Sir , I’m not able to align form and contact details in one lane.Its going up and down as though I used left and right to make it align on same line.
1 Like
Hi @snehalzanjad04,
Please share your code so that we can help you out with your query. Upload your code to google drive and share the public link of the project with us.
Plz sir look at my code n plz tell me what to do ?
@snehalzanjad04 We are looking into your code. Please give us sometime to check the issue and get back to you.
Yes sir PLZZ check it as soon as possible.
@snehalzanjad04 Our reviewer will look into your code by tomorrow. You can expect a reply on it by tomorrow as he is on a leave today.
yes sir , plzz sir as soon as possible solve my problem.
Hi @snehalzanjad04,
As I can see your code you have added the info-right side of div inside the info-left div.
Please check the below code and it will work as expected.
-
Remove the css property of info-right. To remove that I have just renamed it to info-right-new
-
I have set the info div as container box and added the css property:
style="display: flex;justify-content: center;padding:20px;"
- Then for both the left and right div i have set the width to 50%.
<!DOCKTYPE html>
<html>
<head>
<title>Inventrom website</title>
<link rel="stylesheet" type="text/css" href="website.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<! --header-->
<section id="header">
<div class="container">
<header class="Inventrom-header">
<div class="div-logo">
<img src="logo.png">
</div>
<nav class="Inventrom-nav">
<a href="#about">About</a>
<a href="#Awards">Awards</a>
<a href="#contact">Contact</a>
</nav>
</section>
<div class="site-content">
<div class="image-content">
</div>
</div>
<!-- Home-->
<section id="home">
<div class="home container">
<div>
<h1><i>Bolt is an Internet of Things platform for enterprise</i></h1>
<h1><i>ready Iot Products and solutions</i></h1>
<h2>CLICK TO KNOW MORE</h2>
</div>
</div>
</section>
<!-- End Home Section -->
<!--about section-->
<section id="about">
<h1 class="section-title"><span>About Us</span> </h1>
<p>We are an award-winning Iot startup. Our team has an extensive experience in enterprise Iot projects. Before working Bolt platform, we have been strategic Iot consultants to various Fortune 500 companies</p>
<div class="card-list">
<div class="card">
<img src="about_us_vision.png">
<div>
<h2>Our Vision</h2>
<h3>Build technology platforms for the better communication.</h3>
</div>
</div>
<div class="card">
<img src="abous_us_mission.png">
<div>
<h2>Our Mission</h2>
<h3>To build a Platform to make Iot development quick,easy,and low cost for developers.This will help in better connectivity between humans and machines helping us all in getting the most out of machines.</h3>
</div>
</div>
</div>
</div>
</section>
<!--End About Section-->
<!--Awards section-->
<a href="#Awards"></a>
<section id="Awards">
<h1 class="section-title"><span>Awards</span></h1>
<div class="pic-list">
<div class="pic">
<img src="award1.png">
<div>
<h2>SHOWCASE</h2>
<h3>
<hr>
</hr>
</h3>
<h4>INDO-US STARTUP-KONNECT PROGRAM,SILICON VALLEY.</h4>
</div>
</div>
<div class="pic">
<img src="award2.png">
<div>
<h2>WINNER</h2>
<h3>
<hr>
</hr>
</h3>
<h4>DST-LOCKHEED MARTIN INDIA INNOVATION GROWTH PROGRAM.</h4>
</div>
</div>
<div class="pic">
<img src="award3.png">
<div>
<h2>WINNER</h2>
<h3>
<hr>
</hr>
</h3>
<h4>POWER OF IDEAS.</h4>
</div>
</div>
<div class="pic">
<img src="award4.png">
<div>
<h2>WINNER</h2>
<h3>
<hr>
</hr>
</h3>
<h4>CHIEF MINISTER AWARD FOR BEST START-UP IN GOA.</h4>
</div>
</div>
</div>
</section>
<a href="#contact"></a>
<section id="contact">
<h6 class="section-title"><span>Get in Touch</span></h6>
<div class="info" style="display: flex;justify-content: center;padding:20px;">
<div class="info-left" style="width: 50%;">
<div>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "4801849",
formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"
});
</script>
</div>
</div>
<div class="info-right-new" style="width: 50%;">
<div>
<h1> Our Mission</h1>
<h2>Mumbai</h2>
<h3>Inventrom Private Limited,Unit no.B 32-A, B-wing, 2ndFloor,Raj Industrial complex,Military Road, Moral, Andheri East, Mumbai, Maharashtra- 400059.</h3>
<h4>Goa</h4>
<h5>Inventrom Private Limited,10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa- 403001,Near People's High School</h5>
</div>
<div>
<h1> Contact Us</h1>
<h2><i class="material-icons" style="font-size:40px">place</i> 79,11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka 560038 India</h2>
<h3><i class="material-icons" style="font-size:36px">local_phone</i> (+91) 8881197198</h3>
<h4><i class="material-icons" style="font-size:36px">local_post_office</i> contactus@boltiot.com</h4>
</div>
</div>
</div>
</section>
<!--End Awards section-->
<footer class="footer">
<div style="height:30%">
<h5>copyright © 2021 Inventrom</h5>
</div>
<div style="height: 50%;">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-whatsapp"></a>
</div>
<div style="height:50%;">
<a href="#" class="#154915"></a>
</div>
</footer>
</body>
</html>
Do let me know in case you need any other information.
Sir ,I am doing inventrom website project .In that header if I click about ,Awards ,Contacts ,It is not moving to appropriate page ,and my contacts also not aligning in proper right and left .I have shared my code ,kindly check my code.
Hi @jananipraveen2002,
Looks like you haven’t closed some of the div tags and in some places, you have closed more div tags than available. Please align your code with neat indentations and you will know where you haven’t closed your tag.
Regards,
Gaunisha Gaanavi G
Hi
I aligned the code and removed extra div tags but still can’t get exact output .
I shared the new code .kindly check it .
Please help me solve this problem
Hi @jananipraveen2002,
I have looked at your code. You have given two separate div’s named “right”. and have assigned the float:left property. You need to make it as one div named “right”. You can use flex for this. Please refer the code given below.
HTML:
<h1 ><span class="details">Get in Touch</span></h1>
<div class="connect">
<div class="left" style="width:50%;">
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "4801849",
formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"
});
</script>
</div>
<div class="right">
<h2>Our Location</h2>
<h3>Mumbai</h3>
<h4>Inventrom Private Limited,Unit no.B 32-A,B-Wing, 2ndFloor,Raj Industrial complex,Military Road,Moral ,Andheri East,Mumbai, Maharashtra-400059.</h4>
<h3>Goa</h3>
<h4>Inventrom Private Limited ,10.Gaspar Apartment,behind Suzuki showroom,Panjim,Goa-403001,Near People's High School.</h4>
<h2>Contact Us</h2>
<h3><a href="#" class="fa fa-map-marker"></a> 79,11th cross Rd,Binnamangala Indiranagar,Bengaluru,Karnataka 560038 India.</h3>
<h4><i class="fa fa-phone"></i> (+91) 8881197198</h4>
<h4><i class="fa fa-mail"></i>contactus@boltiot.com</h4>
</div>
</div>
</section>
</div>
CSS:
.connect{
display:flex;
justify-content: space-between;
}
.right{
float:right;
margin-right:10px;
text-align:left;
}Thank you so much for solving my problem.
I am working on an Inventrom website project internship.
Sir actually I have some doubts for that i need your support.I have almost completed but l m facing issue with my form ,whenever im trying to fill the form,after submitting form some contents (Get in touch contents ) are getting replaced and dislocating from its original place.I have used html and css for my project;this is just for your information.
Sir kindly look into it .Im eagerly waiting for your reply.
Here im attaching my code and ss of result.
https://drive.google.com/file/d/1bqTMn1PhruMxEB6m44Ix1I_YflQlPHZL/view?usp=sharing
https://drive.google.com/file/d/1AE74pFVWlLew5xHhXUyOB7WUdTyGTiiN/view?usp=sharinghttps://drive.google.com/file/d/1AE74pFVWlLew5xHhXUyOB7WUdTyGTiiN/view?usp=sharing
Hi @mishraayush1604,
You have shared only the HTML file to my mail. I would require you to share your whole project so that I could run it completely and have a look at your issue.