diff --git a/README.md b/README.md index 60f55e53..0d455704 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # Project Name -Replace this readme with your own information about your project. +Univesity of Zurich: Clone Website -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +I noticed that the website of the University of Zurich does not have a great responsive layout. I then decided to attempt creating a homepage which would look great on mobile devices. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +The main goal: make the homepage responsive. ## View it live -Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +This project is not intended for deployment. diff --git a/code/favicon-16x16.ico b/code/favicon-16x16.ico new file mode 100644 index 00000000..6d7f7f0d Binary files /dev/null and b/code/favicon-16x16.ico differ diff --git a/code/img/130-1309100_cargo-ship-clipart.png b/code/img/130-1309100_cargo-ship-clipart.png new file mode 100644 index 00000000..902c8ba5 Binary files /dev/null and b/code/img/130-1309100_cargo-ship-clipart.png differ diff --git a/code/img/RV-Architektur_list_400x300.jpg b/code/img/RV-Architektur_list_400x300.jpg new file mode 100644 index 00000000..e047f10e Binary files /dev/null and b/code/img/RV-Architektur_list_400x300.jpg differ diff --git a/code/img/UZH_Website_500x300_20180226-1-1024x614.png b/code/img/UZH_Website_500x300_20180226-1-1024x614.png new file mode 100644 index 00000000..43f59a9d Binary files /dev/null and b/code/img/UZH_Website_500x300_20180226-1-1024x614.png differ diff --git a/code/img/Universitaet_Zuerich_big_02.jpg b/code/img/Universitaet_Zuerich_big_02.jpg new file mode 100644 index 00000000..cbb35f5d Binary files /dev/null and b/code/img/Universitaet_Zuerich_big_02.jpg differ diff --git a/code/img/Universitaet_Zuerich_big_05.jpg b/code/img/Universitaet_Zuerich_big_05.jpg new file mode 100644 index 00000000..28ce848c Binary files /dev/null and b/code/img/Universitaet_Zuerich_big_05.jpg differ diff --git a/code/img/bibliothek_uni_zurich.jpeg b/code/img/bibliothek_uni_zurich.jpeg new file mode 100644 index 00000000..48599072 Binary files /dev/null and b/code/img/bibliothek_uni_zurich.jpeg differ diff --git a/code/img/front_university_main_building_400x300.jpg b/code/img/front_university_main_building_400x300.jpg new file mode 100644 index 00000000..008dda03 Binary files /dev/null and b/code/img/front_university_main_building_400x300.jpg differ diff --git a/code/img/icon_outreach_400x300.jpg b/code/img/icon_outreach_400x300.jpg new file mode 100644 index 00000000..0b0a991f Binary files /dev/null and b/code/img/icon_outreach_400x300.jpg differ diff --git a/code/img/impfkampagne_400x300.jpg b/code/img/impfkampagne_400x300.jpg new file mode 100644 index 00000000..4a06246c Binary files /dev/null and b/code/img/impfkampagne_400x300.jpg differ diff --git a/code/img/irchel.jpg b/code/img/irchel.jpg new file mode 100644 index 00000000..d5c11919 Binary files /dev/null and b/code/img/irchel.jpg differ diff --git a/code/img/lichthof_400x300.jpg b/code/img/lichthof_400x300.jpg new file mode 100644 index 00000000..45547174 Binary files /dev/null and b/code/img/lichthof_400x300.jpg differ diff --git a/code/img/rwi_bibliothek_400x300.jpg b/code/img/rwi_bibliothek_400x300.jpg new file mode 100644 index 00000000..06d3c864 Binary files /dev/null and b/code/img/rwi_bibliothek_400x300.jpg differ diff --git a/code/img/studies_icon_400x300.jpg b/code/img/studies_icon_400x300.jpg new file mode 100644 index 00000000..98f1e387 Binary files /dev/null and b/code/img/studies_icon_400x300.jpg differ diff --git a/code/img/uni_zentrum.jpg b/code/img/uni_zentrum.jpg new file mode 100644 index 00000000..a02408f6 Binary files /dev/null and b/code/img/uni_zentrum.jpg differ diff --git a/code/img/university_zurich_main_building.jpg b/code/img/university_zurich_main_building.jpg new file mode 100644 index 00000000..308ce3d0 Binary files /dev/null and b/code/img/university_zurich_main_building.jpg differ diff --git a/code/index.html b/code/index.html index 805a75d1..9a102a3a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,18 +1,116 @@ - - - - - Project Name - - - - -
- -
- -
- -
- - + + + + + + + Clone Website: University of Zurich + + + + + + +
+
+
+
+
+
+ Logo + +
+ +
+
+ University of Zurich, Law Library +
+
+ +
+
+

Welcome to the University of Zurich

+
+
+ +
+ +
+ +
+ +
+ + + University + +
+

University

+

With its 28,000 enrolled students, the University of Zurich (UZH) is Switzerland's largest university.

+

Find here all the most important information about the University of Zurich and its educating programs.

+ General Information → +
+
+ + + + + + + + + +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 6992f5d0..57ad3d72 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,191 @@ -/* If you can see a peach background, the css file is correctly linked. Feel free to change or remove this styling! */ - -body { - background-color: peachpuff; -} + +/*** Body ***/ + +body { + background-color: whitesmoke; + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; +} + +/*** Header ***/ + +header { + background-color: white; + height: 80px; + display: flex; + position: sticky; + top: 0; + z-index: 100; + align-items: center; + overflow: hidden; + padding: 0 16px; + opacity: 0.95 ; +} + +header img { + width: 180px; +} + +.hamburger-menu { + display: flex; + width: 25px; + height: 15px; + flex-direction: column; + justify-content: space-between; + margin-right: 24px; +} + +.hamburger-menu div { + background: black; + width: 30px; + height: 1px; + border-radius: 4px; + padding: 1px; +} + +nav a { + color: black; + text-decoration: none; + margin-left: 16px; + font-weight: bold; +} + +/*** Main Content ***/ + +.welcome { + display: flex; + padding-top: 10px; +} + +.welcome img { + width: 100%; +} + +.welcome-text { + color: rgb(0, 40, 165); + text-align: center; + font-size: large; +} + +img { + display: block; + border: 0; + width: 100%; + height: auto; +} + +.card { + background: white; + margin-bottom: 20px; +} + +.card a { + color: black; + text-decoration: none; +} + +#link-orange { + color: rgb(218, 84, 46); + text-decoration: none; + font-weight: bold; +} + + +.card-content { + padding: 1.4em; +} + +.card-content h2 { + margin-top: 0; + margin-bottom: .5em; + font-weight: bold; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + +.card { + flex: 0 1 calc(25% - 1em); +} + + /*** Footer ***/ + + footer { + display: flex; + background-color: rgb(0, 94, 168); + align-items: baseline; + justify-content: space-evenly; + padding: 10px; + } + + footer a { + text-decoration: none; + color: white; + font-size: 15px; + font-weight: bold; + } + +/*** Media Queries ***/ + +@media (min-width: 650px) { + header { + justify-content: space-between; + } + + nav { + display: inline-block; + } + + .hamburger-menu { + display: none; + } + +} + +@media screen and (max-width: 650px) { + + nav { + display: none; + } + +} + +@media screen and (min-width: 650px) { + .cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .card { + flex: 0 1 calc(50% - 1em); + } +} + +@media screen and (min-width: 960px) { + + .card { + flex: 0 1 calc(25% - 1em); + } +} + +@media screen and (max-width: 660px) { + + .card { + flex: 0 1 calc(50% - 1em); + } +} + +@media screen and (max-width: 660px) { + + .card { + flex: 0 1 calc(100% - 1em); + } + + .cards { + margin-right: -15px; + } +} \ No newline at end of file