<header>
<a href="index.html"><img src="https://assets.codepen.io/5257275/ttc_logo.png" alt="logo"/></a>
<nav>
<ul>
<li><a class="activePage" href="index.html">Home</a></li>|
<li><a href="#about">About</a></li>|
<li><a href="#portfolio">Portfolio</a></li>|
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<body>
<section id="welcome" class="clearFix">
<h1>Designing Your World</h1>
<h2>One pixel at a time.</h2>
</section>
<main>
<section id="about">
<h2>About Us</h2>
<article class="col1">
<p>Two Trees Creative is a full-service graphic design agency based in Ventura, CA. Our goal is to provide elegant work and unsurpassed customer service to our clients in every way.</p>
<h3>Meet Our Team of Creatives</h3>
<p>Collectively we have over 15 years experience in the graphic design industry, and our services include brand identity development, business cards, brochures, flyers, catalogs, and more. Thank you for considering us for your next project, and we hope to hear from you soon.</p>
</article>
<figure class="col2">
<img src="https://assets.codepen.io/5257275/alex_morrales.jpg" width="155" height="157" alt="Alex Morrales"/>
<img src="https://assets.codepen.io/5257275/david_kim.jpg" width="155" height="157" alt="David Kim"/>
<img src="https://assets.codepen.io/5257275/jenny_tabers.jpg" width="155" height="157" alt="Jenny Tabers"/>
<img src="https://assets.codepen.io/5257275/joey_barrett.jpg" width="155" height="157" alt="Joey Barrett"/>
<img src="https://assets.codepen.io/5257275/melinda_lee.jpg" width="155" height="157" alt="Melinda Lee"/>
<img src="https://assets.codepen.io/5257275/rachel_dotson.jpg" width="155" height="157" alt="Rachel Dotson"/>
</figure>
</section>
<section id="portfolio" class="clearFix">
<h2>Portfolio</h2>
<figure>
<button type="submit" class="btn" id="topLeft" name="scroll" value="scroll">
<img src="https://assets.codepen.io/5257275/musebtn.jpg" alt="Scroll Button" width="63">
</button>
<img src="https://assets.codepen.io/5257275/_0000_akridge_bcard.jpg" width="235" height="135" alt="Ackridge"/>
<img src="https://assets.codepen.io/5257275/_0001_balloon_races.jpg" width="235" height="135" alt="Balloon Races"/>
<img src="https://assets.codepen.io/5257275/_0002_seminar_flyer.jpg" width="235" height="135" alt="Seminar Flyer"/>
<img src="https://assets.codepen.io/5257275/_0003_eyedr_billboard.jpg" width="235" height="135" alt="Eye Dr Billboard"/>
<button type="submit" class="btn" id="topRight" name="scroll" value="scroll">
<img src="https://assets.codepen.io/5257275/musebtn.jpg" alt="Scroll Button" width="63">
</button>
<img src="https://assets.codepen.io/5257275/_0004_nerdcamp_logo.jpg" width="235" height="135" alt="NerdCamp Logo"/>
<button type="submit" class="btn" id="bottomLeft" name="scroll" value="scroll">
<img src="https://assets.codepen.io/5257275/musebtn.jpg" alt="Scroll Button" width="63">
</button>
<img src="https://assets.codepen.io/5257275/_0005_rockout_festival.jpg" width="235" height="135" alt="Rockout Festival"/>
<img src="https://assets.codepen.io/5257275/_0006_history_of_flight.jpg" width="235" height="135" alt="History of Flight"/>
<img src="https://assets.codepen.io/5257275/_0007_welder_poster.jpg" width="235" height="135" alt="Welder Poster"/>
<button type="submit" class="btn" id="bottomRight" name="scroll" value="scroll">
<img src="https://assets.codepen.io/5257275/musebtn.jpg" alt="Scroll Button" width="63">
</button>
</figure>
</section>
<section id="contact">
<figure class="col1">
<img src="https://assets.codepen.io/5257275/map.png" width="575" height="550" alt="Map"/>
</figure>
<section class="col2">
<h2>Contact Us</h2>
<form method="post" action="http://webdevbasics.net/scripts/demo.php">
<input type="email" id="email" name="emailaddress" placeholder="Your Email Address">
<textarea name="subject" id="subject" placeholder="Subject of Your Message"></textarea>
<textarea name="message" id="message" placeholder="Your message goes here..."></textarea>
<button id="send" type="submit">
SEND
<img src="https://assets.codepen.io/5257275/sendarrow.png" id="arrow" alt="arrow"/>
</button>
</form>
</section>
</section>
</main>
</body>
<footer class="clearFix">
<a href="index.html" target="top"><img src="https://assets.codepen.io/5257275/musebtn.jpg" id="normal" alt="Back to Top"/>
<p>Back to Top</p></a>
<img src="https://assets.codepen.io/5257275/social_icons.png" id="socialIcons" alt="Social Icons"/>
</footer>
</html>@charset "utf-8";
@font-face {
font-family: 'Effra', sans-serif;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Effra Bold', sans-serif;
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'kepler-std-display', serif;
font-weight: 400;
font-style: italic;
}
header, nav, main, address, footer {
display: block;
}
header {
text-align: center;
background-color: #EBEBEB;
}
#logo {
filter: brightness(75%) saturate(75%);
}
nav {
padding-top: 5px;
margin-bottom: -30px;
font-size: 18px;
color: #5B866B
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: #5B866B;
text-transform: uppercase;
margin: 0 25px;
position: relative;
}
nav ul li a:hover {
color: #fff;
background: rgba(185, 140, 72, 0.8);
padding: 6px;
}
.activePage {
color: #fff;
background: rgb(185, 140, 72);
padding: 6px;
}
body {
width: 1280px;
margin: 0 auto;
background-color: #EBEBEB;
font-family: Effra;
}
#welcome {
background: url("https://assets.codepen.io/5257275/twotrees.jpg") rgba(45, 62, 163, 0.8);
background-blend-mode: exclusion;
background-size: cover;
height: 720px;
color: #fff;
text-align: center;
}
h1 {
padding-top: 225px;
font-size: 64px;
font-family: 'Effra Bold', sans-serif;
text-transform: uppercase;
}
#welcome h2 {
font-size: 48px;
font-family: 'kepler-std-display';
color: #fff;
margin: -50px;
text-transform: none;
}
.col1 {
float: left;
padding-left: 100px;
padding-right: 25px;
width: 515px;
}
.col2 {
float: right;
width: 515px;
padding-right: 100px;
padding-left: 25px;
}
.clearFix {
clear: both;
max-width: 1280px;
}
h2 {
color: #524741;
font-size: 48px;
font-family: 'Effra Bold', sans-serif;
text-transform: uppercase;
}
h3 {
color: #86765C;
font-size: 36px;
font-family: 'Effra Bold', sans-serif;
}
p {
font-family: 'Effra', sans-serif;
font-size: 18px;
}
#about h2 {
text-align: center;
}
#about figure {
margin-left: 50px;
margin-top: -310px;
padding-bottom: 50px;
}
#about img {
box-shadow: 3px 3px #D3D3D3;
padding: 6px;
}
#portfolio {
background-color: #5B866B;
padding: 50px 0;
position: relative;
text-align: center;
}
#portfolio h2 {
color: #fff;
margin-top: -5px;
}
#portfolio figure {
width: 1000px;
margin: auto;
position: relative;
}
#portfolio img {
padding: 5px;
}
.btn {
border: none;
display: flex;
position: absolute;
border-radius: 50px;
cursor: pointer;
background-color: #B98C48;
overflow: hidden;
clip-path: circle(35%);
z-index: 4;
top: 1px;
}
#topLeft {
transform: rotate(-90deg);
margin-top: 35px;
margin-left: -40px;
}
#bottomLeft {
transform: rotate(-90deg);
margin-top: 185px;
margin-left: -40px;
}
#topRight {
transform: rotate(90deg);
margin-top: 35px;
margin-left: 950px;
}
#bottomRight {
transform: rotate(90deg);
margin-top: 185px;
margin-left: 950px;
}
#contact h2 {
margin-left: 150px;
margin-top: -10px;
}
#contact img {
margin-top: -1em;
position: absolute;
margin-left: -3em;
}
form {
padding-left: 25px;
}
input, textarea {
margin-top:10px;
display: block;
font-family: Effra, sans-serif;
font-size: 18px;
padding: 10px 0 10px 10px;
background-color: rgba(175, 175, 175, .45);
}
textarea {
min-width: 500px;
}
#email {
min-width: 498px;
}
#message {
padding-bottom: 150px;
}
#send {
margin-left: 380px;
margin-top: 30px;
padding-right: 28px;
padding-top: 6px;
font-family: 'Effra', sans-serif;
font-size: 24px;
background-color: #5B866B;
color: #fff;
position: relative;
clear: both;
width: 130px;
height: 60px;
line-height: 24px;
cursor: pointer;
border-radius: 5px;
white-space: nowrap;
}
#arrow {
padding-left: 76px;
padding-top: 20px;
}
footer {
height: 80px;
padding-top: 80px;
margin: auto;
}
#normal {
float: right;
margin-right: 80px;
}
footer p {
float: right;
padding: 20px 10px 0 0;
font-family: 'Effra', sans-serif;
font-size: 14px;
color: #000;
}
#socialIcons {
margin-left: 93px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.