diff --git a/images/boy.png b/images/boy.png new file mode 100644 index 0000000..2ca2a3e Binary files /dev/null and b/images/boy.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..4ee35d8 Binary files /dev/null and b/images/logo.png differ diff --git a/images/shape.png b/images/shape.png new file mode 100644 index 0000000..1b4b790 Binary files /dev/null and b/images/shape.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e9c1ba4 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + Personle Portfolio Website + + + + +
+ +
+

I am PrashantSaini

+

This is my official Portfolio website to showcase my + all works related to
web development and ui design.

+ Downdload CV +
+
+ + +
+ +
+ + + +
+
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d6598d8 --- /dev/null +++ b/styles.css @@ -0,0 +1,115 @@ +*{ + margin: 0; + padding: 0; + font-family: sans-serif; +} + +.hero{ + position: relative; + width: 100%; + height: 100vh; + background: #eff4fd; + position: relative; +} + +nav{ + display: flex; + width: 84%; + margin: auto; + padding: 20px 0; + align-items: center; + justify-content: space-between; +} + +.logo{ + width: 100px; + cursor: pointer; +} + +nav ul li { + display: inline-block; + list-style: none; + margin: 10px 20px; +} + +nav ul li a{ + text-decoration: none; + color: #000; + font-weight: bold; +} + +nav ul li a:hover{ + color: red; +} + +.detel{ + margin-left: 8%; + margin-top: 15%; +} + +.detel h1{ + font-size: 50px; + color: #212121; + margin-bottom: 20px; +} + +span{ + color: orange; + +} + +.detel p{ + color: #555; + line-height: 22px; +} + +.detel a{ + background: #212121; + padding: 10px 18px; + text-decoration: none; + font-weight: bold; + color: #fff; + display: inline-block; + margin: 30px 0; + border-radius: 5px; +} + +.images{ + width: 45%; + height: 80%; + position: absolute; + bottom: 0; + right: 100px; +} + +.images img{ + height: 100%; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + transition: bottom 1s, left 1s; +} + +.images:hover .shape{ + bottom: 40px; +} + +.images:hover .boy{ + left: 45%; +} + +.social{ + margin-left: 8%; + margin-top: 100px; +} + +.social a{ + font-size: 30px; + color: #212121; + margin-right: 20px; +} + +.social a:hover{ + color: orange; +} \ No newline at end of file