TinkerHubKMCTCE · shamna-nourin · Sep 3, 2020 · Sep 3, 2020 · Sep 3, 2020 · Sep 3, 2020
diff --git a/20200901_155438.jpg b/20200901_155438.jpg
diff --git a/GitHub-logo 6.png b/GitHub-logo 6.png
diff --git a/emailloff.jpg b/emailloff.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>My Awesome Portfolio</title>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,600;1,400&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Lato:ital@1&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+        <header>
+          <div class="container">
+              <nav class="flex items-center">
+                <div class="left flex items-center">
+                    <div class="branding">
+                        <img src="logo 2.jpg"">
+                    </div>
+                    <div>
+                        <a href="#">Home</a>
+                        <a href="#">About</a>
+                        <a href="#">Pages</a>
+                        <button class="btn btn-primary">Contact</button>
+                    </div>
+                 </div>
+                </div>
+              </nav>
+              <div class="heroine flex items-center justify-between">
+                  <div class="left flex-1 flex justify-center">
+                      <img src="shamna loh 1.jpg">
+                  </div>
+                  <div class="right flex-1">
+                      <h6>SHAMNA NOURIN</h6>
+                      <h3>I'm a Creative <span>Designer</span></h3>
+                      <p></p>
+
+                      <div>
+                          <button class="btn btn-secondary">DOWNLOAD CV</button>
+                      </div>
+                  </div>
+              </div>
+            </div>
+        </header>
+        <section class="about">
+            <div class="container flex">
+                <div class="flex-1">
+                    <img class="about-me-img" src="shmna loh 3.jpg">
+                </div>
+                <div class="flex-1">
+                    <h1>About <span>Me</span></h1>
+                    <h3>Hai!! Am Shamna Nourin</h3>
+                    <p>BTech CS second year student at KMCT College of Engineering for Women.
+                        And this is a representation of all that i've learned and accomplished as 
+                       a science and engineering student.My personal phylosophy when it comes to education 
+                       and learning is  closely related to several cognitive theory of motivation.</p>
+
+                </div>
+                <div class="social">
+                    <a href="#"><img src="instagram nnew.png" alt="" height="35px"></a>
+                    <a href="#"><img src="snapchat new.png" alt=""height="35px"></a>
+                    <a href="#"><img src="GitHub-logo 6.png" alt=""height="35px"></a>
+                    <a href="#"><img src="linkedin.png" alt=""height="35px"></a>
+               </div>
+
+              </div> 
+            </div>
+        </section>
+        <section class="TheArtBox">
+            <h1>I AM AVAILABLE FOR THEARTBOX</h1>
+            <P>A page for arts</P>
+            <button class="btn btn-primary">DOWNLOAD CV</button>
+        </section>
+        <section class="contact">
+            <div class="container">
+                <h1 class="section-heading"> Contact <span>Us</span></h1>
+            </div>
+            <div class="card-wrapper">
+                <div class="card">
+                    <img src="phn loff 2.jpg">
+                    <h1>call us on</h1>
+                    <h6>+623 891 5272</h6>
+                </div>
+
+                <div class="card">
+                    <img src="emailloff.jpg">
+                    <h1>Email Us At</h1>
+                    <h6>shamna3371@gmail.com</h6>
+                </div>
+            </div>
+            <form action="">
+                <div class="input-wrap">
+                    <input type="text" placeholder="YOUR NAME *">
+                    <input type="email" placeholder="YOUR EMAIL *">
+                </div>
+                <div class="input-wrap-2">
+                    <input type="text" placeholder="YOUR SUBJECT...">
+                    <textarea name="" id="" cols="30" rows="10" placeholder="YOUR MESSAGES..."></textarea>
+                </div>
+                <div class="btn-wrapper">
+                    <button class="btn btn-primary">SEND MESSAGES</button>
+                </div>
+            </form>
+        </section>
+        <footer>
+            <img class="footer-logo" src="logo 2.jpg" alt="">
+            <div class="footer-socials">
+                <a href="#"><img src="instagram nnew.png" alt="" height="35px"></a>
+                <a href="#"><img src="snapchat new.png" alt="" height="35px"></a>
+                <a href="#"></a><img src="GitHub-logo 6.png" alt=""height="35px"></a>
+                <a href="#"></a><img src="linkedin.png" alt=""height="35px"></a>
+            </div>
+            <div class="copyright">
+                Copyright 2020 name PSD Template.All Right Reserved.
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/instagram nnew.png b/instagram nnew.png
diff --git a/linkedin.png b/linkedin.png
diff --git a/logo 2.jpg b/logo 2.jpg
diff --git a/phn loff 2.jpg b/phn loff 2.jpg
diff --git a/shamna loh 1.jpg b/shamna loh 1.jpg
diff --git a/shmna loh 3.jpg b/shmna loh 3.jpg
diff --git a/snapchat new.png b/snapchat new.png
diff --git a/style.css b/style.css
@@ -0,0 +1,202 @@
+@import 'utilities.css';
+:root{
+    --primary:#3DCFD3;
+    --dark:#161616;
+    --pure:#FFFFFF;
+    --ternary:#898989;
+    --light:#F2F2F2;
+}
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    -webkit-font-smoothing:antialiased;
+}
+body{
+    font-family: 'Poppins', sans-serif;
+}
+header{
+    background: var(--dark);
+    height: 700px;
+    clip-path: polygon(0 0, 100% 0,100% 100%, 70% 87%, 0 100%);
+}
+.container{
+    max-width: 1152px;
+    padding: 0 15px;
+    margin: 0 auto;
+}
+
+header nav .left a{
+    color: var(--pure);
+    text-decoration: none;
+    margin-right: 2rem;
+    text-transform: uppercase;
+    transition:all .3s ease;
+}
+header nav .left a:hover{
+    color: var(--primary);
+}
+header nav {
+    padding: 2rem 0;
+}
+header nav .branding{
+    margin-right: 3rem;
+}
+.heroine .right{
+    color: var(--pure);
+}
+.heroine .right h6{
+    font-size: 1.6rem;
+    color: var(--primary);
+    margin-bottom: 0.5rem;
+}
+.heroine .right h2{
+    font-size: 4rem;
+    font-weight: 100;
+    line-height: 1.2;
+    margin-bottom: 2rem;
+}
+.heroine .right h2 span{
+    color: var(--primary);
+}
+.heroine .right p{
+    line-height: 1.9;
+    margin-bottom: 2rem;
+}
+.heroine .right{
+    margin-top: 7rem;
+}
+section{
+    padding: 6rem 0;
+}
+section.about .about-me-img{
+    height: 250px;
+} 
+section.about h1{
+    margin-bottom: 1rem;
+    font-size: 1.6rem;
+    font-weight: 400;
+}
+section.about h1 span{
+    color:var(--primary) ;
+}
+section.about h3{
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    font-weight: 400;
+}
+section.about p{
+    font-family: 'Lato', sans-serif;
+    color: var(--ternary);
+    line-height: 1.9;
+    margin-bottom: 2rem;
+}
+section.about .social{
+    display: flex;
+    align-items: flex-end;
+}
+section.about .social a{
+    background-color: var(--dark);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    margin-right: 0.6rem;
+    transition: all .3s ease;
+}
+section.about .social a:hover{
+    background: var(--primary);
+}
+section.about .social a img{
+    width: 100%;
+    height: 100%;
+    padding: 0.5rem;
+}
+section.theartbox{
+    text-align: center;
+    background-color: var(--dark);
+
+    clip-path: polygon(0 0,100% 0,100% 100%,80% 87%,0 100%);
+}
+
+section.contact .card-wrapper{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+}
+section.contact .card-wrapper .card{
+    text-align: center;
+}
+section.contact .input-wrap{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 2rem;
+    margin-bottom: 2rem;
+}
+section.contact .input-wrap-2{
+    display: flex;
+    flex-direction: column;
+}
+section.contact .input-wrap-2 input{
+    margin-bottom: 2rem;
+    border: 1px solid var(--light);
+    border: 1px solid var(--light);
+
+}
+section.contact input{
+    padding: 0.5rem;
+    border: 1px solid var(--light);
+    font-size: 0.9rem;
+}
+section.contact .input-wrap-2 textarea{
+    padding: 0.5rem;
+    border:  1px solid var(--light);
+    font-size: 0.9rem;
+}
+section.contact .input-wrap-2 textarea{
+    outline: none;
+}
+section.contact .input:focus{
+    background: cornsilk;
+    outline: none;
+}
+section.contact .btn-wrapper{
+    text-align: center;
+    margin: 2rem;
+}
+section.contact .container{
+    text-align: center;
+    margin: 2rem;
+}
+footer{
+    background: var(--dark);
+    text-align: center;
+    padding: 5rem 0;
+}
+}
+footer .footer-logo{
+    margin-bottom: 3rem;
+    width: 150px;
+}
+footer footer.socials a{
+    margin-right: 1rem;
+}
+footer footer.socials{
+    margin-bottom: 3rem;
+    margin-right: -1rem;
+}
+
+footer .copyright{
+    color: var(--ternary);
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/utilities.css b/utilities.css
@@ -0,0 +1,43 @@
+.flex{
+    display: flex;
+}
+
+.items-center{
+    align-items: center;
+}
+
+.btn{
+    padding: 0.8rem 3rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border: 2px solid transparent;
+    outline: none;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: all .3s ease;
+}
+.btn-primary{
+    background: var(--primary);
+    color: var(--secondary);
+}
+.btn-primary:hover{
+    background: transparent;
+    color: var(--primary);
+    border-color: var(--primary);
+}
+.btn-secondary{
+    background: transparent;
+    color: var(--primary);
+    border-color: var(--primary);
+}
+.btn-secondary:hover{
+    background: var(--primary);
+    color: var(--secondary);
+}
+
+.flex-1{
+    flex: 1;
+}
+.justify-center{
+    justify-content: center;
+}