From ab16fced8ed27842a27ecc173b36200e9b2300e1 Mon Sep 17 00:00:00 2001 From: bawan Date: Tue, 28 Apr 2020 23:03:31 +0300 Subject: [PATCH] Done --- index.html | 235 ++++++++++++++++++++++---------------- style.css | 323 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 461 insertions(+), 97 deletions(-) diff --git a/index.html b/index.html index 9e34deb..f470c21 100644 --- a/index.html +++ b/index.html @@ -5,18 +5,22 @@ My Name - Homepage + + +
-
-
+

My Name

My Title

Where I am From

-
-
+ +
+

About me

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, dicta officia delectus minus distinctio - corporis ipsa? Ex perspiciatis enim veniam mollitia pariatur sapiente autem voluptate illum repudiandae ipsam. + + + Lorem sk sit amet, consectetur adipisicing elit. Tempora, dicta officia delectus minus distinctio + corporis Ex perspiciatis enim veniam mollitia pariatur sapiente autem voluptate illum repudiandae ipsam. Magni, cum? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta tenetur sunt inventore odio sint, - dolorem qui odit voluptate? Quo tempore suscipit ut minima doloribus quia esse possimus adipisci quisquam + dolorem qui odit voluptate? tempore suscipit ut minima doloribus quia esse possimus adipisci quisquam magni. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur debitis aspernatur in dolore temporibus earum molestias vero assumenda saepe id sit magni, sapiente quod architecto velit. Accusantium aspernatur provident quaerat?

-
+

My Skills

-
-
    -
  • -
    -
    icon
    -

    Skill Name

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, - ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam - dolore in esse.

    -
    -
    • -
  • -
    -
    icon
    -

    Skill Name

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, - ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam - dolore in esse.

    -
    -
    • -
  • -
    -
    icon
    -

    Skill Name

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, - ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam - dolore in esse.

    -
    -
    • -
  • -
    -
    icon
    -

    Skill Name

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, - ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam - dolore in esse.

    -
    -
    • -
  • -
    -
    icon
    -

    Skill Name

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, - ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam - dolore in esse.

    -
    -
    • -
  • -
    -
    icon
    -

    Skill Name

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, - ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam - dolore in esse.

    -
    -
    • +
    +
      +
      + +
    • +
      +
      icon
      +

      Skill Name

      +

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, + ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam + dolore in esse.

      +
      +
      • +
    • +
      +
      icon
      +

      Skill Name

      +

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, + ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam + dolore in esse.

      +
      +
      • +
    • +
      +
      icon
      +

      Skill Name

      +

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, + ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam + dolore in esse.

      +
      +
      • +
    • +
      +
      icon
      +

      Skill Name

      +

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, + ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam + dolore in esse.

      +
      +
      • +
    • +
      +
      icon
      +

      Skill Name

      +

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, + ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam + dolore in esse.

      +
      +
      • +
    • +
      +
      icon
      +

      Skill Name

      +

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod, + ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam + dolore in esse.

      +
      +
      • +
      + +
+
+
+
+
A
+
B
+
+
+
+
C
+
D
+
+
E
+
+
+
+
F
+
+
G
+
H
+
+
+
+ + + + +
-
+

My Experience

-
-
-
- icon +
+
+ icon
-
+

Job Title

Company Name

-
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore dolores quas officiis debitis natus dicta animi, doloremque harum asperiores nostrum voluptatum delectus, aliquam iste nesciunt porro, provident aliquid impedit! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam obcaecati ea @@ -136,15 +174,15 @@

Company Name

ab? Amet unde molestiae sit.

-
-
- icon +
+
+ icon
-
+

Job Title

Company Name

-
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore dolores quas officiis debitis natus dicta animi, doloremque harum asperiores nostrum voluptatum delectus, aliquam iste nesciunt porro, provident aliquid impedit! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam obcaecati ea @@ -152,15 +190,15 @@

Company Name

ab? Amet unde molestiae sit.

-
-
- icon +
+
+ icon
-
+

Job Title

Company Name

-
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore dolores quas officiis debitis natus dicta animi, doloremque harum asperiores nostrum voluptatum delectus, aliquam iste nesciunt porro, provident aliquid impedit! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam obcaecati ea @@ -172,23 +210,26 @@

Company Name

diff --git a/style.css b/style.css index e69de29..84742be 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,323 @@ + +*{ + margin:0; + padding:0; + box-sizing: border-box; +} + +body{ + font-family: Arial, Helvetica, sans-serif; + +} + + + +.logo{ + width: 60px; + height: 60px; +} + +header{ + margin-top:15px; +} +.nav-li{ + display:flex; + justify-content: space-between; + + + + +} +.list-style{ + + list-style: none; + + +} +li{ + display: inline; +} +a{ + text-decoration: none; + margin: 5px; + padding: 5px; + color: grey; +} +main{ + display: flex; + flex-direction: column; + +} +.title{ + display: flex; + + flex-direction: column; + justify-content: center; + align-content: center; + + text-align: center; + padding:190px 0 ; + color: grey; +} +.about{ + background-color: grey; + color: white; + padding: 150px; + + +} +.about-container{ + background-color: rgb(105, 103, 103); + padding: 5%; + +} +.about-container>h2{ + color: white; +} +.my-skill{ + + text-align: center; + padding:15px; + border:2px solid gray; + margin: 20px; +} + +.img-style{ + width: 60px; + height: 60px; + opacity: 0.5; + + +} + +.skill-container{ + display: flex; + flex-wrap: wrap; + justify-content:center ; +} + +.skill-container >li { + width: 400px; + height: 330px; + + text-align: center; + padding: 0 10px; + color: grey; +border: grey; +} + +.skill h2{ + margin: 30px 0; +} +h2{ + color: grey; + text-align: center; + + font-size: 40px; + +} + +.experience{ + margin:50px 0; +} + +.experience h2{ + margin-bottom: 50px; + margin-top: 30px; +} + +.experience-container img{ + width: 60px; + height: 60px; + +} + +.experience-container{ + line-height: normal; + display: flex; + flex-direction: row; +align-items: center; +opacity:0.5; +text-align: center; +padding:0 30px; + + +} + + + + + +.experience-img{ + flex: 1; + text-align: left; + + + +} +.experience-title{ + text-align: center; + flex: 2; + font-size: 26px; +} + +.experience-title h3{ + margin:8px; +} +.experience-discription{ + flex: 2; + line-height: 1.5; + + text-align: justify; + font-size: 14px; +} +.contact{ + + display: flex; + flex-direction:column; +align-items: center; +background-color: grey; +padding: 50px 20px; + + +} + +.contact>h2{ + color: white; +} +.contact-form{ + display: flex; + flex-direction:column; + align-items: center; + + +} + + +.social{ + display: flex; + flex-direction:column; + align-items: center; +background-color: grey; +padding: 50px 20px; + +} +.social{ + color:white; + + + +} + +.social-icon{ + display:flex; + justify-content: space-around; + width:58vw; +} + +input { + width: 700px; + height: 50px; + margin: 20px; +} +textarea{ + width:700px ; + margin: 20px; +} +.btn{ + color:white ; + background-color:rgb(211, 210, 210); + padding:0; + margin:0; + width:706px ; +} + + +.flex-container{ + display:flex; + + widows: 100%; + height:600px; + padding: 20px; + color: white; + font-weight: bolder; +} + +.part-one{ + flex:3; + + display:flex; + flex-direction: column; + margin-right: 20px; +} + +.a-b{ + height: 200px; + margin-bottom: 20px; + display:flex; +} + +.a{ + flex:1; + margin-right: 20px; +} +.b{ + flex:2; +} +.c-d-e{ + height: 400px; + display:flex; +} + + + +.c-d{ + flex:1; + display:flex; + flex-direction: column; + margin-right: 20px; +} + +.c{ + flex:1; + margin-bottom: 20px; +} + +.d{ + flex:1; +} + +.e{ + flex:4; +} + +.part-two{ + flex:2; + display:flex; +} + +.f{ + flex:1; + margin-right: 20px; +} +.g-h{ + flex: 1; + display: flex; + flex-direction: column; +} +.g{ + flex: 4; + margin-bottom: 20px; +} +.h{ + flex: 1; + background: grey; + +} + + +.gray{ + background: gray; + opacity:.5; + padding:10px; +} \ No newline at end of file