Merge pull request #206 from praptisharma28/main

2023 Design 02 Multi PR accepted #127 issue resolved
lmas3009 · Oct 3, 2023 · 4d23528 · 4d23528
2 parents 6db97f2 + 77ad4ed
commit 4d23528
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 0 deletions.
diff --git a/Design 02_2023/Prapti/index.html b/Design 02_2023/Prapti/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Design 02</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="main">
+        <div class="hero">
+            <div class="image">
+                <img src="https://images.pexels.com/photos/5690349/pexels-photo-5690349.jpeg?auto=compress&cs=tinysrgb&w=600"
+                    alt="" width="180px" height="180px">
+            </div>
+            <div class="black">
+                <h1><span>P</span>rapti <span>S</span>harma</h1>
+                <h3>[email protected]</h3>
+                <div>
+                    <h4>Full-Stack web developer and Augmented Reality<br>enthusiast</h4>
+                    <button class="button-23">Let's Connect</button>
+                    <button class="button-24">My Portfolio</button>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/Design 02_2023/Prapti/styles.css b/Design 02_2023/Prapti/styles.css
@@ -0,0 +1,128 @@
+.hero{
+    position: relative;
+    display: flex;
+    left: 200px;
+    top: 210px;
+}
+.black {
+
+    height: 340px;
+}
+h1{
+    font-size: 30px;
+    color: white;
+}
+h3{
+    color: white;
+    font-family: cursive;
+}
+h4{
+    color: #000000;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+span{
+    font-size: 50px;
+}
+.main{
+    background-color: rgb(0, 0, 0);
+    width: 100%;
+}
+img{
+    margin: 20px;
+    box-shadow: rgba(255, 255, 255, 0.50) 0px 54px 55px, rgba(254, 254, 254, 0.50) 0px -12px 30px, rgba(255, 255, 255, 0.50) 0px 4px 6px, rgba(255, 255, 255, 0.50) 0px 12px 13px, rgba(255, 255, 255, 0.50) 0px -3px 5px;
+    border-radius: 25px;
+
+}
+img:hover{
+    border: none;
+    transform: scale(105%);
+    transition: all;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in-out;
+}
+
+.button-23 {
+    background-color: #FFFFFF;
+    border: 1px solid #222222;
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: #222222;
+    cursor: pointer;
+    display: inline-block;
+    font-family: cursive;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    margin: 0;
+    outline: none;
+    padding: 13px 23px;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    touch-action: manipulation;
+    transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
+    user-select: none;
+    -webkit-user-select: none;
+    width: auto;
+}
+
+.button-23:focus-visible {
+    box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
+    transition: box-shadow .2s;
+}
+
+.button-23:active {
+    background-color: #F7F7F7;
+    border-color:#F7F7F7;
+    transform: scale(.96);
+}
+
+.button-23:disabled {
+    border-color: #000000; 
+    color: #000000;
+    cursor: not-allowed;
+    opacity: 1;
+}
+
+.button-24 {
+    background-color: #000000;
+    border: 1px solid #F7F7F7;
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: #F7F7F7;
+    cursor: pointer;
+    display: inline-block;
+    font-family: cursive;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    margin: 0;
+    outline: none;
+    padding: 13px 23px;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    touch-action: manipulation;
+    transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
+    user-select: none;
+    -webkit-user-select: none;
+    width: auto;
+}
+
+.button-24:focus-visible {
+    box-shadow: #F7F7F7 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
+    transition: box-shadow .2s;
+}
+
+.button-24:active {
+    background-color: #000000;
+    border-color: #F7F7F7;
+    transform: scale(.96);
+}
+
+.button-24:disabled {
+    border-color: #c2c0c0;
+    color: #F7F7F7;
+    cursor: not-allowed;
+    opacity: 1;
+}