CSS Grid Layout with Images

  • Tình trạng: Closed
  • Giải thưởng: $100
  • Các bài thi đã nhận: 70
  • Người chiến thắng: youvpn220

Tóm tắt cuộc thi

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

Các kĩ năng yêu cầu

Phản hồi của người thuê

“Excellent experience working with Yousef.”

Hình ảnh hồ sơ Dennis268, United States.

Những bài dự thi tốt nhất dự cuộc thi này

Xem thêm bài dự thi

Bảng thông báo công khai

  • adnanbinsaeed
    adnanbinsaeed
    • cách đây 1 tháng

    Please review 81, 82, 83 and 85

    • cách đây 1 tháng
  • vijaykrishnan149
    vijaykrishnan149
    • cách đây 1 tháng

    please wait I am working

    • cách đây 1 tháng
  • adilmon456
    adilmon456
    • cách đây 1 tháng

    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)

    • cách đây 1 tháng
    1. adilmon456
      adilmon456
      • cách đây 1 tháng

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

      • cách đây 1 tháng
  • AlDesigns0520
    AlDesigns0520
    • cách đây 1 tháng

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

    • cách đây 1 tháng
    1. AlDesigns0520
      AlDesigns0520
      • cách đây 1 tháng

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

      • cách đây 1 tháng
  • adilmon456
    adilmon456
    • cách đây 1 tháng

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

    • cách đây 1 tháng
  • PrinceMuhammad55
    PrinceMuhammad55
    • cách đây 1 tháng

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

    • cách đây 1 tháng
  • Dennis268
    Chủ cuộc thi
    • cách đây 1 tháng

    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.

    • cách đây 1 tháng
    1. mjmarazbd
      mjmarazbd
      • cách đây 1 tháng

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

      • cách đây 1 tháng
    2. PrinceMuhammad55
      PrinceMuhammad55
      • cách đây 1 tháng

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

      • cách đây 1 tháng
  • youvpn220
    youvpn220
    • cách đây 1 tháng

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

    • cách đây 1 tháng
  • Abuzar16nucs
    Abuzar16nucs
    • cách đây 1 tháng

    #47 plz have a look.

    • cách đây 1 tháng
  • youvpn220
    youvpn220
    • cách đây 1 tháng

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

    • cách đây 1 tháng
  • AhmedAlmisalamy
    AhmedAlmisalamy
    • cách đây 1 tháng

    #20 I've Finished your project.

    • cách đây 1 tháng
    1. AhmedAlmisalamy
      AhmedAlmisalamy
      • cách đây 1 tháng

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

      • cách đây 1 tháng
  • crazywebonline
    crazywebonline
    • cách đây 1 tháng

    Please check my new entry #35 . Thanks!

    • cách đây 1 tháng
  • cybbeysoft
    cybbeysoft
    • cách đây 1 tháng

    Please check entry #28

    • cách đây 1 tháng
  • crazywebonline
    crazywebonline
    • cách đây 1 tháng

    Please check entry #29

    • cách đây 1 tháng
  • hasan8505
    hasan8505
    • cách đây 1 tháng

    can I use bootstrap ??

    • cách đây 1 tháng
  • JakiZack
    JakiZack
    • cách đây 1 tháng

    You have not attached a background image and other images

    • cách đây 1 tháng

Xem thêm bình luận

Làm thế nào để bắt đầu với cuộc thi

  • Đăng cuộc thi của bạn

    Đăng cuộc thi của bạn Nhanh chóng và dễ dàng

  • Nhận được vô số bài dự thi

    Nhận được vô số Bài dự thi Từ khắp nơi trên thế giới

  • Trao giải cho bài thi xuất sắc nhất

    Trao giải cho bài thi xuất sắc nhất Download File - Đơn giản!

Đăng cuộc thi ngay hoặc tham gia với chúng tôi ngay hôm nay!