Skip to content

Add Matchmaker #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tmiller12r wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Matchmaker #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Startup Matchmaker</title>
<link rel='stylesheet' href='styles/main.css'>
</head>

<body>

<nav class="flexContainer black ">
<ul class="nav flexItem flexStart ">
<h1>
<li><a class="fcolor" href="#">Startup Matchmaker</a></li>
</h1>
</ul>
<ul class="nav flexContainer flexEnd ">
<strong>
<li><a class="wcolor" href="#">DEVELOPERS</a></li>
</strong>
<strong>
<li><a class="wcolor" href="#">DESIGNERS</a></li>
</strong>
<li><a class="wcolor" href="#">How it Works</a></li>
<li><a class="wcolor" href="#">Our Team</a></li>
<li><a class="wcolor" href="#">Blog</a></li>
</ul>
</nav>
<p class="tagline">Because two brains <del>taste</del><ins> are</ins> better than one.</p>
<section class="banner">

<div class="blurb">
<strong>
<h2>Meet your Match!</h2>
</strong>
<p>Have a great idea for a product, but need help making it a reality? We’re here to help. Startup
Matchmaker is the best place for designers and developers to find each other.</p>
<a class="button" href="#">Create a Profile</a>
</div>

</section>
<div class="touts">
<div class="col-3 tout">
<h3>Create a Profile</h3>
<p>Are you a Designer? Developer?
Put yourself out there so that others can find you!</p>
<a class="button" href="#">SIGN UP NOW</a>
</div>
<div class="col-3 tout">
<header>
<h3>Find a Developer</h3>
</header>
<p>Looking for a fantastic developer to
with on the next big thing? Look no further.</p>
<a class="button" href="#">START YOUR SEARCH</a>
</div>
<div class="col-3 tout">
<h3>Find a Designer</h3>
<p>Need someone who can make a
product intuitive and appealing? Get ready.</p>
<a class="button" href="#">START YOUR SEARCH</a>
</div>
</div>
<footer>
<div class="black row col-12">
<span> &copy; Startup Matchmaker. Made in NY.</span>
</div>

</footer>
</body>

</html>
184 changes: 184 additions & 0 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
html, body {
margin: 0;
}

.flexContainer {
display: flex;
margin: 0;
}

h1 {
font-family: 'Merriweather', sans-serif;
font-size: 32px;
}

.flexItem {
flex: 1;
margin: 0;
}

.flexStart {
justify-content: flex-start;
}

.flexEnd {
justify-content: flex-end;
padding-top: 30px;
font-size: 19px;
font-family: 'Oswald', sans-serif;
}

.nav {
list-style: none;
border-bottom: 4px solid yellow;
}

.nav a {
text-decoration: none;
display: inline-block;
padding: 10px;
}

a:hover{
color:yellow;
}

div {
flex-wrap: wrap;
display: inline-block;
}

.row {
display: flex;
flex-wrap: wrap;
padding: 25px;
}

.tagline {
text-align: center;
margin: 0;
padding: 25px;
font-size: 30px;
line-height: 30px;
font-style: italic;
background: #C6C6C6;
border-top: 2px solid #AAA;
font-weight: bold;
}

.tagline ins {
text-decoration: none;
border-bottom: 3px solid yellow;
}

.tagline del {
color: #999;
}

.banner {
background: url(../images/coworking.jpg) center center no-repeat;
background-size: cover;
overflow: hidden;
padding: 3%;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .75);
}

section {
display: block;
}

.blurb {
background: rgba(255, 255, 255, .8);
width: 34%;
margin: 0 auto;
padding: 35px;
float: right;
box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.touts {
display: flex;
}

.tout {
padding: 10px;
margin: 10px;
margin-left: 5%;
border: 10px;
display: inline-flex;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .15);
font-family: 'Merriweather', sans-serif;
}

.tout .button {
background: #c6c6c6;
}

.tout:last-child {
box-shadow: none;
}

.button {
background: #C6C6C6;
font-family: 'Oswald', sans-serif;
text-decoration: none;
letter-spacing: 1px;
font-weight: bolder;
color: black;
display:block;
background: yellow;
text-align: center;
padding: 23px;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
text-transform: uppercase;
}

h3, p {
font-family: 'Merriweather', serif;
font-size: 28px;
}

.col {
width: 8.3333%;
/* min-height: 100%; */
}

.col-2 {
width: calc(2 * 8.3333%);
}

.col-3 {
width: calc(3 * 8.3333%);
}

.col-12 {
width: calc(12 * 8.3333%);
}

.black {
background-color: black;
}

.yellow {
background-color: yellow;
}

.grey {
background-color: grey;
}

.wcolor {
color: white;
}

.fcolor {
color: yellow;
}

footer {
color: white;
font-weight: 900;
font-size: inherit;
padding-top: 20px;
}