diff --git a/css/style.css b/css/style.css index 8883119..30905b2 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,36 @@ -@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap'); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; +@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; } body{ @@ -36,45 +63,111 @@ body{ /* responsive media queries */ /* For mobile phones: */ -[class*="col-"] { +[class*='col-'] { width: 100%; } @media only screen and (min-width: 600px) { -/*larger than 601px - 768px*/ + #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%;} - .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%;} - #profile p{ font-size: 1.7em;} - #profile img {width: 40%; margin: 0 30%} - .title{font-size: 2.5em;} -} -@media only screen and (min-width: 769px) { -/*anything beyoud 769px*/ + + .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: 770px) { /* 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%;} - .container{margin: 0px 150px;} - #profile img{width: 70%; margin: 0 15%;} - #profile p{font-size: 1.2em;} -} \ No newline at end of file + .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%; + } + .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 8d6836f..01f8b40 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,39 @@ - - - - - - Portfolio Page - - + + + + + Document + + +
-
-

Nandini Nayak

-
-
- profile-pic -
-
-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo beatae dolores eveniet, ducimus exercitationem velit dolore eius quis incidunt aut minima, porro consequatur fugit, similique ratione tempore distinctio! Animi, earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa possimus ducimus tempora odio veniam delectus, totam consequuntur tempore, itaque explicabo a dolorum accusantium ullam placeat reprehenderit, quo reiciendis porro necessitatibus!

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id ipsa vel deleniti sit? Magni facilis excepturi molestias rerum aliquid. Alias facere voluptas officiis sint veniam dolorum veritatis cupiditate autem iste.

-
-
-
-
-
-