From 8b7bb21b8703e2a67afecbbaeeade5d505a26524 Mon Sep 17 00:00:00 2001 From: alaminarchie Date: Wed, 10 Jul 2024 17:55:44 +0600 Subject: [PATCH] navbar and intro content section added --- index.html | 73 +++++-------------------- style.css | 154 ++++++++++++++--------------------------------------- 2 files changed, 55 insertions(+), 172 deletions(-) diff --git a/index.html b/index.html index 4d06e0c..c56b710 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - I am a Digital Marketer and Web Developer + I will @@ -20,65 +20,20 @@
- Developer -

- In the future, I will be a digital marketer and web developer. -

-

- In the future, I will be a digital marketer and web developer, - creating engaging websites, driving online presence, and utilizing - effective digital strategies to make a significant impact in the - digital landscape. -

- +
+ Developer +

+ In the near future, I hope to become a Developer. +

+

+ In the near future, I aspire to become a Developer, mastering both + front-end and back-end technologies, creating innovative solutions, + and contributing to impactful projects that enhance user experiences + and drive technological advancement +

+ +
-
-
-

Why Digital Marketing

-

- In the future, I will be a digital marketer and web developer, - creating engaging websites, driving online presence, and utilizing - effective digital strategies to make a significant impact in the - digital landscape -

-
-
-
-

My Journey Towards Global Transformation

-

- Digital Marketing: My journey towards transforming global reach, - engaging through social media, and driving impactful change in - the modern business landscape. -

- -
- Item Image -
-
- Item Image -
-

I will Do Coding and Change The World

-

- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. -

- -
-
-
-
-

I will Do Coding and Change The World

-

- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. -

- -
- Item Image -
-
-
-
diff --git a/style.css b/style.css index 5826943..0b7bdaa 100644 --- a/style.css +++ b/style.css @@ -1,37 +1,20 @@ -/* Reset CSS */ +/* Reset / Base Styles */ *, -*::before, -*::after { +*::after, +*::before { + margin: 0; + padding: 0; box-sizing: border-box; } html { font-size: 16px; } -body, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -dl, -dd, -ol, -ul, -figure, -hr { - margin: 0; - padding: 0; -} body { line-height: 1.5; font-family: "Azeret Mono", monospace; - background-color: #ffffff; + font-style: normal; + background: rgb(255, 255, 255); } - ol, ul { list-style: none; @@ -60,14 +43,13 @@ h6 { line-height: 1.2; } /* Navbar Style CSS */ - .nav_bar { - width: 1200px; - height: 80px; + max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; + padding: 10px 0; } .nav_bar .logo { font-size: 28px; @@ -75,122 +57,68 @@ h6 { color: #0d1321; } .nav_bar .logo:hover { - scale: 1.2; -} -.btn { - padding: 5px 10px; - border: 1px solid #0d1321; - border-radius: 5px; + scale: 1.1; } -.btn:hover { - translate: -1rem; +.nav_bar .btn { + padding: 8px 10px; + border: 1px solid #ff0000; + border-radius: 8px; + opacity: 0.8; } -.btn a { +.nav_bar .btn a { font-size: 16px; font-weight: 600; } +.nav_bar .btn:hover { + translate: -1rem; +} -/* intro Section style css */ +/* Intro Section Style CSS */ .intro { + width: 100%; height: 600px; background-image: url(./images/hero-bg.png); background-repeat: no-repeat; background-size: cover; +} +.intro .intro_content { + max-width: 1000px; + margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; - text-align: center; } -.intro .intro_img { - width: 250px; - margin-top: -80px; +.intro_content img { + width: 200px; + margin-top: 40px; } .intro .intro_title { - text-align: center; - font-size: 38px; + color: #0d1321; + font-size: 40px; font-weight: 800; - padding: 0 200px; - line-height: 50px; + text-align: center; + line-height: 60px; } .intro .intro_desc { - text-align: center; - font-size: 16px; - font-weight: 400; - padding: 0 200px; color: #0d1321; - margin-bottom: 30px; + font-size: 16px; + text-align: center; } .intro .btn { padding: 8px 15px; background-color: #0d1321; + border-radius: 5px; + margin-top: 15px; +} +.intro .btn a { color: #ffffff; + font-size: 18px; + font-weight: 600; text-transform: capitalize; } .intro .btn:hover { scale: 1.1; - translate: none; -} -.digital_section { - width: 1250px; - margin: 100px auto; - padding: 50px 80px; - border-radius: 10px; - background: rgba(13, 19, 33, 0.02); -} -.digital_section .section_title { - text-align: center; - font-size: 32px; - font-weight: 800; -} -.digital_section .section_desc { - text-align: center; - font-size: 16px; - color: #0d1321; - padding: 0 30px; - margin-bottom: 30px; } -.item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 30px; - border-radius: 10px; - background: linear-gradient( - 90deg, - rgb(255, 255, 255), - rgba(255, 255, 255, 0) 100% - ); - margin: 30px 0; -} -.item2 { - background: linear-gradient( - 270deg, - rgb(255, 255, 255), - rgba(255, 255, 255, 0) 100% - ); -} -.item h3 { - color: rgba(13, 19, 33, 0.7); - font-size: 24px; - font-weight: 700; - line-height: 36px; -} -.item p { - color: rgba(13, 19, 33, 0.7); - font-size: 16px; - color: #0d1321; - margin-bottom: 20px; -} -.item .item_btn { - padding: 5px 10px; - border: 1px solid #0d1321; - border: 1px solid rgb(13, 19, 33); - opacity: 0.7; -} -.item .item_btn a { - font-size: 20px; - font-weight: 600; - color: rgba(13, 19, 33, 0.7); -} +/* Development Style CSS */