Initial commit
Your Name
parent
9849402398
commit
303afda1d3
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BSB Glam Clothing</title>
|
||||
<link rel="icon" type="image/png" href="img/favicon.png">
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/contact.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/webpages.css" rel="stylesheet" type="text/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.google.com/specimen/Open+Sans" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
|
||||
</head>
|
||||
<header>
|
||||
<div class="logo">
|
||||
<img src="img/logo.png">
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</nav>
|
||||
</header>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div style="text-align:center">
|
||||
<h2>Contact Us</h2><hr class="style11">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="footer-social-icons">
|
||||
<img src="img/map-pin.png"><img>
|
||||
<label>4238 Bingo RD</label>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-social-icons">
|
||||
<h4 class="_14">Follow us on:</h4>
|
||||
<ul class="social-icons">
|
||||
<li><a href="#" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<form action="/action_page.php">
|
||||
<form action="https://formspree.io/marleybeare56@gmail.com" method="POST">
|
||||
<label for="fname">First Name</label>
|
||||
<input type="text" id="fname" name="firstname" placeholder="First Name..">
|
||||
<label for="lname">Last Name</label>
|
||||
<input type="text" id="lname" name="lastname" placeholder="Last Name..">
|
||||
<label for="_replyto">Email Address</label>
|
||||
<input type="email" id="email" name="_replyto" placeholder="Email Address..">
|
||||
<label for="country">Country</label>
|
||||
<select id="country" name="country">
|
||||
<option value="australia">Australia</option>
|
||||
<option value="canada">Canada</option>
|
||||
<option value="usa">USA</option>
|
||||
<option value="haiti">Russia</option>
|
||||
</select>
|
||||
<label for="subject">Subject</label>
|
||||
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
hr.style11 {
|
||||
height: 6px;
|
||||
background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: black;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
/* Style inputs */
|
||||
input[type=text], select, textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 16px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
input[type=email], select, textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 16px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=submit]:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
/* Style the container/contact section */
|
||||
.container {
|
||||
border-radius: 5px;
|
||||
background-color: #FFEFF7;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.column label{
|
||||
background-color: #FFEFF7;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.container p{
|
||||
color: black;
|
||||
}
|
||||
|
||||
label {
|
||||
color: black;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color:red;
|
||||
}
|
||||
|
||||
/* Create two columns that float next to eachother */
|
||||
.column {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-top: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Clear floats after the columns */
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
|
||||
@media screen and (max-width: 600px) {
|
||||
.column, input[type=submit] {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
._12 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
._14 {
|
||||
font-size: 1.4em;
|
||||
color: black;
|
||||
}
|
||||
ul {
|
||||
padding:0;
|
||||
list-style: none;
|
||||
}
|
||||
.footer-social-icons {
|
||||
width: 350px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.footer-social-icons img{
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-social-icons label{
|
||||
width: auto;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.social-icon {
|
||||
color: #fff;
|
||||
}
|
||||
ul.social-icons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.social-icons li {
|
||||
vertical-align: top;
|
||||
display: inline;
|
||||
height: 100px;
|
||||
}
|
||||
.social-icons a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.fa-facebook {
|
||||
padding:10px 14px;
|
||||
-o-transition:.5s;
|
||||
-ms-transition:.5s;
|
||||
-moz-transition:.5s;
|
||||
-webkit-transition:.5s;
|
||||
transition: .5s;
|
||||
background-color: #322f30;
|
||||
}
|
||||
.fa-facebook:hover {
|
||||
background-color: #3d5b99;
|
||||
}
|
||||
.fa-instagram {
|
||||
padding:10px 12px;
|
||||
-o-transition:.5s;
|
||||
-ms-transition:.5s;
|
||||
-moz-transition:.5s;
|
||||
-webkit-transition:.5s;
|
||||
transition: .5s;
|
||||
background-color: #322f30;
|
||||
}
|
||||
.fa-instagram:hover {
|
||||
background-color: #00aced;
|
||||
}
|
||||
|
||||
label {
|
||||
color: black;
|
||||
}
|
||||
Loading…
Reference in New Issue