Skip to content

Finished Assignment #3

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

Finished Assignment #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0daaefc
Completed assignment,missing nav bar adjustment, font adjustments
JorgeBillini Nov 25, 2018
14acda0
Fixed NavBar, updated fonts and buttons, ready to merge
JorgeBillini Nov 26, 2018
d2dae37
added minor changes to gray card positioning
JorgeBillini Nov 27, 2018
3978950
fixed spacing for card and butons
JorgeBillini 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
71 changes: 71 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!Doctype <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Startup Matchmaker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet">

<link rel="stylesheet" type="text/css" media="screen" href="styles/app.css" />

</head>
<body>
<nav>
<div class="row toprow topBorder">
<h1 class="Title">Startup Matchmaker</h1>
<div class="col col-3"></div>
<a class="navigationBold" href="#"><strong>Developers</strong></a>
<a class="navigationBold" href="#"><strong>Designers</strong></a>
<a class="navigationOther" href="#">How it works</a>
<a class="navigationOther" href="#">Blog</a>
<a class="navigationOther" href="#">Our Team</a>




</div>
</nav>
<div class="row">
<div class="col col-12 graybackground"> Because two brains <del>taste</del> <ins>are</ins> better than one </div>
</div>

<div class= "row bgimg">
<div class="col col-6"></div>
<div class="col col-6 card">
<h2>Meet your match!</h2>
<p class="cardText">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 your profile</a>
</div>
</div>
<div class="row creationMenu">
<div class="buttonCol create">
<h2> Create a Profile</h2>
<p>Are you a Designer? Developer?
put yourself out there so that others so that others
can find you
</p>
<a class ="infoButton"href="#">Create a Profile</a>
</div>
<div class="buttonCol create create2">
<h2>Find a Developer</h2>
<p>Looking for a fantastic developer to work with on the next big thing? Look no further.</p>
<a class ="infoButton"href="#">Find a Developer</a>

</div>
<div class="buttonCol create create2">
<h2>Find a designer</h2>
<p>Need someone who can make a product intuitive and appealing? Get ready.</p>
<a class ="infoButton"href="#">Find a Designer</a>

</div>

</div>
<footer>
<dixv class="footer">
<div class="footerTxt"> © 2013 Startup Matchmaker. Made in NY.
</div>
</div>
</footer>
</body>
</html>
187 changes: 187 additions & 0 deletions styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
body{
width: 100%;
height: 100%;
font-family: Source Sans Pro;
background-color: black;
font-size: 20px;
line-height: 1.5;
}
.buttonCol{
width: 27.33%;
}
.Title{
font-family: 'Merriweather';
display: block;
color: yellow !important;

}
.navigationOther{
margin-left: 10px;
padding: 20px 15px;
display: block;
color: white;
font-family: 'Oswald';
}
.navigationBold{
margin-left: 10px;
padding: 20px 15px;
display: block;
color: white;
font-family: 'Oswald';
}
.creationMenu{
justify-content: space-evenly;
background-color: white;
}

.create{
overflow: auto;
padding: 10px;
}
.create2{
float: center;
border-left: 1px solid gray;
}
.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;


}

.footer{
margin-top: 20px;
min-height: 10%;
background-color: black;
color: white;
}
.footerText{
color:white;
background-color: black;
margin-top: 20px;
}
.cardText{
font-size: 20px;
}
.bgimg{
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-image: url('../images/coworking.jpg');
border: none;
padding: 10px 20px 30px 20px;

}
.card{
font-family: 'Oswald';
margin-top:30px;
font-weight: 900;
overflow: auto;
float: right;
opacity: .9;
width: 35%;
padding: 20px;
padding-bottom: 100px;
background-color: rgb(247, 239, 239);
}

.infoButton{
font-family: 'Oswald';
display: block;
flex-wrap: wrap;
background-color: lightgray;
color:black !important;
padding: 10px;
text-transform: uppercase;
border-radius: 5px;
box-shadow: 0 0px 2px 0px;
}
del{
color: gray;
}
ins{
text-decoration: none;
border-bottom: 2px solid yellow;
}
.graybackground{
width: 100%;
padding:20px;
background-color: rgb(196, 194, 194);
text-align: center;
font-family: Merriweather;
color:black;
font-weight: 900;
}
.smallnav{
padding-top: 100%;
}
a,a:hover,a:visited {
color: white;
text-decoration: none;
}
.topBorder{
border-bottom: 5px solid yellow;
}

.FindDevs{
font-weight: bolder;
font-size: 25px;
}
.pageTitle {
background-color: black;
}
.TitleText {
color:yellow;
font-family: 'Roboto', sans-serif;
font-weight: 800;
font-size: 200%;
}
.toprow{
background-color: black;
}
.button{
flex-wrap: wrap;
font-family: 'Oswald';
color: black !important;
text-align: center;
background-color: yellow;
display: block;
padding: 12px;
border-radius: 5px;
box-shadow: 0 3px 2px 0px;
float: center;
text-transform: uppercase;
letter-spacing: 1px;


}
.col {
width: calc(8.3333% - 4px);
box-sizing: border-box;
display: inline-block;
}

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

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

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

.col-6 {
width: calc(6 * 8.3333% - 4px);
}

.col-8 {
width: calc(8 * 8.3333% - 4px);
}

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