Skip to content

Joseph garcia stretch #2

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

Joseph garcia stretch #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f63ae42
UserInt III-1
kingmoc Apr 24, 2019
4deb029
UserInt III 1-stretch
kingmoc Apr 24, 2019
58e4b12
UserInt III 2-stretch
kingmoc Apr 24, 2019
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
271 changes: 269 additions & 2 deletions great-idea/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ table {

html, body {
height: 100%;
font-family: 'Titillium Web', sans-serif;
font-family: 'Titillium Web', sans-serif;
width: 876px;
margin: auto;
}

h1, h2, h3, h4, h5 {
Expand All @@ -63,4 +65,269 @@ 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 */

/* Main Container */

.container {
width: 1000px;
margin: auto;
border: 1px solid gray;
}

/* Header Section Selectors */

header {
background-color: lightblue;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
}

header nav {
font-size: 24px;
}

header nav a {
margin: 12px;
text-decoration-line: none;
color: black;
}

/* Services Section Selectors (services html) */

.services-info-img {
width: 600px;
}

section.services {
margin-top: 25px;
}

section.services h1 {
font-size: 28px;
}

/* Call To Action Selectors (index.html) */

section.cta {
background-image: url("../img/header-img.png");
Copy link
Copy Markdown
Collaborator

@Ian84Be Ian84Be Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this path should probably be "./img/header-img.png" since it is going to be reading from where the index.html file is located

background-repeat: no-repeat;
background-position: 90%;
background-size: contain;
margin-top: 38px;
display: flex;
flex-direction: column;
align-items: flex-start;
}

.cta-text button {
font-size: 21px;
padding: 9px;
width: 206px;
background-color: white;
color: black;
border: 1px solid black;
margin-left: 53px;
margin-top: 19px;
Copy link
Copy Markdown
Collaborator

@Ian84Be Ian84Be Apr 25, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this margin-left and margin-top looks like a hacky way to center the button. this is where flexbox can save the day.

Copy link
Copy Markdown
Owner Author

@kingmoc kingmoc Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're exactly right! I'm getting better with flex in realizing the container - child relationship. Moving forward I shall use flex exclusively.

}

.cta-text {
margin-left: 84px;
}

section.cta div h1 {
font-size: 80px;
text-align: center;
}

/* Main Content Selectors (index.html) */

section.main-content {
background-image: url("../img/mid-page-accent.jpg");
Copy link
Copy Markdown
Collaborator

@Ian84Be Ian84Be Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

again, this is a small error in this path that is preventing your images from being displayed

Copy link
Copy Markdown
Owner Author

@kingmoc kingmoc Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is interesting in that when I tried running this from the live server - it wouldn't work using only 1 dot. Very interesting.

background-repeat: no-repeat;
background-position: 42% 42%;
}


/* Top/Bottom Content Selectors */

.top-content {
display: flex;
}

.bottom-content {
display: flex;
}

.bottom-content .text-content {
margin-right: 35px;
}

div.bottom-content {
margin-top: 235px;
Copy link
Copy Markdown
Collaborator

@Ian84Be Ian84Be Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this margin-top would also work under LINE 161 without needing this extra selector

Copy link
Copy Markdown
Owner Author

@kingmoc kingmoc Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Man - looking back at that I have no idea why I did that - smh!

}


/* Service Info Selectors */

section.service-info {
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
justify-content: space-between;
height: 860px;;
}

section.service-info .info-box {
background: #f4f3f4;
width: 48%;
height: 250px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 15px;
}


/* Facts Selectors */

.facts ul {
list-style-type:square;
list-style-position: inside;
}

.factsText ul li {
margin-bottom: 10px;
}

.facts {
display: flex;
justify-content: space-between;
}

.facts .factsText {
width: 420px;
}

.factsText p {
line-height: 22px;
margin-bottom: 20px;
}


/* Footer Selectors */

footer p.copyright {
margin-top: 40px;
text-align: center;
}

footer section address {
margin-bottom: 20px;
}

footer section p {
line-height: 30px;
}

/* Other Selectors */


.line {
margin-top: 30px;
margin-bottom: 40px;
border-top: 1px solid black;
}

.info-box button {
border-radius: 5px;
width: 122px;
height: 30px;
background-color: white;
border: 1px solid black;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.info-box p {
margin-bottom: 25px;
line-height: 20px;
}




/* Media Queries */

/* If the screen size is 600px or less, */
@media only screen and (max-width: 600px) {
section.service-info {
height: auto;
flex-flow: column nowrap;
align-items: center;
}
}

/* If the screen size is 600px or less, */
@media only screen and (max-width: 600px) {
section.service-info .info-box {
margin-bottom: 20px;
width: 600px;
}
}


/* If the screen size is 600px or less, */
@media only screen and (max-width: 600px) {
.info-box button {
margin-left: 150px;
margin-top: 30px;
font-size: 35px;
width: 225px;
height: fit-content;
}
}

/* If the screen size is 600px or less, */
@media only screen and (max-width: 600px) {
.facts {
height: auto;
flex-flow: column nowrap;
align-items: center;
}
}


/* If the screen size is 600px or less, */
@media only screen and (max-width: 600px) {
.facts .factsText {
width: 600px;
margin-bottom: 40px;
}
}

/* If the screen size is 600px or less, */
@media only screen and (max-width: 600px){
footer .contact {
height: auto;
flex-flow: column nowrap;
align-items: center;
display: flex;
justify-content: space-between;
}
}

/* If the screen size is 600px or less, */
@media only screen and (max-width: 600px){
.services {
display: flex;
height: auto;
flex-flow: column nowrap;
align-items: center;
width: 600px;
margin-left: 135px;
}
}

Copy link
Copy Markdown
Collaborator

@Ian84Be Ian84Be Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great job adding in these media queries. we will talk about this stuff at length next week in the responsive design modules.

Copy link
Copy Markdown
Owner Author

@kingmoc kingmoc Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I added to many of them or something because I talked to another fellow in the program and he told me he only used one @media query ...

Binary file added great-idea/img/services-header.png
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.
92 changes: 89 additions & 3 deletions great-idea/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,94 @@

<body>

<!-- Copy and paste your HTML from the first UI project here -->


<!-- This is the NAV/Top Menu -->

<header>
<nav class = "navmenu">
<a href = "services.html">Services</a>
<a href = "#">Product</a>
<a href = "#">Vision</a>
<a href = "#">Features</a>
<a href = "#">About</a>
<a href = "#">Contact</a>
</nav>
<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
</header>

<!-- This is the Call to Action - Jumbo -->
<section class = "cta">
<div class = "cta-text">
<h1>Innovation<br> On<br> Demand</h1>
<button>Get Started</button>
</div>
</section>
Copy link
Copy Markdown
Collaborator

@Ian84Be Ian84Be Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably no need to have a "cta" and "cta-text". one container should be enough for this element.


<!-- Section Line -->
<div class = "line"> </div>
Copy link
Copy Markdown
Collaborator

@Ian84Be Ian84Be Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would avoid using a div to create this effect. you could easily eliminate this "line" div and set a top-border on your "main-content" section. less code is always better.


<!-- Main content of Page -->
<section class = "main-content">

<div class = "top-content"> <!-- Top Section -->

<div class = "text-content">
<h4>Features</h4>
<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 id = "about" class = "text-content">
<h4>About</h4>
<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>


<div class = "bottom-content"> <!-- Bottom Section -->

<div class = "text-content">
<h4>Services</h4>
<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 = "text-content">
<h4>Product</h4>
<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 = "text-content">
<h4>Vision</h4>
<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>

</section>

<!-- Section Line -->
<div class = "line"> </div>

<!-- This is the Footer -->
<footer>

<section class = "contact">

<h4>Contact</h4>

<address>
123 Way 456 Street<br>
Somewhere, USA
</address>

<p>1 (888) 888-8888<br>
sales@greatidea.io</p>

</section>

<p class = "copyright">Copyright Great Idea! 2018</p>

</footer>

</body>

</html>
Loading