Skip to content

added newpage.html, modified index.css and index.html #1

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
tanr0 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added newpage.html, modified index.css and index.html #1

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
14 changes: 7 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@ Project objectives are meant to increase your knowledge by giving you practice o

**Watch this short guide on how to setup your project:** [UI Project Setup 101](https://youtu.be/UU9WjpMsaLE)

- [ ] Study the [desktop design file](design-files/desktop.jpg). Visualize how you would convert the design into HTML and CSS. Make a quick sketch of how you would build the HTML structure. Use your sketch as a plan of action for the next two objectives. Challenge yourself to only use 10 minutes for this particular objective.
- [x] Study the [desktop design file](design-files/desktop.jpg). Visualize how you would convert the design into HTML and CSS. Make a quick sketch of how you would build the HTML structure. Use your sketch as a plan of action for the next two objectives. Challenge yourself to only use 10 minutes for this particular objective.

- [ ] Go to your [index.html](great-idea-website/index.html) file and build out your HTML structure. You have been provided all the content and images you need to get started inside the `index.html` file. Start to code HTML around the content!
- [x] Go to your [index.html](great-idea-website/index.html) file and build out your HTML structure. You have been provided all the content and images you need to get started inside the `index.html` file. Start to code HTML around the content!

- [ ] Style your HTML using the [desktop design file](design-files/desktop.jpg) as a visual guide. Use any CSS properties you want for general styling but for layout, you can only use the box model (content, padding, margin, border) and `display:inline-block`.
- [x] Style your HTML using the [desktop design file](design-files/desktop.jpg) as a visual guide. Use any CSS properties you want for general styling but for layout, you can only use the box model (content, padding, margin, border) and `display:inline-block`.

## Stretch Goals:

Stretch goals are not required. Complete the project objectives before working on stretch. Stretch goals are not covered in the guided demo and need some research on your part. There is no particular order in this list, just pick one that sounds fun and push yourself.

- [ ] Give the navigation a background color and have it be fixed to the top of the page so that it scrolls with the user. You will want to study what z-index means in case you encounter any issues when you scroll.
- [ ] Introduce a new font family from [google fonts](https://fonts.google.com/)
- [X] Give the navigation a background color and have it be fixed to the top of the page so that it scrolls with the user. You will want to study what z-index means in case you encounter any issues when you scroll.
- [X] Introduce a new font family from [google fonts](https://fonts.google.com/)

- [ ] Create a new page based off of a navigation item. Create your own layout using box model and `display: inline-block;`
- [X] Create a new page based off of a navigation item. Create your own layout using box model and `display: inline-block;` see the button in the middle instead of the nav bar.

- [ ] Change all the image tags into background images instead

- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items
- [X] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items
116 changes: 114 additions & 2 deletions great-idea-website/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ table {

html, body {
height: 100%;
font-family: 'Titillium Web', sans-serif;
font-family: 'Oxygen';
}

h1, h2, h3, h4, h5 {
Expand All @@ -63,4 +63,116 @@ h1, h2, h3, h4, h5 {
margin-bottom: 15px;
}

/* Your code starts here! */
/* Your code starts here! */
header.navbar{
overflow: hidden;
background-color: #6b5b95;
position: fixed;
top: 0;
width: 100%;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

header{
margin:10px;
padding-top: 10px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
div.spacer{
height:100px;
}

footer{
padding: 80px;
}

hr{
width: 90%;
height: 5px;
background:black;
}

p.copyright{
text-align: center;
}

a.intro{
display: inline-block;
color:#a2b9bc;
width:12%;
}
a.intro:hover{
background:#ff7b25;
}
img.logo {
display: inline-block;
width:12%;
}

div.container{
display: inline-block;
width:47%;
text-align: center;
padding:5px;
}
h1.motto{
font-size:60px;
text-align: center;
padding:20px;
margin:10px;
}
a.button{
display: inline-block;
text-align: center;
border: 2px solid black;
width: 20%;
padding: 5px;
backgroung:
}
a.button:hover{
background:#ff7b25;

}

div.wrapper{
display: inline-block;
width: 47%;
padding: 5px;
}
div.wrapper2{
display: inline-block;
width: 29%;
padding: 5px;
margin: 5px;
}
div.code{
display:block;
text-align:center;
}

h3.subtitle{
display: inline-block;
text-align: left;
}

section{
padding-left:80px;
padding-right:80px;
padding-bottom:20px;
padding-top:20px;
}

117 changes: 74 additions & 43 deletions great-idea-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,50 +14,81 @@
<![endif]-->
</head>

<body>

Services
Product
Vision
Features
About
Contact

<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
Innovation
On
Demand

Get Started

<img src="img/header-img.png" alt="Image of a code snippet.">

Features
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.


About
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.

<img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
<body>
<header class="navbar">
<nav>
<a href="#" class="intro">Services</a>
<a href="#" class="intro">Product</a>
<a href="#" class="intro">Vision</a>
<a href="#" class="intro">Features</a>
<a href="#" class="intro">About</a>
<a href="#" class="intro">Contact</a>

Services
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.


Product
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.

Vision
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.

Contact
123 Way 456 Street
Somewhere, USA
1 (888) 888-8888
sales@greatidea.io

Copyright Great Idea! 2018
<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">

</nav>
</header>
<div class="spacer">
</div>
<section>
<div class="container">
<h1 class="motto">
Innovation<br>
On<br>
Demand<br>
</h1>

<a href="newpage.html" class="button">Get Started</a>
</div>
<div class="container">
<img src="img/header-img.png" alt="Image of a code snippet.">
</div>
</section>
<hr>
<section class="content">
<div class="wrapper">
<h3 class="subtitle">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="wrapper">
<h3 class="subtitle">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>

<section>
<div class="code">
<img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
</div>
</section>

<section class="content2">
<div class="wrapper2">
<h3 class="subtitle">Services</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="wrapper2">
<h3 class="subtitle">Product</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="wrapper2">
<h3 class="subtitle">Vision</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>
<hr>
<footer>
<div>
<h3>Contact</h3>
<p class="footer">123 Way 456 Street<br>
Somewhere, USA</p><br>
<p class="footer">1 (888) 888-8888</p> <br>
<p class="footer">sales@greatidea.io</p> <br>
</div>
<p class="copyright">Copyright Great Idea! 2018</p>
<footer>
</body>
</html>
81 changes: 81 additions & 0 deletions great-idea-website/newpage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!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 class="navbar">
<nav>
<a href="#" class="intro">Services</a>
<a href="#" class="intro">Product</a>
<a href="#" class="intro">Vision</a>
<a href="#" class="intro">Features</a>
<a href="#" class="intro">About</a>
<a href="#" class="intro">Contact</a>

<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">

</nav>
</header>
<div class="spacer">
</div>

<hr>
<section class="content">
<div class="wrapper">
<h3 class="subtitle">New Page</h3>
<p>This is a new page entirely choc full of new and exciting things. I like waffles. Everyone likes waffles. Waffles are superior to pancakes in every way</p>
</div>

<div class="wrapper">
<h3 class="subtitle">New Page</h3>
<p>This is a new page entirely choc full of new and exciting things. I like waffles. Everyone likes waffles. Waffles are superior to pancakes in every way</p>
</div>
</section>

<section>
<div class="code">
<img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
</div>
</section>

<section class="content2">
<div class="wrapper2">
<h3 class="subtitle">New Page</h3>
<p>Turns out just because Sega does what Nintendon't doesn't mean they were actually better. Because in the long one thing nintdon't was go out of business. Look whos talking now sega.</p>
</div>

<div class="wrapper2">
<h3 class="subtitle">New Page</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="wrapper2">
<h3 class="subtitle">New Page</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>
<hr>
<footer>
<div>
<h3>Contact</h3>
<p class="footer">123 Way 456 Street<br>
Somewhere, USA</p><br>
<p class="footer">1 (888) 888-8888</p> <br>
<p class="footer">sales@greatidea.io</p> <br>
</div>
<p class="copyright">Copyright Great Idea! 2018</p>
<footer>
</body>
</html>