text change and portfolio upload

LukasJerabek · Jan 11, 2021 · 5c23e0c · 5c23e0c
1 parent e8a601b
commit 5c23e0c
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 63 deletions.
diff --git a/contact.html b/contact.html
@@ -38,9 +38,9 @@
       </div>
       <div id="bottom_row">
       </div>
+      <div id="horizontal_line"></div>
     </div>
 
-    <div id="horizontal_line"></div>
     <div id="footer_container">
       <div id="fb_wrapper">
         <img id="facebook_link" src="img/fb_white.svg">

diff --git a/home.css b/home.css
@@ -24,10 +24,32 @@ body {
   width: 100%;
 }
 
+#container {
+  max-width: 1920px;
+  display: grid;
+  margin-right: auto;
+  margin-left: auto;
+  grid-template-columns: 60% auto;
+}
+
+#container {
+  grid-template-areas:
+    "top top"
+    "text ."
+    "horizontal_line horizontal_line"
+    "footer footer";
+}
+
+/* 608px / 16px = 38em */
+@media (max-width: 38em) {
+  #container {
+  grid-template-columns: 80% auto;
+  }
+}
+
 #top-container {
+  grid-area: top;
   display: flex;
-  max-width: 1920px;
-  margin: auto;
 }
 
 .nav {
@@ -94,7 +116,7 @@ a:active {
 }
 
 #logo {
-  width: 27.7vw;
+  width: 27.7%;
   height: auto;
   min-height: 406px;
   min-width: 466px;
@@ -124,14 +146,15 @@ a:active {
   }
 }
 
-/* 1920px / 16px = 120em */
-@media (min-width: 120em) {
+/* 350px / 16px = 22em */
+@media (max-width: 22em) {
   #logo {
-    width: 531.84px;
+   margin-left: 25px;
   }
 }
 
 #footer_container {
+  grid-area: footer;
   display: grid;
   grid-template-columns: auto 80px 10.5px 80px 17.5%;
   grid-template-areas: ". fb . insta .";
@@ -195,6 +218,7 @@ a:active {
 }
 
 #horizontal_line {
+  grid-area: horizontal_line;
   background-color: #33ff98ff;
   width: 943px;
   height: 3px;
@@ -211,6 +235,7 @@ a:active {
 }
 
 #text_container {
+  grid-area: text;
   display: flex;
   justify-content: flex-end;
   background-color: #fff;
@@ -222,27 +247,13 @@ a:active {
   margin-top: 98px;
   margin-right: 39.1vw;
   padding-left: auto;
+  width: 100%;
 }
 
 /* 1275px / 16px = 80em */
 @media (max-width: 80em) {
   #text_container {
     padding-left: 5vw;
-    margin-right: 25vw;
-  }
-}
-
-/* 943px / 16px = 59em */
-@media (max-width: 59em) {
-  #text_container {
-    margin-right: 15vw;
-  }
-}
-
-/* 550px / 16px = 35em */
-@media (max-width: 35em) {
-  #text_container {
-    margin-right: 5vw;
   }
 }
 

diff --git a/index.html b/index.html
@@ -1,46 +1,50 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>emma.</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <link href="home.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
+
+<head>
+	<title>emma.</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+	<link href="home.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <div id="container">
     <div id="top-container">
       <img id="logo" src="img/logo.svg">
-      <div id="vertical_line">
+        <div id="vertical_line">
+        </div>
+        <nav class="nav rotate">
+          <ul class"nav-list">
+            <li class="nav-item"><a href="contact.html">kontakt</a></li>
+            <li class="nav-item"><a href="portfolio.html">portfolio</a></li>
+            <li class="nav-item"><a href="price_list.html">ceník</a></li>
+          </ul>
+        </nav>
       </div>
-      <nav class="nav rotate">
-        <ul class"nav-list">
-          <li class="nav-item"><a href="contact.html">kontakt</a></li>
-          <li class="nav-item"><a href="portfolio.html">portfolio</a></li>
-          <li class="nav-item"><a href="price_list.html">ceník</a></li>
-        </ul>
-      </nav>
-    </div>
 
     <div id="text_container">
       <div id="text">
-        Vystudovala jsem Střední školu designu a umění, stylu
-        a módy v Brně s maturitou. Zajímám se o další osobní
-        rozvoj v uměleckých směrech a jiných zajímavých oblastech jako například psychologie. Jsem zodpovědná,
-        přizpůsobivá, spolehlivá, zručná a časově flexibilní.
-        Pracuji s programy jako je Adobe Illustrator, Indesign a
-        Photoshop. Mám zkušenosti se sazbou knih a tvorbou
-        grafických layoutů, tiskovin, log, brand vizuálu a obalového designu. Rozvíjím se v oblasti tvorby UI.
+        Vítejte na mém webu, jmenuji se Emma Fojtíková a pomůžu vám s čímkoliv,
+        co se týká grafického designu. Můžeme spolu vytvořit, případně oživit, 
+        celou vaši vizuální identitu, kterou se budete prezentovat do světa a jejíž základem bude logo ušité na míru. 
+        Potřebujete-li spíše věci drobnějšího charakteru, jako například vizitky, reklamní plochy, letáky, nebo katalogy, 
+        i s tím se na mě můžete obrátit. Zkušenosti mám i s návrhem webů, knih a obalovým designem.
+        Kontaktovat mě můžete na facebooku nebo na emailu.
+        Těším se na naši spolupráci!
       </div>
     </div>
 
     <div id="horizontal_line"></div>
-    <div id="footer_container">
-        <div id="fb_wrapper">
-          <img id="facebook_link" src="img/fb.svg">
-        </div>
-        <div id="insta_wrapper">
-          <img id="instagram_link" src="img/insta.svg">
-        </div>
-    </div>
+  </div>
+  <div id="footer_container">
+      <div id="fb_wrapper">
+        <img id="facebook_link" src="img/fb.svg">
+      </div>
+      <div id="insta_wrapper">
+        <img id="instagram_link" src="img/insta.svg">
+      </div>
+  </div>
 
     <script src="script.js"></script>
   </body>

diff --git a/portfolio.css b/portfolio.css
@@ -196,8 +196,8 @@ a:active {
   grid-template-areas: ". work . projects .";
   font-family: Gilroy-BoldItalic;
   font-size: 4.5rem;
-  margin-top: 133px;
-  margin-bottom: 154px;
+  margin-top: 130px;
+  margin-bottom: 110px;
 }
 
 /* 912px / 16px = 57em */
@@ -294,8 +294,4 @@ a:active {
     "page_heading black_box"
     "links links"
     "footer footer";
-}
-
-/* 1152px / 16px = 72em */
-@media (max-width: 72em) {
 }
diff --git a/portfolio.html b/portfolio.html
@@ -39,11 +39,15 @@
     <div id="links">
       <div id="work_wrapper" class="portfolio_wrapper">
         PRACOVNÍ
-        <img class="portfolio_link" src="img/download.svg">
+        <a href="portfolio/portfolio-work.pdf">
+          <img class="portfolio_link" src="img/download.svg">
+        </a>
       </div>
       <div id="projects_wrapper" class="portfolio_wrapper">
         PROJEKTY
-        <img class="portfolio_link" src="img/download.svg">
+        <a href="portfolio/portfolio-projects.pdf">
+          <img class="portfolio_link" src="img/download.svg">
+        </a>
       </div>
     </div>
     <div id="footer_container">

diff --git a/portfolio/portfolio-projects.pdf b/portfolio/portfolio-projects.pdf
diff --git a/portfolio/portfolio-work.pdf b/portfolio/portfolio-work.pdf
diff --git a/price_list.html b/price_list.html
@@ -33,7 +33,7 @@
 
     <div id="first_line"></div>
     <div id="info_box">
-      Veškeré ceny jsou pouze orientační a jsem schopná se přizpůsobit i Vašim cenovým požadavkům, zároveň se vše také odvíjí od složitosti práce a od stráveného času. Ostatní práci tvořím v hodinové sazbě 250 Kč/hod.
+      Veškeré ceny jsou pouze orientační, vše se odvíjí od složitosti práce a od stráveného času. Ostatní práci tvořím v hodinové sazbě 250 Kč/hod.
     </div>
     <div id="page_heading">
       CENÍK
@@ -197,7 +197,7 @@
     </div>
     <div class="section" id="note">
       Uvedené ceny jsou orientační, napište si o přesnou kalkulaci podle vašich konkrétních požadavků.<br>
-      Ostatní práci tvořím v hodinové sazbě <b>250 Kč/hod.</b> nebo dohodou.
+      Ostatní práci tvořím v hodinové sazbě <b>250 Kč/hod.</b>
     </div>
     <div id="footer_container">
       <div id="fb_wrapper">