Skip to content

Completed Matchmaker project #11

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
Senama wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Completed Matchmaker project #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
010a802
added html and main css
Senama Nov 27, 2018
019f202
final product
Senama Nov 27, 2018
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
90 changes: 90 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Startup Matchmaker</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Oswald:700|Merriweather:700,700italic"
rel="stylesheet" type="text/css">
<link rel='stylesheet' href='styles/main.css'>
<link rel="shortcut icon" href="styles/coworking.jpg">
</head>
<body>
<header>
<div class='row border'>
<div class='col col-4 width300'>
<span class='head'>Startup Matchmaker</span>
</div>
<div class='col col-8'>
<div class='row right'>
<nav class='col col-12'>
<div class='row right navfont'>
<div class='col col-2 width150 movedown'>
<a href="#" target="_blank" class="page-nav-link text"><strong>FIND DEVELOPERS</strong></a>
</div>
<div class='col col-2 width150 movedown'>
<a href="#" target="_blank" class="page-nav-link text"><strong>FIND DESIGNERS</strong></a>
</div>
<div class='col col-2 width150 movedown'>
<a href="#" target="_blank" class="page-nav-link text">How it Works</a>
</div>
<div class='col col-2 width150 movedown'>
<a href="#" target="_blank" class="page-nav-link text">Our Team</a>
</div>
<div class='col col-2 width150 movedown'>
<a href="#" target="_blank" class="page-nav-link text">Blog</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<div class='row backgroundpic'>
<div class='col col-12 greybar greyfont'>
<div class= 'greybartext'>Because two brains <s>taste</s> <span class='underline'>are</span> better than one.</div>
</div>
<div class='col col-12'>
<div class='row right pad marg flowover'>
<div class='col col-3 maxheight boxmargin'>
<div class='row white minwidth'>
<p class='padbox-top meetfont'>Meet your Match!</p>
<p class='padbox-mid'>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 padbox-button" href="#">Create a Profile</a>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col col-12 white-2'>
<div class='row'>
<div class='col col-4 noheight borderright marginbottom'>
<p class='fonthead meetfont'>Create a Profile</p>
<p>Are you a Designer? Put yourself out there so that others can find you!</p>
<a class="button grey" href="#">SIGN UP NOW</a>
</div>
<div class='col col-4 noheight borderright marginbottom'>
<p class='fonthead meetfont'>Find a Developer</p>
<p>Looking for a fantastic developer to work with on the next big thing?
Look no further.</p>
<a class="button grey" href="#">START YOUR SEARCH</a>
</div>
<div class='col col-4 noheight marginbottom'>
<p class='fonthead meetfont'>Find a Designer</p>
<p>Need someone who can make a product intuitive and appealing? Get ready.</p>
<a class="button grey" href="#">START YOUR SEARCH</a>
</div>
</div>
</div>
<footer>
<div class='row'>
<div class='col col-12 text footerfont'>
© 2013 Startup Matchmaker. Made in NY.
</div>
</div>
</footer>
</body>
</html>
Binary file added styles/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added styles/coworking.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
174 changes: 174 additions & 0 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
{
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
width: calc(8.3333%);


}
.col-2 {
width: calc(2 * 8.3333%);
}
.col-3 {
width: calc(3 * 8.3333%);
}
.col-4 {
width: calc(4 * 8.3333%);
}
.col-6 {
width: calc(6 * 8.3333%);
}
.col-8 {
width: calc(8 * 8.3333%);
}
.col-12 {
width: calc(12 * 8.3333%);

}

body {
background-color: black;
margin: 0px;
}
.right {
justify-content: flex-end;
}
.width300 {
min-width: 300px;
color: yellow;
}
.width150 {
min-width: 110px;
}
.backgroundpic {
background-image: url("coworking.jpg");
background-size: cover;

}
.greybar {
font-style: italic;
background: #C6C6C6;
text-align: center;
}
.greybartext {
flex-wrap: wrap;
text-align: center;
margin: 2%;
}
.page-nav-link {
text-decoration: none;
}
.page-nav-link:hover {
color: yellow;
text-decoration: underline;
}
.text {
color: white;
}
.white {
background-color: rgba(255, 255, 255, .8);
box-shadow: 0 0 5px rgba(0, 0, 0, .75)
}
.white-2 {
background-color: white;
}
.noheight {
min-height: 0px;
}
.underline {
border-bottom: 3px solid yellow;
}
.movedown {
padding-top: 15px;
text-align: center;
}
.border {
border-bottom: 4px solid yellow;
}
.moveright {
margin-left: 15px;
padding-right: 10px;
}
s {
color: #999;
}
.boxmargin {
margin: 15px 20px 15px;
;
}
.padbox-top {
padding: 20px 20px 0 30px;
}
.padbox-mid {
padding: 10px 20px 0 30px;
}
.padbox-button {
padding: 15px 20px 0 30px;
}
.button {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
background: yellow;
color: black;
display: block;
text-align: center;
padding: 12px;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
margin: 12px;
}
.flowover {
overflow: scroll;
}
.maxheight {
max-height: 360px;
}
.marg {
margin-bottom: 15px;
margin-right: 10px;
}
.minwidth {
min-width: 150px;
;
}
.fonthead {
font-weight: bold;
}
.grey {
background: #C6C6C6;
}
.borderright {
border-right: 1px solid grey;
}
.marginbottom {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 15px 0 15px;
}
.head {
font-size: 30px;
}
.navfont {
font-size: 15px;
}
.greyfont {
font-size: 25px;
font-weight: bold;
}
.meetfont {
font-weight: bold;
font-size: 20px;
}
p {
margin: 0;
}
.footerfont {
font-weight: bold;
padding: 15px 0 0 15px;
}