Skip to content
This repository was archived by the owner on Aug 26, 2022. It is now read-only.

@Edgardo @Silu #69

Open
Brandon-Torres wants to merge 1 commit into
base: master
Choose a base branch
from
Open

@Edgardo @Silu #69

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
4 changes: 2 additions & 2 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
.DS_store
node_modules
.DS_store
node_modules
96 changes: 48 additions & 48 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
# Bootstrap lab


## Project 1: Build a responsive cookie store web page

In this exercise, you have been given an index.html file that already contains our content. What we will do in the next steps is add bootstrap for styling and for a responsive layout.

0. Fork this repository
1. Clone your own fork of the project
2. Link the `css/styles.css` file in the index.html `<head>` section.
- _We will use this to add our own custom styles._
3. Add Bootstrap
- Use the [CDN link tag](https://getbootstrap.com/docs/4.5/getting-started/introduction/#quick-start)
4. Apply the [bootstrap grid classes](https://getbootstrap.com/docs/4.5/layout/grid/)
- The 4 cookie products should appear side by side in one row on large screens
- The 4 cookies should appear one per row on medium and smaller screens
- ![grid](screenshots/cookie-store-grid.png)
5. Apply styling to make the page responsive as follows:
- On larger screens:
- ![larger screens](screenshots/cookie-store-large-screen.png)
- On medium and smaller screens:
- ![smaller screens](screenshots/cookie-store-mobile-screen.png)
6. Using only bootstrap styles, and not moving any html tags, make the cookie products alternate as follows on larger screens:
- ![larger screens](screenshots/cookie-store-large-screen-alt.png)
- _Hint:_ You can wrap your existing HTML in extra `<div>` tags
- _Hint:_ Look into the [reordering classes](https://getbootstrap.com/docs/4.5/layout/grid/#reordering)
- *Clarifications*
+ _Don't_ change the order of the 3 main cookie html tags, the `<h3>`, followed by the `<p>`, and then the `<img>` tags. _Remember, we want to keep semantic order._
+ You can add `<div>`'s and bootstrap classes as needed, you can wrap any tags in divs as needed, as long as you don't change the order.
7. **Stretch** Add a custom google font to our page:
- Select and link a font from: https://fonts.google.com/
- Add the font style to select tags
8. **To Submit**
- Make a pull request back to this repo
- Mention your Instructor and TA's name in your pull request

## Project 2: Build a Professional Portfolio Website for yourself

- Build a Professional Porfolio Website. Follow the following criteria
* Use HTML5, CSS, Bootstrap (*optional*)
- You can use existing themes (i.e. http://bootswatch.com/)
* For the content:
- Introduce yourself
- Post projects you have done
- Education/Professional Experience, Relevant Skills
- List any technology or blog links you recommend
- Include at least one image (project related, you, or related picture)
- _Optional:_ Post a "blog" entry about a technology you have used, or school topic
# Bootstrap lab
## Project 1: Build a responsive cookie store web page
In this exercise, you have been given an index.html file that already contains our content. What we will do in the next steps is add bootstrap for styling and for a responsive layout.
0. Fork this repository
1. Clone your own fork of the project
2. Link the `css/styles.css` file in the index.html `<head>` section.
- _We will use this to add our own custom styles._
3. Add Bootstrap
- Use the [CDN link tag](https://getbootstrap.com/docs/4.5/getting-started/introduction/#quick-start)
4. Apply the [bootstrap grid classes](https://getbootstrap.com/docs/4.5/layout/grid/)
- The 4 cookie products should appear side by side in one row on large screens
- The 4 cookies should appear one per row on medium and smaller screens
- ![grid](screenshots/cookie-store-grid.png)
5. Apply styling to make the page responsive as follows:
- On larger screens:
- ![larger screens](screenshots/cookie-store-large-screen.png)
- On medium and smaller screens:
- ![smaller screens](screenshots/cookie-store-mobile-screen.png)
6. Using only bootstrap styles, and not moving any html tags, make the cookie products alternate as follows on larger screens:
- ![larger screens](screenshots/cookie-store-large-screen-alt.png)
- _Hint:_ You can wrap your existing HTML in extra `<div>` tags
- _Hint:_ Look into the [reordering classes](https://getbootstrap.com/docs/4.5/layout/grid/#reordering)
- *Clarifications*
+ _Don't_ change the order of the 3 main cookie html tags, the `<h3>`, followed by the `<p>`, and then the `<img>` tags. _Remember, we want to keep semantic order._
+ You can add `<div>`'s and bootstrap classes as needed, you can wrap any tags in divs as needed, as long as you don't change the order.
7. **Stretch** Add a custom google font to our page:
- Select and link a font from: https://fonts.google.com/
- Add the font style to select tags
8. **To Submit**
- Make a pull request back to this repo
- Mention your Instructor and TA's name in your pull request
## Project 2: Build a Professional Portfolio Website for yourself
- Build a Professional Porfolio Website. Follow the following criteria
* Use HTML5, CSS, Bootstrap (*optional*)
- You can use existing themes (i.e. http://bootswatch.com/)
* For the content:
- Introduce yourself
- Post projects you have done
- Education/Professional Experience, Relevant Skills
- List any technology or blog links you recommend
- Include at least one image (project related, you, or related picture)
- _Optional:_ Post a "blog" entry about a technology you have used, or school topic
133 changes: 86 additions & 47 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<title>Cookie Store</title>
</head>
<body>


<h1>Cookie Store</h1>

<p>Buy our awesome cookies. All proceeds go to charity!</p>

<h2>The Cookies</h2>

<h3>Thin Mint Cookies</h3>
<p>Tasty mint chocolate cookies</p>
<img src="img/mint.png">

<h3>Peanut Butter Cookies</h3>
<p>Yummy peanut buttery goodness!</p>
<img src="img/peanut.png">

<h3>Short Bread Cookies</h3>
<p>Santa's favorite classic.</p>
<img src="img/shortbread.png">

<h3>Smore's Cookies</h3>
<p>Camp fire favorite!</p>
<img src="img/smores.png">

<h2>About us</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<h2>Contact us</h2>
<div>
100 Broadway Avenue,<br>
New York, NY 10001 <br>
(212) 555-1234
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Cookie Store</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
</head>

<body>
<div
class="cookies-banner"
>
<img src="./img/milkbg.jpg" class="img-fluid banner-pic" alt="Responsive image">
<!-- <div class="col text-center">
<h1>Cookie Store</h1>
<p>Buy our awesome cookies. All proceeds go to charity!</p>
</div> -->
</div>
<div class="container text-center">
<div class="row">
<div class="col col-12 text-center">
<h2>The Cookies</h2>
</div>
<div class="col col-md-12 col-lg-3">
<h3>Thin Mint Cookies</h3>
<p>Tasty mint chocolate cookies</p>
<img src="img/mint.png" class="cookies-pic" />
</div>
<div class="col col-md-12 col-lg-3">
<h3>Peanut Butter Cookies</h3>
<p>Yummy peanut buttery goodness!</p>
<img src="img/peanut.png" class="cookies-pic" />
</div>
<div class="col col-md-12 col-lg-3">
<h3>Short Bread Cookies</h3>
<p>Santa's favorite classic.</p>
<img src="img/shortbread.png" class="cookies-pic" />
</div>
<div class="col col-md-12 col-lg-3">
<h3>Smore's Cookies</h3>
<p>Camp fire favorite!</p>
<img src="img/smores.png" class="cookies-pic"/>
</div>
</div>
</div>


<div class="row about-us text-center m-0 p-0">
<div class="col col-12">
<h2>About us</h2>
</div>
<div class="col col-3">
<img src="img/cmonster.png" class="cookies-pic"/>
</div>
<div class="col col-9">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</div>
</div>
</div>


<div class="row contact-us text-center m-0 p-0">
<div class="col-12">
<h2>Contact us</h2>
</div>
<div class="col-12">
<div>
100 Broadway Avenue,<br />
New York, NY 10001 <br />
(212) 555-1234
</div>
</div>
</body>
</html>
28 changes: 28 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/* custom-font added*/
* {
font-family: "Roboto", sans-serif;
}

.banner-pic {
width: 100%;
height: auto;
}

/*affects the pictures border*/
.cookies-pic {
border-radius: 50%;
}
.about-us {
background-color: lightgrey;
}
.contact-us {
background-color: lightskyblue;
}

/* when the screen reaches large size change the width of the images*/
@media only screen and (min-width: 992px) {
.cookies-pic {
border-radius: 50%;
width: 100%;
}
}