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
98 changes: 49 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
# Introduction to CSS

## Introduction

In this project you will be styling a single page with your knowledge of CSS. The website is a marketing page for a restaurant in San Diego, CA called Fatuma Restaurant.

The styles in your [design file](/design/desktop.jpg) try your best to make it look great, add bright colors, add proper paddings and margins.

## Instructions

### Task 1: Set up your git flow

Follow these steps to set up your project and start working on it:

- [ ] Fork this project.
- [ ] Clone your forked version (Not Gabi School's by mistake!).
- [ ] Create a new branch: git checkout -b `<YourFirstName-YourLastName>`.
- [ ] Implement the project on your newly created `<YourFirstName-YourLastName>` branch, committing changes regularly.
- [ ] Push commits: git push -u origin `<YourFirstName-YourLastName>`.

### Task 2: Minimum Viable Product

Once your repository is set up, use the knowledge of CSS and HTML you learned to apply to the design, your final page should look like the design file, follow these steps to get the job done:

- [ ] Link your CSS `index.css` file in the `index.html` and add your CSS reset
- [ ] Markup your html semantically
- [ ] Use this color for the header and footer background: `#454f6f`
- [ ] Change all font colors and styles according to design file
- [ ] All other text is `Arial`, `Arial bold`, `Arial Black`
- [ ] The background color of the main text "TASTE THE DIFFERENCE" is `#e6834c`
- [ ] Apply box model properties (content, padding, margin, and border) to all content so that your page matches with the design file.

**Keep in mind that you should avoid static units (pixels), and should instead use responsive units wherever possible.**


### Task 3: Stretch Goals

The following goals should be started only when above tasks was finished. These goals are meant to help you practice more.

- [ ] Add CSS animations (hover, mouseover, etc.)
- [ ] Design and execute your own pages for `Menu`, `Catering`, or `Contact us`
- [ ] Add image background to the main hero text.
- [ ] Host your website on Netlify.com

## Submission format

Follow these steps for completing your project.

- [ ] Submit a pull request to merge <YourfirstName-YourlastName> Branch into master (student's Repo). **Please don't merge your own pull request**
# Introduction to CSS
## Introduction
In this project you will be styling a single page with your knowledge of CSS. The website is a marketing page for a restaurant in San Diego, CA called Fatuma Restaurant.
The styles in your [design file](/design/desktop.jpg) try your best to make it look great, add bright colors, add proper paddings and margins.
## Instructions
## WAAN ISKU DAYAY MACALIN !
### Task 1: Set up your git flow
Follow these steps to set up your project and start working on it:
- [ ] Fork this project.
- [ ] Clone your forked version (Not Gabi School's by mistake!).
- [ ] Create a new branch: git checkout -b `<YourFirstName-YourLastName>`.
- [ ] Implement the project on your newly created `<YourFirstName-YourLastName>` branch, committing changes regularly.
- [ ] Push commits: git push -u origin `<YourFirstName-YourLastName>`.
### Task 2: Minimum Viable Product
Once your repository is set up, use the knowledge of CSS and HTML you learned to apply to the design, your final page should look like the design file, follow these steps to get the job done:
- [ ] Link your CSS `index.css` file in the `index.html` and add your CSS reset
- [ ] Markup your html semantically
- [ ] Use this color for the header and footer background: `#454f6f`
- [ ] Change all font colors and styles according to design file
- [ ] All other text is `Arial`, `Arial bold`, `Arial Black`
- [ ] The background color of the main text "TASTE THE DIFFERENCE" is `#e6834c`
- [ ] Apply box model properties (content, padding, margin, and border) to all content so that your page matches with the design file.
**Keep in mind that you should avoid static units (pixels), and should instead use responsive units wherever possible.**
### Task 3: Stretch Goals
The following goals should be started only when above tasks was finished. These goals are meant to help you practice more.
- [ ] Add CSS animations (hover, mouseover, etc.)
- [ ] Design and execute your own pages for `Menu`, `Catering`, or `Contact us`
- [ ] Add image background to the main hero text.
- [ ] Host your website on Netlify.com
## Submission format
Follow these steps for completing your project.
- [ ] Submit a pull request to merge <YourfirstName-YourlastName> Branch into master (student's Repo). **Please don't merge your own pull request**
44 changes: 43 additions & 1 deletion index.css
Original file line number Diff line number Diff line change
@@ -1 +1,43 @@
/* Your CSS goes here */
/* Your CSS goes here */
.p1{

color: none;
text-align: center;
background-color: cadetblue;
}
.p2{

color: none;
text-align: left;
}
.p3{

color: none;
text-align: left;
}
.p4{

color: none;
text-align:none;
}
.p5{
color: none;
text-align:none;
}
h3{
color: white;
background-color: #454f6f;
text-align: left;
justify-content: space-between;
}
h4{
color: black;
background-color: coral;
text-align: center;
font-size: small;
}
#para1 {
text-align: center;
color: red;
}

135 changes: 81 additions & 54 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,82 @@
<!-- Markup the content below with tags and attributes such that it can be styled in CSS-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->

</head>
<body>

<!-- company name -->
Fatuma Restaurant

<!-- Navigation -->
About
Menu
Catering
Contact

<!-- header -->
About Fatuma Restaurant

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<!-- content -->
Pasta with Banana

scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Rice with Banana

scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Catering

Nullam quis odio sit amet arcu sagittis ullamcorper vel vel ex. Duis consectetur sit amet metus quis congue. Nullam vitae viverra quam, vel volutpat nisi. Phasellus id mi sit amet nibh rutrum luctus.

Contact

info@fatumarestaurant.com
619-555-0144
4209 Bobcat Drive
San Diego, CA, 48219

<!-- footer -->
Fatuma Restaurant

About
Menu
Catering
Contact

Copyright Fatuma Restaurant 2020

</body>
<!-- Markup the content below with tags and attributes such that it can be styled in CSS-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
<link rel="stylesheet"href="index.css">
<title>Fatuma Restaurant</title>
</head>
<body>

<!-- company name -->
<section>
<h3>Fatuma Restaurant

<!-- Navigation -->

<nav>
<a>About</a>
<a>Menu</a>
<a>Catering</a>
<a>Contact</a>
</nav>
</h3>

</section>

<!-- header -->

<div class="p1">
<h2> ABOUT FATUMA RESTATURANT</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

<!-- content -->
<div class="p2">
<h2> PASTA WITH BANANA</h2>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="p3">
<h2> RICE WITH BANANA</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

<div class="p4">
<h2>CATERING</h2>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

<div class="p5">
<h2>Contact</h2>

<p>info@fatumarestaurant.com
619-555-0144
4209 Bobcat Drive
San Diego, CA, 48219
</p>
</div>
<!-- footer -->
<footer>
<h3>Fatuma Restaurant

<!-- Navigation -->

<nav>
<a>About</a>
<a>Menu</a>
<a>Catering</a>
<a>Contact</a>
</nav>
</h3>

<h4> Copyright Fatuma Restaurant 2020 </h4>
</footer>
</body>
</html>