diff --git a/.github/workflows/Week2_Advanced_CSS-build.yaml b/.github/workflows/Week2_Advanced_CSS-build.yaml new file mode 100644 index 0000000..e40c0d8 --- /dev/null +++ b/.github/workflows/Week2_Advanced_CSS-build.yaml @@ -0,0 +1,41 @@ +# To better understand this file read this: +# https://docs.ionos.space/docs/github-actions-customization/ + +name: "Deploy Now: Execute Build" + +on: + workflow_call: + inputs: + site-url: + required: true + type: string + branch-id: + required: true + type: string + +env: + DEPLOYMENT_FOLDER: ./ + +jobs: +# Please do not rename this job + build-project: + name: build Week2_Advanced_CSS + runs-on: ubuntu-latest + steps: + - name: checkout + uses: actions/checkout@v3 + with: + submodules: 'recursive' + +# Please do not touch the following action + - name: Store deployment content + uses: ionos-deploy-now/artifact-action@v1 + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: f9342acf-cc9e-4fa5-a7f8-39751de55015 + branch-id: ${{ inputs.branch-id }} + version: ${{ github.sha }} + folder: ${{ env.DEPLOYMENT_FOLDER }} + config-file: .deploy-now/Week2_Advanced_CSS/config.yaml + action: upload diff --git a/.github/workflows/Week2_Advanced_CSS-orchestration.yaml b/.github/workflows/Week2_Advanced_CSS-orchestration.yaml new file mode 100644 index 0000000..3b86c60 --- /dev/null +++ b/.github/workflows/Week2_Advanced_CSS-orchestration.yaml @@ -0,0 +1,55 @@ +# Please do not edit this file. +# Build steps can be customized in the Week2_Advanced_CSS-build.yaml. +# More information under https://docs.ionos.space/docs/github-actions-customization/ +# version: 2022-07-21 + +name: "Deploy Now: Orchestration" +run-name: "Deploy Now: Build Week2_Advanced_CSS ยท ${{ github.event.head_commit.message || format('Triggered by {0}', github.triggering_actor) }}" + +on: + - push + - workflow_dispatch + +jobs: + retrieve-project: + name: check readiness + runs-on: ubuntu-latest + outputs: + deployment-enabled: ${{ fromJson(steps.project.outputs.info).deployment-enabled }} + branch-id: ${{ fromJson(steps.project.outputs.info).branch-id }} + steps: + - name: Fetch project data + uses: ionos-deploy-now/project-action@v1 + id: project + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: f9342acf-cc9e-4fa5-a7f8-39751de55015 + action: retrieve-info + + + build: + name: build + needs: retrieve-project + if: ${{ needs.retrieve-project.outputs.deployment-enabled == 'true' }} + uses: ./.github/workflows/Week2_Advanced_CSS-build.yaml + with: + site-url: https://IONOS_DEPLOY_NOW_SITE_URL + branch-id: ${{ needs.retrieve-project.outputs.branch-id }} + secrets: inherit + + deploy: + name: trigger deployment + needs: + - retrieve-project + - build + runs-on: ubuntu-latest + steps: + - name: Dispatch deployment(s) + uses: ionos-deploy-now/project-action@v1 + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: f9342acf-cc9e-4fa5-a7f8-39751de55015 + branch-id: ${{ needs.retrieve-project.outputs.branch-id }} + action: dispatch-deployments diff --git a/.github/workflows/deploy-to-ionos.yaml b/.github/workflows/deploy-to-ionos.yaml new file mode 100644 index 0000000..f27b685 --- /dev/null +++ b/.github/workflows/deploy-to-ionos.yaml @@ -0,0 +1,125 @@ +# Please do not edit this file. +# More information under https://docs.ionos.space/docs/github-actions-customization/ +# version: 2022-07-21 + +name: "Deploy Now: Deploy to IONOS" + +on: + workflow_dispatch: + inputs: + version: + required: true + type: string + project-id: + required: true + type: string + branch-id: + required: true + type: string + deployment-ids: + require: true + type: string + push: + path: + - ./.github/workflows/deploy-to-ionos.yaml + +concurrency: ${{ github.ref }} + +jobs: + deploy-to-ionos: + if: ${{ github.event_name == 'workflow_dispatch' }} + runs-on: ubuntu-latest + permissions: + actions: read + strategy: + matrix: + deployment-id: ${{ fromJson(inputs.deployment-ids) }} + steps: + - name: Update deployment status + uses: ionos-deploy-now/project-action@v1 + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: ${{ inputs.project-id }} + branch-id: ${{ inputs.branch-id }} + deployment-id: ${{ matrix.deployment-id }} + action: update-status + status: in_progress + + - name: Retrieve stored deployment + uses: ionos-deploy-now/artifact-action@v1 + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: ${{ inputs.project-id }} + branch-id: ${{ inputs.branch-id }} + version: ${{ inputs.version }} + action: download + + - name: Fetch deployment info + uses: ionos-deploy-now/project-action@v1 + id: deployment + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: ${{ inputs.project-id }} + branch-id: ${{ inputs.branch-id }} + deployment-id: ${{ matrix.deployment-id }} + action: retrieve-info + + - name: Render templates + uses: ionos-deploy-now/template-renderer-action@v2 + id: template + with: + deployment-id: ${{ matrix.deployment-id }} + data: "[${{ steps.deployment.outputs.template-variables }}, ${{ toJson(secrets) }}]" + input-directory: deployment + output-directory: deployment + intermediate-data-file: deployment/.template-renderer-data + + - name: Render real site-url to all files + run: | + for file in `grep -rl 'https://IONOS_DEPLOY_NOW_SITE_URL' .`; do + sed -i $file -e 's|https://IONOS_DEPLOY_NOW_SITE_URL|${{ fromJson(steps.deployment.outputs.info).site-url }}|g' + done + + - name: Render SSH user secret name + run: echo SSH_USERNAME_SECRET=IONOS_DEPLOYMENT_`echo ${{ matrix.deployment-id }} | tr '[:lower:]' '[:upper:]' | tr '-' '_'`_SSH_USERNAME >> $GITHUB_ENV + + - name: Deploy to IONOS + uses: ionos-deploy-now/deploy-to-ionos-action@v2 + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: ${{ inputs.project-id }} + branch-id: ${{ inputs.branch-id }} + deployment-id: ${{ matrix.deployment-id }} + deployment-info: ${{ steps.deployment.outputs.info }} + ssh-user: ${{ secrets[env.SSH_USERNAME_SECRET] }} + ssh-key: ${{ secrets.IONOS_SSH_KEY }} + + - name: Update deployment status + if: ${{ always() }} + uses: ionos-deploy-now/project-action@v1 + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: ${{ inputs.project-id }} + branch-id: ${{ inputs.branch-id }} + deployment-id: ${{ matrix.deployment-id }} + action: update-status + status: ${{ job.status }} + + notify-deployment-finished: + needs: deploy-to-ionos + if: ${{ github.event_name == 'workflow_dispatch' && always() }} + runs-on: ubuntu-latest + steps: + - name: Notify all deployments finished + uses: ionos-deploy-now/project-action@v1 + with: + api-key: ${{ secrets.IONOS_API_KEY }} + service-host: api-eu.ionos.space + project-id: ${{ inputs.project-id }} + branch-id: ${{ inputs.branch-id }} + action: set-deployments-finished diff --git a/index.html b/index.html index 64867a7..75529ad 100644 --- a/index.html +++ b/index.html @@ -1 +1,104 @@ + + + + + + + Fatuma Resturant + + + +
+

Fatuma Restaurant

+ +
+ +
+
+

TASTE THE
DIFFERENCE


+ Local. Fresh & Delicious +
+ A photo of Somali food + + +
+ +
+

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

+
+
+ +
+
+ pasta with banana +

it was popularised in the 1960s
with the release

+
+ +
+ rice with banana +

scrambled it to make a type
specimen book. .

+
+ +
+ A foto Catering +

Duis consectetur sit amet metus
quis congue.

+
+ +
+
+
+
+
+
+

Contact

+ + + + +
+
+
+ + + +
+

Fatuma Restaurant

+ +
+ + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index 945c1b5..b2fcd0c 100644 --- a/styles.css +++ b/styles.css @@ -1 +1,297 @@ /* Paste your css code here */ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body{ + font-weight: 1.25rem; + font-size: 1.3rem; + } + + header{ + display: flex; + justify-content: space-between; + background-color: #454f6f; + padding: 20px; + } + .name:hover{ + + color: rgb(255, 230, 0); + text-decoration: none; + + } + header h3{ + color: white; + } + + ul{ + display: flex; + justify-content: space-between; + list-style-type:none; + font-family: Arial, Helvetica, sans-serif; + } + + ul li a { + color: white; + padding-right: 30px; + } + + ul li a:hover { + color: rgb(255, 230, 0); + text-decoration: none; + } + a{ + text-decoration: none; + } + + /* Hero section */ + #hero{ + display: flex; + background-color: #e6834c; + height: 400px; + } + + #hero img{ + border-radius: 100%; + width: 30%; + margin: 0 auto; + padding: 20px; + } + + .text { + justify-content: space-between; + text-transform: uppercase; + width: 60%; + color: white; + } + + .text h1 { + margin-top: 150px; + margin-left: 300px; + padding-left: 80px + } + + .text span { + margin-top: 200px; + margin-left: 300px; + padding-left: 80px + } + + /* About section */ + .about{ + justify-content: center; + text-align: center; + background-color: #deffe6; + width: 85%; + margin: 0 auto; + } + + .about h2{ + padding-top: 40px; + margin: 20px; + text-transform: uppercase; + } + + .about p{ + display: flex; + justify-content: center; + line-height: 1.5rem; + } + + .food{ + display: flex; + width: 100%; + height: 190px; + } + + .boxes{ + display: flex; + margin-left: 110px; + } + + .boxes img{ + display: flex; + border-radius:40px; + height: 216px; + width: 100%; + padding: 16px 16px 0px; + margin-left:10px; + } + + .boxes p{ + text-align:justify; + text-align: center; + font-family:Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.25; + margin:0 auto; + } + + /* Contact section */ + .container1{ + position: relative; + width: 100%; + margin-top: 100px; + } + + .contact-box{ + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + background-size: cover; + background-color:aliceblue; + font-family: arial sans-serif; + font-size: 20px; + } + + .left{ + background: no-repeat center; + background-size: cover; + height: 100%; + } + + .right{ + padding: 25px 40px; + } + + h2{ + position: relative; + padding: 0 0 10px; + margin-bottom: 10px; + } + + .field{ + width: 100%; + padding: 10px; + outline: none; + background-color: #e6e6e6; + + } + + .field:hover{ + color: #e6834c; + } + .btn{ + padding: 10px; + width: 100%; + background-color: #e6834c; + } + + .btn:hover { + width: 100%; + color:green; + text-decoration: none; + } + + .footer{ + background-color: #e6834c; + color: black; + text-align: center; + } + + + @media only screen and (max-width: 600px) { + *{ + margin: 0; + padding: 0; + box-sizing: border-box; + } + body { + font-size: 1rem; + } + + /* header*/ + header { + flex-direction: column; + align-items: center; + padding: 10px; + } + + header h3 { + margin-bottom: 10px; + } + + ul { + flex-direction: column; + align-items: center; + } + + ul li a { + padding: 10px 0; + } + + /* hero section */ + #hero { + flex-direction: column; + height: auto; + padding: 20px; + } + + #hero img { + width: 100%; + margin-bottom: 20px; + } + + .text h1 { + margin: 0; + text-align: center; + padding: 0; + } + + .text span { + margin: 0; + text-align: center; + padding: 0; + } + + /* about section */ + .about { + width: 100%; + padding: 20px; + } + + .food { + flex-direction: column; + height: auto; + } + + .boxes { + margin: 0; + margin-bottom: 20px; + } + + .boxes img { + height: auto; + margin-left: 0; + } + + .boxes p { + text-align: center; + text-align: center; + margin: 10px; + + } + + /* contact section */ + .container1 { + margin-top: 50px; + padding: 20px; + } + + .contact-box { + padding: 20px; + font-size: 16px; + } + + /* footer */ + .footer { + padding: 20px; + } + } +