Skip to content

Latest commit

 

History

History
141 lines (128 loc) · 4.02 KB

Adding Introduction section with image in index.md

File metadata and controls

141 lines (128 loc) · 4.02 KB

Introduction Section under Index.html

<!doctype html>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<title>About Me</title>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');
    .nav {
        background-color: rgb(51, 248, 77);
    }

    .nav-item {
        padding: 10px;
        font-family: "Times New Roman", Times, serif;
    }
    .nav1{
        font-size:25px;
    }
    .card{
        margin:5% auto;
        border-radius: 5px;
        background-color:rgb(245, 209, 161);
    }
    .self{
         font-family: 'Cinzel Decorative', cursive;
    }
    .content{
        font-family: 'Gilda Display', serif;
        font-weight: 600;
    }
    #skill{
        color: brown;
        background-color:rgb(176, 241, 173);
        margin-top:15px;
        font-family: 'Gilda Display', serif;
    }
    .frame{
        border-radius: 50%;
        width:90px;
        height: 90px;
    }
    .container2{
        margin: 2% auto;
        width:70%;
        height:150px;
    }
    .name{
        font-size:50px;
        font-weight: 800;
    }
    .color{
        color:white;
        font-size:35px;
    }

    .card{
        bottom:-30px;
        box-shadow: 8px 12px 31px -10px #f5f102;
    }
    .skill_section{
        height: 70px;
        background-color: rgb(17, 211, 211);
        width:50%;
    }
    #skill_part{
        
        font-family: 'Gilda Display', serif;
        color:brown;
        width:70%;
    }
    .container_part{
        width:50%;
        color: aliceblue;
    }
   

    .subcont{
        width:100%;
        height: 0.01px;
    }
    .symbol_text{
         font-family: 'Gilda Display', serif;
         font-weight: 500;
         font-size: 20px;
         color:rgb(3, 238, 247);
    }
    .symbol_text:hover{
        color:rgb(250, 246, 4);
    }
    #subnet_1{
        padding-left:7%;
    }
    #subcont_2{
             padding-left: 45%;
    }
    #subcont_3{
        padding-left:85%;
    }
    #set_position{
        padding-left:28%;
    }
    #set_position1{
        padding-left: 60%;
    }
    .bold{
        
    }
</style>

   <body style="background-color:rgb(46, 44, 44);">
       <div class="card" style="width: 25rem;">
          <center><img class="card1" src="pic2.jpg" alt="Card image cap" width=50% ></center>
       <div class="card-body">
        <center><h1 class="self"> Your name </h1></center>
        <p class="content">
            Hello , I am Zain malik.
             Currently, I am in my 3 rd year of engineering - batch 2023. I am a data enthusiast and love to deal with data to analyze,visualize and form a conclusion on it.
              I am familiar with many computer languages and I have listed everything below in my skill section.
                Please scroll down and have a look. Thank you.
        </p>
         <a href="" target="_blank" class="btn btn-primary">Download Resume</a>
    </div>
  </div>

Output

This is how this code will let your introduction be look like

ss