diff --git a/css/style.css b/css/style.css index b8a6f7a73..768630fcd 100644 --- a/css/style.css +++ b/css/style.css @@ -693,6 +693,35 @@ textarea { animation: wheel 1.3s infinite; -webkit-animation: wheel 1.3s infinite; } + .experience { + background: #fafafa; } + .__content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 10rem; } + @media only screen and (max-width: 56.25em) { + .__content { + grid-template-columns: 1fr; + grid-gap: 8rem; } } + .__content-title { + font-weight: 700; + font-size: 2.8rem; + margin-bottom: 3rem; } + @media only screen and (max-width: 37.5em) { + .__content-title { + font-size: 2.4rem; } } + .__content-details-para { + font-size: 1.8rem; + color: grey; + max-width: 60rem; + line-height: 1.7; + margin-bottom: 1rem; } + .__content-details-para--hl { + font-weight: 700; + margin: 0 3px; } + .__content-details-para:last-child { + margin-bottom: 4rem; } + @keyframes wheel { to { opacity: 0; diff --git a/index.html b/index.html index 230079f44..773b827e2 100644 --- a/index.html +++ b/index.html @@ -1,412 +1,335 @@ - - - - - Dopefolio - - + + + + + Dopefolio + - - - - - -
-
-
-
- Ram Maheshwari Logo Image -
- John Doe + + + + + + + + +
+
+
+
+ Ram Maheshwari Logo Image
-
- -
- hamburger menu - hamburger menu close -
+ John Doe +
+
+ +
+ hamburger menu + hamburger menu close
-
-
-
+
+
+ -
+
  • + Experience +
    • + +
  • + Contact +
    • +
    -
    -
    -
    -

    Hey, My name is John Doe

    -
    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis - tempora explicabo quae quod deserunt eius sapiente solutions for - complex problems -

    -
    -
    - Projects -
    +
    +
    +
    +
    +

    Hey, My name is John Doe

    +
    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis + tempora explicabo quae quod deserunt eius sapiente solutions for + complex problems +

    -
    - - - - - +
    + Projects +
    +
    +
    + + -
    -
    + -
    -
    -
    -

    - About Me - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis - tempora explicabo quae quod deserunt eius sapiente - -

    -
    -
    -

    Get to know me!

    -
    -

    - Hey! It's - John Doe - and I'm a Frontend Web Developer located in - Los Angeles. I've done - remote - projects for agencies, consulted for startups, and collaborated - with talented people to create - digital products - for both business and consumer use. -

    -

    - I'm a bit of a digital product junky. Over the years, I've used - hundreds of web and mobile apps in different industries and - verticals. Feel free to - contact me here. -

    -
    - Contact + + +
    +
    +
    +
    +
    +
    +
    +

    + About Me + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis + tempora explicabo quae quod deserunt eius sapiente + +

    +
    +
    +

    Get to know me!

    +
    +

    + Hey! It's + John Doe + and I'm a Frontend Web Developer located in + Los Angeles. I've done + remote + projects for agencies, consulted for startups, and collaborated + with talented people to create + digital products + for both business and consumer use. +

    +

    + I'm a bit of a digital product junky. Over the years, I've used + hundreds of web and mobile apps in different industries and + verticals. Feel free to + contact me here. +

    -
    -

    My Skills

    -
    -
    HTML
    -
    CSS
    -
    JavaScript
    -
    React
    -
    SASS
    -
    GIT
    -
    Shopify
    -
    Wordpress
    -
    Google ADS
    -
    Facebook Ads
    -
    Android
    -
    IOS
    -
    + Contact +
    +
    +

    My Skills

    +
    +
    HTML
    +
    CSS
    +
    JavaScript
    +
    React
    +
    SASS
    +
    GIT
    +
    Shopify
    +
    Wordpress
    +
    Google ADS
    +
    Facebook Ads
    +
    Android
    +
    IOS
    -
    -
    -
    -

    - Projects - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis - tempora explicabo quae quod deserunt eius sapiente - -

    +
    +
    +
    +
    +

    + Projects + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis + tempora explicabo quae quod deserunt eius sapiente + +

    -
    -
    -
    - Software Screenshot -
    -
    -

    Project 1

    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic - facilis tempora, explicabo quae quod deserunt eius sapiente - praesentium. -

    - Case Study -
    +
    +
    +
    + Software Screenshot
    -
    -
    - Software Screenshot -
    -
    -

    Project 2

    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic - facilis tempora, explicabo quae quod deserunt eius sapiente - praesentium. -

    - Case Study -
    -
    -
    -
    - Software Screenshot -
    -
    -

    Project 3

    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic - facilis tempora, explicabo quae quod deserunt eius sapiente - praesentium. -

    - Case Study -
    +
    +

    Project 1

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic + facilis tempora, explicabo quae quod deserunt eius sapiente + praesentium. +

    + Case Study
    -
    -
    -
    -
    -

    - Contact - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis - tempora explicabo quae quod deserunt eius sapiente - -

    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    - -
    +
    +
    + Software Screenshot +
    +
    +

    Project 2

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic + facilis tempora, explicabo quae quod deserunt eius sapiente + praesentium. +

    + Case Study +
    -
    -
    - + + + + + \ No newline at end of file