Skip to content

Instantly share code, notes, and snippets.

@joel-extremo

joel-extremo/contact.html

Last active August 22, 2018 10:30
Show Gist options
  • Save joel-extremo/a2fabef47cad84159bd2b0bce906838b to your computer and use it in GitHub Desktop.
Save joel-extremo/a2fabef47cad84159bd2b0bce906838b to your computer and use it in GitHub Desktop.
Download ZIP
1.7: Bootstrap Components & Plug-ins
Raw
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans+Condensed:300" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>
<nav class="navbar-expand-lg fixed-top">
<section id="logo" class="left">
<a href="index.html">CareerFoundry</a>
</section><!-- end left nav -->
<section id="links" class="right">
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="faq.html">FAQ</a>
</section><!-- end right nav -->
</nav><!-- end nav -->
<section id="content" class="container">
<section class="info column">
<h1>Get in touch</h1>
<p>I'm very approachable and I would love to speak to you. Feel free to call, send me an email, Tweet me or complete the enquiry form</p>
<ul id="contact-list">
<li><i class="fas fa-phone"></i>1-829-849-2121</li>
<li><i class="far fa-envelope"></i>[email protected]</li>
<li><i class="fab fa-instagram"></i>@jmrv002</li>
<li><i class="fab fa-facebook-square"></i>https://www.facebook.com/joel.rodriguezvarona</li>
</ul>
</section><!-- end info -->
<section class="form-container column">
<h1>Send us a message</h1>
<form id="form" action="joke.html">
<input type="text" name="" placeholder="YOUR NAME">
<input type="text" name="" placeholder="EMAIL ADDRESS">
<input type="text" name="" placeholder="TELEPHONE NUMBER">
<textarea placeholder="YOUR MESSAGE"></textarea>
<button type="submit">SUBMIT</button>
</form><!-- end form -->
</section><!-- end form-container -->
</section>
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Raw
faq.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Faq</title>
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans+Condensed:300" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>
<nav class="navbar-expand-lg fixed-top">
<section id="logo" class="left">
<a href="index.html">CareerFoundry</a>
</section><!-- end left nav -->
<section id="links" class="right">
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="faq.html">FAQ</a>
</section><!-- end right nav -->
</nav><!-- end nav -->
<section id="faq">
<h1 class="text-center">FAQ</h1>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why did you decide to become a web developer?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Because I like too much technology.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What is your design process?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<ol>
<li>Get the requirements form the client</li>
<li>Make some diagrams and wirefrmaes</li>
<li>show the diagrams and flows of the system to the client for aprove</li>
<li>If all the flows are aproved. start coding</li>
</ol>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Who are your clients?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<ul>
<li>Viral Rich</li>
<li>Pitech S.R.L.</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
What is your average project turnaround?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
<div class="card-body">
6 month
</div>
</div>
</div>
</div><!-- end acordion -->
</section><!-- end faq -->
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Raw
style.css
.jumbotron{
background-image: url("../img/landscape.jpg");
background-size: cover;
}
.jumbotron p{
color: white;
}
.jumbotron h1{
color: #757575;
}
body{
background-color: #FFECB3;
}
.row {
color: #757575;
}
a{
color: black;
}
a:hover{
color: #757575;
}
/**** About page ****/
* { box-sizing: border-box; }
.container {
margin: 0 auto;
width: 80%;
}
.image img{
width: 100%;
}
.header h1 {
text-align: center;
}
.column {
display: inline-block;
float: left;
width: 33.33333333333333%;
padding: 0 20px;
}
.main-text {
padding-top: 60px;
clear: both;
}
#skill-list {
margin-left: 30px;
}
#skill-list li{
margin-bottom: 10px;
}
.skills {
background-color:#CDDC39;
color: #FFF;
padding: 20px 0;
}
body {
background-color: #8BC34A;
color: #DCEDC8;
}
h1,
h3{
color: #212121;
}
.emoji {
position:fixed;
bottom:1%;
right:3%;
}
.emoji span{
font-size: 100px;
}
#content{
padding-top: 70px;
}
/**** Contact page ****/
* { box-sizing: border-box; }
body{
background-color: #4CAF50;
color: white;
}
h1{
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
ul {
padding: 0;
list-style: none;
}
button{
background-color: black;
color: white;
height: 40px;
}
.container {
margin: 0 auto;
width: 60%;
}
#content{
margin-top: 10%;
}
.column{
display: inline-block;
float: left;
width: 50%;
padding: 0 40px;
}
.column > *{
margin-bottom: 30px;
}
.info p{
font-size: 1.5em;
font-weight: 300px;
text-align: justify;
}
#contact-list li{
margin-bottom: 10px;
font-size: 1.1em;
}
#contact-list i{
margin: 10px;
margin-left: 0px;
}
#form input,
#form textarea,
button{
border:none;
background-image:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: block;
width: 100%;
margin-bottom: 15px;
padding: 10px;
}
#form input{
height: 30px;
}
#form textarea{
height: 100px;
}
::placeholder {
color: #4CAF50;
}
/**** Nav bar ****/
.left { float: left; }
.right { float: right; }
nav {
background-color: #689F38;
padding: 20px 10%;
position: fixed;
width: 100% !important; /*to override the width of the class .container that give more importan because is a class and this rule is set to a tag*/
top: 0;
left: 0;
}
nav a {
color: white;
margin-left: 15px;
text-decoration: none;
}
nav #links a:hover {
color: black;
transition: color 600ms;
-webkit-transition: color 600ms;
}
nav #links {
font-size: 1.1em;
}
nav #logo {
font-size: 1.4em;
}
/*Typography*/
h1,
h2,
h3 {
font-size: 1.5em;
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
}
h1{
font-size: 1.9em;
}
p,
li{
font-family: Georgia, Helvetica, Arial, sans-serif;
}
#form input,
#form textarea,
button{
font-size: 90%;
font-family: 'Open Sans Condensed', sans-serif;
}
body{
font-family: 'Open Sans Condensed', sans-serif;
}
.intro p {
font-size: 1.2em;
font-weight: 100;
font-family: Futura, Helvetica, Arial, sans-serif;
-webkit-margin-before: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
.main-text p{
font-size: 1.4em;
}
/**** Faq ****/
#faq{ margin-top: 10%;}
#faq h1{ margin-bottom: : 200px;}
#faq .card-header { background: gray; }
#faq .card-header button { color: #ffffff; }
#faq .card-body {
font-size: 18px;
color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment