CSS Grid Layout with Images

  • Status: Closed
  • Hadiah: $100
  • Entri Diterima: 70
  • Pemenang: youvpn220

Deskripsi Kontes

For this project, everything must be done in CSS and HTML5. No JavaScript allowed. The final deliverables for this project will be 1 html file named index.html file and 1 stylesheet named style.css. All CSS and HTML must be contained within these 2 documents. DO NOT call 3rd party resources or libraries.
Requesting a website that is similar to CSS Grid Layout with Image Spanning similar to Brad Traversy’s project at https://codepen.io/bradtraversy/pen/rNOKEYR.
This project should be written from scratch and NOT include code written by Mr. Traversy. Only using this as inspiration. The two main background images will be provided as well as images for each program of study.
Images may be resized / cropped to fit needs; however, design must be flexible enough to allow for other photos to be included /swapped in/out as necessary.
This page will be embedded in an iFRAME for another site and MUST be written to be mobile friendly and scale accordingly. The site must be able to pass website accessibility checkers with a 95% or better score - https://html.com/blog/25-website-accessibility-checker-tools/

9 image files (1 for each teaching discipline) will be provided to act as tiles. These will be portrait rather than landscape; however, we can adjust if site design dictates it. Below are the 9 disciplines as well as the URL where the tile should link to if clicked on. For example, if a user clicks the accounting link, they are then taken to https://www.dscc.edu/accounting.

TEACHING DISCIPLINE
1. Accounting - https://www.dscc.edu/accounting
2. Business - https://www.dscc.edu/business
3. Computer Information Technology - https://www.dscc.edu/computer
4. Criminal Justice - https://www.dscc.edu/justice
5. Early Childhood Education - https://www.dscc.edu/education
6. Emergency Medical Services - https://www.dscc.edu/ems
7. Engineering Systems Technology - https://www.dscc.edu/engineering
8. Healthcare Technician - https://www.dscc.edu/node/10828
9. Health Information Management - https://www.dscc.edu/him

A total of 4 Degree Types should be listed. A box for Degree Types should be large and hold the 4 types:
DEGREE TYPE
Certificates
Associate of Applied Science Degrees
Associate of Arts Degrees
Associate of Science Degrees

You will be given the following items:
• Logo1 for background
• Logo 2 for background
• 9 Individual images – one for each program of study

Keahlian yang Disarankan

Winner
Kontes Sorotan
Buat Kontes Seperti Ini

Umpan balik Pemberi kerja

“Excellent experience working with Yousef.”

Gambar profil Dennis268, United States.

Entri teratas dari kontes ini

Tampilkan Entri Lainnya

Papan Klarifikasi Publik

  • adnanbinsaeed
    adnanbinsaeed
    • 1 tahun yang lalu

    Please review 81, 82, 83 and 85

    • 1 tahun yang lalu
  • vijaykrishnan149
    vijaykrishnan149
    • 1 tahun yang lalu

    please wait I am working

    • 1 tahun yang lalu
  • adilmon456
    adilmon456
    • 1 tahun yang lalu

    Hi sir, I uploaded 11 designs for you. Please check entries from #68 to #78 or visit http://image-grid.rf.gd/ (Live Preview Available)

    • 1 tahun yang lalu
    1. adilmon456
      adilmon456
      • 1 tahun yang lalu

      (Live Preview Available = http://image-grid.rf.gd/).

      • 1 tahun yang lalu
  • AlDesigns0520
    AlDesigns0520
    • 1 tahun yang lalu

    Hi content holder, I made a live preview for entry #59 , I do hope you rate it and check it out.

    • 1 tahun yang lalu
    1. AlDesigns0520
      AlDesigns0520
      • 1 tahun yang lalu

      https://al-designs.web.app/

      • 1 tahun yang lalu
  • adilmon456
    adilmon456
    • 1 tahun yang lalu

    Working on it. I will upload 10+ entries. Please don't close this before deadline

    • 1 tahun yang lalu
  • PrinceMuhammad55
    PrinceMuhammad55
    • 1 tahun yang lalu

    kindly check #58 by Muhammad B. with Live link.

    • 1 tahun yang lalu
  • Dennis268
    Penyelenggara Kontes
    • 1 tahun yang lalu

    Not sure why logos & images didn't upload initially. See zipped file attached for correct images to use. You can decide to use the logos or not.

    • 1 tahun yang lalu
    1. mjmarazbd
      mjmarazbd
      • 1 tahun yang lalu

      Live Preview #53 = http://demo.flyfinley.com/cssgrid/

      • 1 tahun yang lalu
    2. PrinceMuhammad55
      PrinceMuhammad55
      • 1 tahun yang lalu

      kindly check #58 by Muhammad B. with Live link.

      • 1 tahun yang lalu
  • youvpn220
    youvpn220
    • 1 tahun yang lalu

    with your images and your logo live preview: https://clint-4.vercel.app

    • 1 tahun yang lalu
  • Abuzar16nucs
    Abuzar16nucs
    • 1 tahun yang lalu

    #47 plz have a look.

    • 1 tahun yang lalu
  • youvpn220
    youvpn220
    • 1 tahun yang lalu

    Just see this https://clint-4.vercel.app

    • 1 tahun yang lalu
  • AhmedAlmisalamy
    AhmedAlmisalamy
    • 1 tahun yang lalu

    #20 I've Finished your project.

    • 1 tahun yang lalu
    1. AhmedAlmisalamy
      AhmedAlmisalamy
      • 1 tahun yang lalu

      And don't forget to see all images of project.

      • 1 tahun yang lalu
  • crazywebonline
    crazywebonline
    • 1 tahun yang lalu

    Please check my new entry #35 . Thanks!

    • 1 tahun yang lalu
  • cybbeysoft
    cybbeysoft
    • 1 tahun yang lalu

    Please check entry #28

    • 1 tahun yang lalu
  • crazywebonline
    crazywebonline
    • 1 tahun yang lalu

    Please check entry #29

    • 1 tahun yang lalu
  • hasan8505
    hasan8505
    • 1 tahun yang lalu

    can I use bootstrap ??

    • 1 tahun yang lalu
  • JakiZack
    JakiZack
    • 1 tahun yang lalu

    You have not attached a background image and other images

    • 1 tahun yang lalu

Lihat lebih banyak komen

Bagaimana untuk memulai sebuah kontes

  • Buat kontes Anda

    Buat Kontes Anda Cepat dan mudah

  • Dapatkan jutaan entri

    Dapatkan Jutaan Entri Dari seluruh dunia

  • Pilih entri terbaik

    Pilih entri terbaik Unggah file - Mudah!

Buat sebuah Kontes Sekarang atau Gabung dengan kami Hari ini!