CSS Grid Layout with Images

  • Статус: Closed
  • Награды: $100
  • Полученные заявки: 70
  • Победитель: youvpn220

Краткое описание конкурса

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

Рекомендуемые навыки

Отзыв работодателя

“Excellent experience working with Yousef.”

Изображение профиля Dennis268, United States.

Лучшие работы этого конкурса

Показать больше конкурсных работ

Панель общих вопросов

  • adnanbinsaeed
    adnanbinsaeed
    • 2 месяцев назад

    Please review 81, 82, 83 and 85

    • 2 месяцев назад
  • vijaykrishnan149
    vijaykrishnan149
    • 2 месяцев назад

    please wait I am working

    • 2 месяцев назад
  • adilmon456
    adilmon456
    • 2 месяцев назад

    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)

    • 2 месяцев назад
    1. adilmon456
      adilmon456
      • 2 месяцев назад

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

      • 2 месяцев назад
  • AlDesigns0520
    AlDesigns0520
    • 2 месяцев назад

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

    • 2 месяцев назад
    1. AlDesigns0520
      AlDesigns0520
      • 2 месяцев назад

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

      • 2 месяцев назад
  • adilmon456
    adilmon456
    • 2 месяцев назад

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

    • 2 месяцев назад
  • PrinceMuhammad55
    PrinceMuhammad55
    • 2 месяцев назад

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

    • 2 месяцев назад
  • Dennis268
    Организатор конкурса
    • 2 месяцев назад

    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.

    • 2 месяцев назад
    1. mjmarazbd
      mjmarazbd
      • 2 месяцев назад

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

      • 2 месяцев назад
    2. PrinceMuhammad55
      PrinceMuhammad55
      • 2 месяцев назад

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

      • 2 месяцев назад
  • youvpn220
    youvpn220
    • 2 месяцев назад

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

    • 2 месяцев назад
  • Abuzar16nucs
    Abuzar16nucs
    • 2 месяцев назад

    #47 plz have a look.

    • 2 месяцев назад
  • youvpn220
    youvpn220
    • 3 месяцев назад

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

    • 3 месяцев назад
  • AhmedAlmisalamy
    AhmedAlmisalamy
    • 3 месяцев назад

    #20 I've Finished your project.

    • 3 месяцев назад
    1. AhmedAlmisalamy
      AhmedAlmisalamy
      • 3 месяцев назад

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

      • 3 месяцев назад
  • crazywebonline
    crazywebonline
    • 3 месяцев назад

    Please check my new entry #35 . Thanks!

    • 3 месяцев назад
  • cybbeysoft
    cybbeysoft
    • 3 месяцев назад

    Please check entry #28

    • 3 месяцев назад
  • crazywebonline
    crazywebonline
    • 3 месяцев назад

    Please check entry #29

    • 3 месяцев назад
  • hasan8505
    hasan8505
    • 3 месяцев назад

    can I use bootstrap ??

    • 3 месяцев назад
  • JakiZack
    JakiZack
    • 3 месяцев назад

    You have not attached a background image and other images

    • 3 месяцев назад

Показать больше комментариев

Как организовать конкурс

  • Опубликуйте свой конкурс

    Опубликуйте ваш конкурс Быстро и легко

  • Получите массу заявок

    Получите массу заявок Со всего мира

  • Присудите приз лучшей заявке

    Присудите приз лучшей заявке Загрузите файлы – это просто!

Опубликуйте конкурс или присоединяйтесь к нам прямо сегодня!