<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Welcome to Contact Us Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<section>
<div class="topCon">
<h2>Cntact Us</h2>
<p>Always humans, never bots. The hands-down, sharpest and friendliest support team in the biz. <br>
Contact us and we'll get back to you in about 30 minutes.</p>
</div>
<div class="container">
<div class="contactInfo">
<div class="box">
<div class="icon">
<i class="fa fa-map-marker"></i>
</div>
<div class="text">
<h3>Address</h3>
<p>SSK Residency,AECS Layout,<br>Banglore,560068</p>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-phone"></i>
</div>
<div class="text">
<h3>Phone Number</h3>
<p>+91-7406028344 <br>+91-9972659803 </p>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-envelope-o"></i>
</div>
<div class="text">
<h3>Email address</h3>
<p>omarhassan-2016@outlook.com</p>
</div>
</div>
</div>
<div class="contactForm">
<h2>Send Message</h2>
<form class="" action="index.html" method="post">
<div class="inputBox">
<input type="text" name="" value="" required>
<span>Enter Full Name</span>
</div>
<div class="inputBox">
<input type="text" name="" value="" required>
<span>Enter Email</span>
</div>
<div class="inputBox">
<textarea name="" required></textarea>
<span>Type Your Message</span>
</div>
<div class="inputBox">
<input type="submit" name="" value="submit">
</div>
</form>
</div>
</div>
<footer>© 2020 Omar Hassan</footer>
</section>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
section {
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(https://i.ibb.co/nDDmdVM/bg1.png);
background-size: cover;
flex-direction: column;
}
section .topCon {
min-width: 800px;
text-align: center;
}
section .topCon h2 {
font-size: 36px;
font-weight: 500;
color: white;
}
section .topCon p {
color: white;
font-weight: 300;
}
.container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.container .contactInfo {
width: 50%;
display: flex;
flex-direction: column;
}
.container .contactInfo .box {
position: relative;
padding: 20px 0;
display: flex;
}
.container .contactInfo .box .icon {
min-width: 60px;
height: 60px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;font-size: 24px;
}
.container .contactInfo .box .text {
display: flex;
margin: 20px;
flex-direction: column;
font-size: 16px;
color: white;
font-weight: 300;
}
.container .contactInfo .box .text h3 {
font-weight: 700;
color: rgba(18, 240, 248);
}
.contactForm {
width: 40%;
padding: 60px;
background-color: white;
}
.contactForm h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactForm .inputBox {
margin-top: 10px;
position: relative;
width: 100%;
}
.contactForm .inputBox input,.contactForm .inputBox textarea {
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid silver;
outline: none;
resize: none;
}
.contactForm .inputBox span {
position: absolute;
left: 0;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
color: #666;
transition: 0.5s;
}
.contactForm .inputBox input:focus ~span, .contactForm .inputBox input:valid ~span,
.contactForm .inputBox textarea:focus ~span, .contactForm .inputBox textarea:valid ~span {
font-size: 12px;
color: rgb(255, 3, 137);
transform: translateY(-20px);
}
.contactForm .inputBox input[type="submit"] {
width: 100%;
background-color: rgb(13, 198,204);
border: none;
color: white;
font-weight: 500;
font-size: 20px;
}
footer {
display: flex;
position: absolute;
bottom: 10px;
font-size: 12px;
font-weight: 500;
color: white;
border: solid 1px black;
}
@media (max-width:991px)
{
.container{
flex-direction:column;
}
.container .contactInfo{
margin-bottom:50px;
}
.container .contactInfo,
.contactForm{
width:100%;
}
}
