Technigo · mariagraziafiori · Oct 30, 2021 · Oct 30, 2021 · karinnordkvist · Nov 17, 2021
diff --git 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
diff --git a/code/img/130-1309100_cargo-ship-clipart.png b/code/img/130-1309100_cargo-ship-clipart.png
diff --git a/code/img/RV-Architektur_list_400x300.jpg b/code/img/RV-Architektur_list_400x300.jpg
diff --git a/code/img/UZH_Website_500x300_20180226-1-1024x614.png b/code/img/UZH_Website_500x300_20180226-1-1024x614.png
diff --git a/code/img/Universitaet_Zuerich_big_02.jpg b/code/img/Universitaet_Zuerich_big_02.jpg
diff --git a/code/img/Universitaet_Zuerich_big_05.jpg b/code/img/Universitaet_Zuerich_big_05.jpg
diff --git a/code/img/bibliothek_uni_zurich.jpeg b/code/img/bibliothek_uni_zurich.jpeg
diff --git a/code/img/front_university_main_building_400x300.jpg b/code/img/front_university_main_building_400x300.jpg
diff --git a/code/img/icon_outreach_400x300.jpg b/code/img/icon_outreach_400x300.jpg
diff --git a/code/img/impfkampagne_400x300.jpg b/code/img/impfkampagne_400x300.jpg
diff --git a/code/img/irchel.jpg b/code/img/irchel.jpg
diff --git a/code/img/lichthof_400x300.jpg b/code/img/lichthof_400x300.jpg
diff --git a/code/img/rwi_bibliothek_400x300.jpg b/code/img/rwi_bibliothek_400x300.jpg
diff --git a/code/img/studies_icon_400x300.jpg b/code/img/studies_icon_400x300.jpg
diff --git a/code/img/uni_zentrum.jpg b/code/img/uni_zentrum.jpg
diff --git a/code/img/university_zurich_main_building.jpg b/code/img/university_zurich_main_building.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,18 +1,116 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Project Name</title>
-    <link rel="stylesheet" href="./style.css" />
-    <!-- dont forget the meta tag for responsiveness -->
-  </head>
-  <body>
-    <header>
-      <!-- If you want a header with a title, logo and a navbar, here is where you should add that. -->
-    </header>
-
-    <main class="">
-      <!-- The main container to use as the flex parent for your card layout, the main content of the site should be in here.  -->
-    </main>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+
+  <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Clone Website: University of Zurich</title>
+      <meta name="description" content="With its 28,000 enrolled students, the University of Zurich (UZH) is Switzerland's largest university.">
+      <link rel="stylesheet" href="style.css">
+      <link rel='icon' href='favicon-16x16.ico' type='image/x-icon'/>
+  </head>
+
+  <body>
+      <header>
+        <div class="hamburger-menu">
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <a href="index.html"><img src="./img/UZH_Website_500x300_20180226-1-1024x614.png" alt="Logo"></a>
+            <nav>
+              <a href="https://www.uzh.ch/en/about">University</a>
+              <a href="https://www.uzh.ch/en/studies">Studies</a>
+              <a href="https://www.uzh.ch/cmsssl/en/researchinnovation.html">Research</a>
+              <a href="https://www.news.uzh.ch/en.html">News</a>
+            </nav>
+      </header>
+
+    <section class="welcome"> 
+        <div>
+          <img src="./img/uni_zentrum.jpg" alt="University of Zurich, Law Library" title="University of Zurich, Main Building">
+        </div>
+    </section>
+
+    <section class="welcome-text"> 
+      <div>
+        <h1>Welcome to the University of Zurich</h1>
+      </div>
+    </section>
+
+    <main class="main-area">
+
+      <div class="centered">
+
+          <section class="cards">
+
+            <article class="card">
+
+                  <picture class="thumbnail">
+                    <img src="./img/front_university_main_building_400x300.jpg" alt="University">
+                  </picture>
+                  <div class="card-content">
+                      <h2>University</h2>
+                      <p>With its 28,000 enrolled students, the University of Zurich (UZH) is Switzerland's largest university.</p>
+                      <p>Find here all the most important information about the University of Zurich and its educating programs.</p>                 
+                  <a id="link-orange" href="https://www.uzh.ch/cmsssl/en/about/info.html" target="_blank">General Information &#8594;</a>
+                </div><!-- .card-content -->
+          </article><!-- .card -->
+
+          <article class="card">
+                  <a href="https://www.uzh.ch/cmsssl/en/studies.html" target="_blank">
+                      <picture class="thumbnail">
+                        <img src="./img/studies_icon_400x300.jpg" alt="Studies at the University of Zurich">
+                      </picture>
+                      <div class="card-content">
+                          <h2>Studies</h2>
+                          <p>Browse or search the course catalogue of all degree programs at the University of Zurich.</p>
+                          <p>Internal and external advisory services can help you decide what course to choose.</p>
+                      </div><!-- .card-content -->
+                  </a>
+              </article><!-- .card -->    
+
+            <article class="card">
+                  <a href="https://www.uzh.ch/cmsssl/en/researchinnovation.html" target="_blank">
+                      <picture class="thumbnail">
+                        <img src="./img/lichthof_400x300.jpg" alt="Research at the University of Zurich">
+                      </picture>
+                      <div class="card-content">
+                          <h2>Research</h2>
+                          <p>The University of Zurich is a leading player on the European research scene, and in certain areas ranks among the very best in the world.</p>
+                          <p>Its Research Priority Programs define areas of focus for the future.</p>
+                      </div><!-- .card-content -->
+                  </a>
+              </article><!-- .card -->
+
+              <article class="card">
+                <a href="https://www.uzh.ch/en/outreach" target="_blank">
+                    <picture class="thumbnail">
+                      <img src="./img/icon_outreach_400x300.jpg" alt="Studies at the University of Zurich">
+                    </picture>
+                    <div class="card-content">
+                        <h2>Outreach</h2>
+                        <p>Find out about libraries, public lectures and events at the University of Zurich.</p>
+                        <p>The Main Library of the University of Zurich and the numerous public libraries at UZH's institutes and departments hold over two million volumes.</p>
+                    </div><!-- .card-content -->
+                </a>
+            </article><!-- .card -->
+
+
+
+          </section><!-- .cards -->
+
+      </div><!-- .centered -->
+
+  </main>
+
+  <footer>
+        <p><a href="https://www.uzh.ch/en.html" target="blank">University of Zurich 2021 &#8594;</a></p>
+        <p><a href="https://www.uzh.ch/cmsssl/en/impressum.html" target="blank">About this Site &#8594;</a></p>
+        <p><a href="https://www.uzh.ch/en/privacy" target="blank">Data Protection &#8594;</a></p>
+        <p><a href="https://www.uzhfoundation.ch/en/" target="blank">UHZ Foundation &#8599;</a></p>    
+  </footer>
+
+</body>
+
+</html>
diff --git 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;
+    }
+}