diff --git a/LCI2024014/index.html b/LCI2024014/index.html new file mode 100644 index 0000000..fce44ec --- /dev/null +++ b/LCI2024014/index.html @@ -0,0 +1,57 @@ + + + + + + Document + + + +
+
NAMASKAR   DOSTO
+

AVINASH SINGH

+
+ +
+
+
+ +
+
+ + + + + + +
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + \ No newline at end of file diff --git a/LCI2024014/styles.css b/LCI2024014/styles.css new file mode 100644 index 0000000..9caeaa6 --- /dev/null +++ b/LCI2024014/styles.css @@ -0,0 +1,112 @@ +*{ + background-color: #021526; + margin: 0; + padding: 0; +} +.intro{ + height: 300px; + width: 800px; + display: inline-block; +} +#greet { + margin-left: 30px; + margin-top: 30px; + color: aqua; + margin-top: 5px; + font-size: 20px; + white-space: nowrap; + overflow: hidden; + border-right: 2px solid white; + width: 0; + animation: typing 4s steps(30,end) forwards, blink-caret 0.5s step-end 1; +} + +h1 { + color: #fb06ff; + font-size: 80px; + margin-left: 30px; + font-family: monospace; +} +#profile { + display: inline-block; + margin-top: 50px; +} +#pro { + height: 270px; +} +.logo { + display: inline-block; + margin: 20px; + transition: 1s; +} +#png { + height: 80px; +} +.logo:hover { + transform: scale(1.1); + box-shadow: 2px 2px 2px lightblue; +} +ul { + font-size: 20px; + color:aliceblue; + margin-left: 40px; + list-style-type: none; +} +#skills { + align-items: center; + margin-left: 220px; +} +#social { + width: 565px; + height: 140px; + border: 4px solid black; + align-items: center; + margin: auto; + border-radius: 0; +} +.card { + height: 100px; + width: 100px; + border: 3px solid black; + display: inline-block; + align-items: center; + text-align: center; + margin: 15px; + font-size: 10px; + border-radius: 25%; + transition: 1s; + color: red; + background-color: aliceblue; + box-shadow: 1px 1px 1px yellow; +} +.social { + width: 100%; + height: 100%; + border-radius: 25%; +} +.card:hover{ + box-shadow: 5px 5px 5px goldenrod; + transform: scale(1.1); + color: red; +} + +@keyframes typing { + from { + width: 0; + } + to { + width: 25%; + } +} + +/* Blinking cursor effect */ +@keyframes blink-caret { + from, to { + border-color: transparent; + } + 50% { + border-color: white; + } +} + +