Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
7 changes: 7 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"workbench.colorCustomizations": {
"activityBar.background": "#0A350A",
"titleBar.activeBackground": "#0F4B0F",
"titleBar.activeForeground": "#F2FCF2"
}
}
8 changes: 8 additions & 0 deletions great-idea/.Vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"workbench.colorCustomizations": {
"activityBar.background": "#0F276E",
"titleBar.activeBackground": "#15369A",
"titleBar.activeForeground": "#F9FAFE"
},
"liveServer.settings.port": 5501
}
174 changes: 173 additions & 1 deletion great-idea/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,176 @@ h1, h2, h3, h4, h5 {
margin-bottom: 15px;
}

/* Copy and paste your work from yesterday here and start to refactor into flexbox */
/* Copy and paste your work from yesterday here and start to refactor into flexbox */

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/


/* Your code starts here! */

body{
border: 1px;
padding: 100px;
padding-top: 3%;

}


.nav-header{ width: 100%;
display: flex;
flex-direction: center;
justify-content: space-evenly;
color:lightgrey;
font-size: 18px;
font-weight:bold;
}

a .services{
color:lightgrey;
}

.section-one {
display: flex;
justify-content: space-evenly;
padding:5px;
width:100%;
margin-top: 100px;
margin-bottom: 100px;

}

h1{
display: flex;
justify-content:flex-start;
font-size:100px;
flex-direction: column;
text-align: center;
height:300px;
width:500px;

}

.title {
display:flex;
justify-content: center;
flex-direction:column;

}

.Get-started {
display: flex;
justify-content: space-evenly;
margin-left: 125px;
font-size: 22px ;
height:7%;
width:240px;
border:2px solid black ;

}


hr{
border-top:2px solid black;
width:100%;
}

.section-two{
display:flex;
height:150px;
margin-top: 50px;

}
.Features{
width:46%;
height: 90%;
font-size: 20px;
font-weight:bold;
text-align:left;
}

.about{
font-size:20px;
margin-left:69px;
width:48%;
height:90%;
font-weight:bold;
text-align:left;
}
.middle-img{
background-size: cover;
width:100%;
padding:10px;
}

.section-three{
width:100%;
height:25%;
display:flex;
justify-content: space-evenly;
margin-top:50px;
margin-bottom:40px;
}

.services{
font-size:20px;
font-weight:bold;
width:425px;
height:98%;
text-align:left;
}
.product{
font-size:20px;
font-weight:bold;
width:425px;
height:98%;
margin-left:30px;
text-align:left;
}
.visions{
font-size:20px;
font-weight:bold;
width:425px;
height:98%;
margin-left:30px;
text-align:left;

}
.section-four{
display:flex;
flex-direction: column;
height:180px;
}


.contact{
display:flex;
justify-content: left;
line-height: 20px;
font-size: 22px;
font-weight: bold;
width:33%;
}

.phone-number{
display:flex;
font-weight: bold;
font-size: 22px;
width:33%;
line-height:100px;
}
.email{
font-size:22px;
font-weight:bold;
width:20%;

}

.copyright{
display:flex;
justify-content: center;
margin-top:20px;
font-weight:bold;
}
102 changes: 102 additions & 0 deletions great-idea/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,107 @@
<!-- Copy and paste your HTML from the first UI project here -->


</body>
</html>
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>Great Idea!</title>

<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->



</head>

<body>

<header>

<nav class="nav-header">
<a href="services.html"style=color:lightgrey;>Services</a>
<a>Product</a>
<a>Vision</a>
<a>Features</a>
<a>About</a>
<a>Contact</a>
<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
</nav>

</header>
<section class="section-one">
<Div class="title">
<h1> Innovation
On
<p>Demand</p>
</h1>
<nav class="Get-started">
<a>Get Started</a>
</nav>
</Div>
<img src="img/header-img.png" alt="Image of a code snippet.">
</section>

<hr></hr>

<section class="section-two">
<div class="Features">
<h3>Features</h3>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
<div class="about">
<h3>About</h3>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
</section>

<div class="bottom-img">
<img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
</div>
<section class="section-three">
<div class="services">
<h2>Services</h2>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
<div class="product">
<h2>Product</h2>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
<div class="visions">
<h2>Vision</h2>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
</section>
<hr>

<footer>
<section class="section-four">
<div class="contact">
<address>
<h3>Contact</h3>
123 Way 456 Street<br>
Somewhere, USA<br>
</div>
<div class="phone-number">
1 (888) 888-8888<br>
</div>
<div class="email">
sales@greatidea.io
</div>
</address>
<section class="copyright">
</section>
</div>

<p class="copyright">&copy;Copyright Great Idea! 2018</p>
</footer>
</body>
</html>
Loading