Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created September 14, 2020 12:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/2c3b9c1fcfea57adecbf24b75f7aadb5 to your computer and use it in GitHub Desktop.
Save codecademydev/2c3b9c1fcfea57adecbf24b75f7aadb5 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li> <a href=""> ABOUT </a> </p>
<li> <a href=""> BLOG </a> </p>
<li id="contato"> <a href="">CONTACT</a></p>
<li> <a href=""> PORT </a> </p>
</ul>
</nav>
<section class="compinfo">
<div class="info">
<div id='flex'>
<div class="texto">
<h1>Entre em contacto</h1>
<P>We simply provide data-driven full funnel growth marketing that actually works without all the agency fluff and budget waste. Find out yourself why NoGood is so good!</P>
</div>
<div class="texto">
<p>We simply provide data-driven full funnel growth marketing that actually works without all the agency fluff and budget waste. </p>
</div>
</div>
</div>
<div class="info">
<div class="form">
<h1> Fale com os nossos consultores </h1>
<form action="https://google.com/search">
<div class="formform">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" maxlength="50" required>
</div>
<div class="formform">
<label for="comp">Company Name</label>
<input type="text" name="comp_name" id="comp" maxlength="50" required>
</div>
<div class="formform">
<label for="email">E-mail</label>
<input type="text" name="" id="email" maxlength="50" required>
</div>
<div class="formform">
<label for="size">Company Size</label>
<select id="size" name="size" required>
<option value="----">-----</option>
<option value="1-10">1-10</option>
<option value="11-50">11-50</option>
<option value="51-200">51-200</option>
<option value="201-1000">201-1.000</option>
<option value="1001-10000">1.001-10.000</option>
<option value="+1000">+10.000</option>
</select>
</div>
<div class="formform">
<label for="mensagem">A sua mensagem</label>
<textarea id="mensagem" name="mensagem" rows="10" cols="70"></textarea>
</div>
<div class="formform">
<input type="submit" value="Send">
</div>
</form>
</div>
</div>
</section>
<footer>
<div id="adress">
<h3>Adress</h3>
<p>1000 7th Avenue</p>
<p>New York, NY</p>
<p>(484) 192 - 8372</p>
</div>
<div id="footcont">
<a href="">CONTACT</a>
</div>
</footer>
</body>
</html>
Raw
styles.css
body {
display: flex;
flex-wrap: wrap;
}
nav {
display: flex;
justify-content: flex-end;
background-color: black;
width: 100%;
height: 5rem;
margin: 0rem;
border: 0rem;
align-items: center;
}
ul {
display: flex;
color: black;
justify-content: flex-end;
}
ul a {
margin: 1.3rem;
font-family: 'Libre Baskerville', sans-serif;
font-size: 0.8rem;
font-style: bold;
color: white;
text-decoration: none;
}
#contato {
background-color: #ffc200;
padding: 0rem;
}
.compinfo {
margin: 0rem;
background: #ffc200;
color: black;
height: 50rem;
width: 100%;
border-top: 0.5rem solid ;
}
h1 {
font-size: 2rem;
text-align: center;
}
.info {
display: inline-flex;
flex-wrap: wrap;
height: 45rem;
max-width: 40rem;
font-family: 'Libre Baskerville', sans-serif;
}
#flex {
margin-top: 4rem;
width: 100%;
height: 100%;
}
.texto {
width: 90%;
height: auto;
margin: 2rem;
}
.form {
background-color: white;
width: 100%;
margin-top: 2rem;
height: 100%;
}
.form input[type=text] {
border-color: rgba(223,225,229,0);
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
padding: 2px 5px;
width: 95%;
height: 1.5rem;
margin: 1rem;
}
.form select {
border-color: rgba(223,225,229,0);
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
padding: 2px 5px;
width: 98%;
height: 2rem;
margin: 1rem;
}
.form textarea {
border-color: rgba(223,225,229,0);
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
padding: 2px 5px;
width: 95%;
height: 10rem;
margin: 1rem;
}
.form input[type=submit] {
width: 6rem;
height: 2rem;
border-color: rgba(223,225,229,0);
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
margin-top: 8rem;
margin-left: 13rem;
background-color: black;
color: white;
text-align: center;
font-family: 'Libre Baskerville', sans-serif;
font-size: 1rem;
border-radius: 25px;
}
.form label {
font-family: 'Libre Baskerville', sans-serif;
width: 3rem;
margin-left: 1rem;
margin-top: 2rem;
}
.formform {
margin: 3rem;
height: 2rem;
width: 85%;
}
footer {
display: inline-flex;
flex-wrap: wrap;
height: 10rem;
width: 100%;
color: white;
background-color: black;
justify-content: space-between;
}
#adress {
padding: 0.5rem 2rem;
font-family: 'Libre Baskerville', sans-serif;
font-size: 0.8rem;
}
#footcont {
width: 2rem;
height: 2rem;
padding: 0.5rem 2rem;
font-family: 'Libre Baskerville', sans-serif;
font-size: 0.8rem;
margin-top: 4rem;
margin-right: 4rem;
font-style: bold;
}
#footcont a {
background-color: #ffc200;
padding: 2rem;
color: white;
text-decoration: none;
margin-right: 4rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment