From db7a75ac7a9c365b85b727ba03c4514e97cac044 Mon Sep 17 00:00:00 2001 From: "samanfyz68@gmail.com" Date: Wed, 7 Apr 2021 08:42:57 +0800 Subject: [PATCH 1/3] test --- index.html | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/index.html b/index.html index 5765c28..e69de29 100644 --- a/index.html +++ b/index.html @@ -1,12 +0,0 @@ - - - - - - - Portfolio Page - - - - - \ No newline at end of file From a9c6049ea2f353aeb1faab30286478ce7339f749 Mon Sep 17 00:00:00 2001 From: "samanfyz68@gmail.com" Date: Wed, 7 Apr 2021 09:05:07 +0800 Subject: [PATCH 2/3] added to new branch --- css/style.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 18 +++++++++++ 2 files changed, 107 insertions(+) diff --git a/css/style.css b/css/style.css index e69de29..431b6a6 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,89 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* For mobile phones: */ +[class*='col-'] { + width: 100%; +} + +@media only screen and (min-width: 600px) { + /* For tablets: */ + .col-s-1 { + width: 8.33%; + } + .col-s-2 { + width: 16.66%; + } + .col-s-3 { + width: 25%; + } + .col-s-4 { + width: 33.33%; + } + .col-s-5 { + width: 41.66%; + } + .col-s-6 { + width: 50%; + } + .col-s-7 { + width: 58.33%; + } + .col-s-8 { + width: 66.66%; + } + .col-s-9 { + width: 75%; + } + .col-s-10 { + width: 83.33%; + } + .col-s-11 { + width: 91.66%; + } + .col-s-12 { + width: 100%; + } +} +@media only screen and (min-width: 768px) { + /* For desktop: */ + .col-1 { + width: 8.33%; + } + .col-2 { + width: 16.66%; + } + .col-3 { + width: 25%; + } + .col-4 { + width: 33.33%; + } + .col-5 { + width: 41.66%; + } + .col-6 { + width: 50%; + } + .col-7 { + width: 58.33%; + } + .col-8 { + width: 66.66%; + } + .col-9 { + width: 75%; + } + .col-10 { + width: 83.33%; + } + .col-11 { + width: 91.66%; + } + .col-12 { + width: 100%; + } +} diff --git a/index.html b/index.html index e69de29..4da8683 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + Document + + +
+
+
+
+
+
+
+ + From 418194039202f0b2b19377189fa1427ecb5508e7 Mon Sep 17 00:00:00 2001 From: "samanfyz68@gmail.com" Date: Wed, 7 Apr 2021 09:40:52 +0800 Subject: [PATCH 3/3] add profile section --- css/style.css | 58 ++++++++++++++++++++++++++++++++++++++++++++------- index.html | 24 +++++++++++++++++++-- 2 files changed, 72 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index f1f875e..068898c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,20 +1,53 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } +body { + font-family: 'Roboto', sans-serif; +} +.row { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; +} +#profile img { + display: block; + width: 50%; + margin: 0 25%; +} +#profile p { + margin: 20px; + color: grey; + font-size: 14px; + line-height: 1.5; + text-align: justify; +} +.title { + text-align: center; + padding: 10px; +} /* responsive media queries */ /* For mobile phones: */ -[class*="col-"] { - +[class*='col-'] { width: 100%; } @media only screen and (min-width: 600px) { - + #profile p { + font-size: 1.7em; + } + #profile img { + width: 45%; + margin: 0 auto; + } + .title { + font-size: 2.5rem; + } /* For tablets: */ .col-s-1 { width: 8.33%; @@ -53,7 +86,7 @@ width: 100%; } } -@media only screen and (min-width: 768px) { +@media only screen and (min-width: 770px) { /* For desktop: */ .col-1 { width: 8.33%; @@ -91,8 +124,17 @@ .col-12 { width: 100%; } + .row { + justify-content: space-evenly; + } + .container { + margin: 0 15px; + } + #profile img { + width: 70%; + margin: 0 15%; + } + #profile p { + font-size: 1.2rem; + } } - - - - diff --git a/index.html b/index.html index 645677c..01f8b40 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,35 @@ - Document +
-
+
+

saman fayazi

+
+
+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. A sequi + aliquam temporibus, modi nobis natus. Eos maiores similique ducimus + voluptatibus. +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam + aut incidunt veritatis aspernatur assumenda ipsa! Sequi officiis + nemo adipisci aspernatur deserunt quod sed amet accusantium! Rem + velit iusto ex repudiandae. +

+
+
+