From d53d14637ce6c093fc962bbd13585d330b6a863e Mon Sep 17 00:00:00 2001 From: shubham Date: Mon, 5 Jun 2023 23:33:19 +0530 Subject: [PATCH] Added Short Profile with HTML and CSS --- Shubham/index.html | 40 +++++++++++++ Shubham/style.css | 136 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 176 insertions(+) create mode 100644 Shubham/index.html create mode 100644 Shubham/style.css diff --git a/Shubham/index.html b/Shubham/index.html new file mode 100644 index 0000000..f96bf10 --- /dev/null +++ b/Shubham/index.html @@ -0,0 +1,40 @@ + + + + + + + Personal Portfolio Website HTML CSS Only + + + +
+ + + +
+ +
+
+

Hii, I'm Shubham Yeram

+

FullStack Developer

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Accusantium reprehenderit, non deleniti amet omnis id?

+
+ Hire Me + Let's Talk +
+
+
+ + + + + + \ No newline at end of file diff --git a/Shubham/style.css b/Shubham/style.css new file mode 100644 index 0000000..32b13dc --- /dev/null +++ b/Shubham/style.css @@ -0,0 +1,136 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;9007display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body{ + background: #081b29; + color: #ededed; +} + +.header{ + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 20px 10%; + background: transparent; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; +} + +.logo{ + font-size: 25px; + color: #ededed; + text-decoration: none; + font-weight: 600; +} + +.navbar a{ + font-size: 18px; + color: #ededed; + text-decoration: none; + font-weight: 500; + margin-left: 35px; + transition: .3s; +} + +.navbar a:hover, +.navbar a.active{ + color: #00abf0; +} + +.home{ + height: 100vh; + display: flex; + align-items: center; + padding: 0, 10%; +} + +.home-content{ + max-width: 600px; +} + +.home-content h1{ + font-size: 56px; + font-weight: 700; + line-height: 1.2; +} + +.home-content h3{ + font-size: 32px; + font-weight: 700; + color: #00abf0; +} + +.home-content p{ + font-size: 16px; + margin: 20px 0 40px; +} + +.home-content .btn-box{ + display: flex; + justify-content: space-between; + width: 345px; + height: 50px; +} + +.btn-box a{ + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + width: 150px; + height: 100%; + background: #00abf0; + border: 2px solid #00abf0; + border-radius: 8px; + font-size: 19px; + color: #081b29; + text-decoration: none; + font-weight: 600; + letter-spacing: 1px; + z-index: 1; + overflow: hidden; + transition: .5s; +} + +.btn-box a:hover{ + color: #00abf0; +} + +.btn-box a:nth-child(2){ + background: transparent; + color: #00abf0; +} + +.btn-box a:nth-child(2):hover{ + color: #081b29; +} + +.btn-box a:nth-child(2)::before{ + background: #00abf0; +} + +.btn-box a::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + background: #081b29; + z-index: -1; + transition: .5s; +} + +.btn-box a:hover::before{ + width: 100%; +} +