CSS Grid Layout with Images

Estado: Closed
Premio: $100
Propuestas recibidas: 70
Ganador: youvpn220

Winner

Resumen del concurso

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

Habilidades recomendadas

CSS3
HTML5

Winner

Publica un concurso similar

Comentarios del empleador

“Excellent experience working with Yousef.”

Dennis268, United States.

Principales propuestas de este concurso

youvpn220 Unknown

0
CristianDU Argentina

0
mjmarazbd Bangladesh

0
mruttamsaha Bangladesh

0
adnanbinsaeed Pakistan

0
adnanbinsaeed Pakistan

0
adnanbinsaeed Pakistan

0
adnanbinsaeed Pakistan

0
MEG144 Egypt

0
JakiZack Indonesia

0
adilmon456 India

0
adilmon456 India

0
adilmon456 India

0
adilmon456 India

0
adilmon456 India

0
adilmon456 India

0

Ver más participaciones

Tablero de aclaración pública

adnanbinsaeed
- 1 año atrás
Please review 81, 82, 83 and 85
- 1 año atrás
vijaykrishnan149
- 1 año atrás
please wait I am working
- 1 año atrás
adilmon456
- 1 año atrás
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 año atrás
1. adilmon456
  - 1 año atrás
  (Live Preview Available = http://image-grid.rf.gd/).
  - 1 año atrás
AlDesigns0520
- 1 año atrás
Hi content holder, I made a live preview for entry #59 , I do hope you rate it and check it out.
- 1 año atrás
1. AlDesigns0520
  - 1 año atrás
  https://al-designs.web.app/
  - 1 año atrás
adilmon456
- 1 año atrás
Working on it. I will upload 10+ entries. Please don't close this before deadline
- 1 año atrás
PrinceMuhammad55
- 1 año atrás
kindly check #58 by Muhammad B. with Live link.
- 1 año atrás
Organizador del concurso
- 1 año atrás
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 año atrás
1. mjmarazbd
  - 1 año atrás
  Live Preview #53 = http://demo.flyfinley.com/cssgrid/
  - 1 año atrás
2. PrinceMuhammad55
  - 1 año atrás
  kindly check #58 by Muhammad B. with Live link.
  - 1 año atrás
youvpn220
- 1 año atrás
with your images and your logo live preview: https://clint-4.vercel.app
- 1 año atrás
Abuzar16nucs
- 1 año atrás
#47 plz have a look.
- 1 año atrás
youvpn220
- 1 año atrás
Just see this https://clint-4.vercel.app
- 1 año atrás
AhmedAlmisalamy
- 1 año atrás
#20 I've Finished your project.
- 1 año atrás
1. AhmedAlmisalamy
  - 1 año atrás
  And don't forget to see all images of project.
  - 1 año atrás
crazywebonline
- 1 año atrás
Please check my new entry #35 . Thanks!
- 1 año atrás
cybbeysoft
- 1 año atrás
Please check entry #28
- 1 año atrás
crazywebonline
- 1 año atrás
Please check entry #29
- 1 año atrás
hasan8505
- 1 año atrás
can I use bootstrap ??
- 1 año atrás
JakiZack
- 1 año atrás
You have not attached a background image and other images
- 1 año atrás