└── HTML-CSS-CV-demo-master
    ├── img
        ├── bg.jpg
        ├── avatar.jpg
        ├── favicon.ico
        ├── resume_icon.png
        ├── PicsArt_08-03-09.05.06.jpg
        └── profile-picture-background-l1y44ijo20ooanql.jpg
    ├── README.md
    ├── style.css
    └── index.html


/HTML-CSS-CV-demo-master/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PradeepVelmurugan/curiculamprd/HEAD/HTML-CSS-CV-demo-master/img/bg.jpg


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/img/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PradeepVelmurugan/curiculamprd/HEAD/HTML-CSS-CV-demo-master/img/avatar.jpg


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PradeepVelmurugan/curiculamprd/HEAD/HTML-CSS-CV-demo-master/img/favicon.ico


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/img/resume_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PradeepVelmurugan/curiculamprd/HEAD/HTML-CSS-CV-demo-master/img/resume_icon.png


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/img/PicsArt_08-03-09.05.06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PradeepVelmurugan/curiculamprd/HEAD/HTML-CSS-CV-demo-master/img/PicsArt_08-03-09.05.06.jpg


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/img/profile-picture-background-l1y44ijo20ooanql.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PradeepVelmurugan/curiculamprd/HEAD/HTML-CSS-CV-demo-master/img/profile-picture-background-l1y44ijo20ooanql.jpg


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | <h1 align="center">Oh, So Simple HTML CV!</h1>
 3 | 
 4 | <img alt="Simple HTML CV" src="https://github.com/ritaly/HTML-CSS-CV-demo/blob/master/img/resume_icon.png" />
 5 | 
 6 | HTML and CSS template for your outstanding job applications
 7 | </div>
 8 | 
 9 | ## What is Oh, So Simple HTML CV?
10 | 
11 | **Oh, So Clear HTML CV!** is simple, clear and aesthetic **Resume** template for beginners to better understand HTML5 and CSS basics by example.
12 | 
13 | **This page will help you:**
14 | 
15 | * create legible *CV (Curriculum Vitae)* / *Resume*
16 | * create website with HTML5 and CSS
17 | * create CSS flexbox layout
18 | * implement good-looking responsive layouts
19 | * use Font Awesome 5 for social media
20 | 
21 | This repo contains the final source code for free tutorial.
22 | 
23 | Full explanation and task you can find in Polish: [CV HTML / CSS](https://www.flynerd.pl/2018/07/stworz-cv-w-html-i-css-krok-po-kroku.html)
24 | 
25 | ## Demo
26 | Check demo here: [Ocat CV](https://ritaly.github.io/HTML-CSS-CV-demo/)
27 | 
28 | ## Credits
29 | Please feel free to copy any part of this repo for your own uses.
30 | 
31 | **[Fly Nerd](https://www.flynerd.pl/)** - I will be happy if you mention **FlyNerd** as an inspiration.
32 | 
33 | Thanks:
34 | 
35 | - **Raleway** - set of free fonts thanks to Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida, Igino Marini
36 | 
37 | - **Freepik** - title icon made by [Freepick](http://www.freepik.com), licensed: CC 3.0


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Raleway');
  2 | 
  3 | body {
  4 |   margin: 0;
  5 |   font-family: 'Raleway';
  6 |   font-size: 16px;
  7 |   line-height: 1.8em;
  8 | }
  9 | 
 10 | a {
 11 |   color: #1C9C94;
 12 |   text-decoration: none;
 13 | }
 14 | 
 15 | a:hover {
 16 |   opacity: 0.5;
 17 | }
 18 | 
 19 | article {
 20 |   padding:0 1em;
 21 | }
 22 | 
 23 | section{
 24 |   margin: 1em;
 25 |   padding: 1em;
 26 | }
 27 | 
 28 | header, main, footer {
 29 |   margin: 0 auto;
 30 | }
 31 | 
 32 | header {
 33 |   padding: 2em;
 34 |   text-align: center;
 35 |   background-image: url('./img/profile-picture-background-l1y44ijo20ooanql.jpg');
 36 |   background-size: cover;
 37 |   background-position: fixed;
 38 |   color: white;
 39 | }
 40 | 
 41 | header section {
 42 |   margin: 0 auto;
 43 |   max-width: 640px;
 44 | }
 45 | 
 46 | header img {
 47 |   border-radius: 50%;
 48 |   max-width: 150px;
 49 | }
 50 | 
 51 | h1 {
 52 |   text-transform: uppercase;
 53 |   margin: 1em 0;
 54 | }
 55 | 
 56 | h3 {
 57 |   text-transform: uppercase;
 58 | }
 59 | 
 60 | h3, h4 {
 61 |   font-weight: bold;
 62 | }
 63 | 
 64 | main {
 65 |   max-width: 1140px;
 66 | }
 67 | 
 68 | main section:not(:last-child) {
 69 |   border-bottom: 1px solid #ccc;
 70 | }
 71 | 
 72 | .fab {
 73 |   border: 1px solid white;
 74 |   border-radius: 50%;
 75 |   font-size: 1.5em;
 76 |   width: 1.5em;
 77 |   height: 1.5em;
 78 |   line-height: 1.5em;
 79 |   margin: 5px;
 80 |   text-align: center;
 81 | }
 82 | 
 83 | a .fab {
 84 |   color: white;
 85 | }
 86 | 
 87 | .course, .skills {
 88 |   display: -ms-flexbox;
 89 |   display: flex;
 90 |   -ms-flex-wrap: wrap;
 91 |   flex-wrap: wrap;
 92 | }
 93 | 
 94 | .course .title {
 95 |   color: #509e98;
 96 |   -ms-flex: 0 0 33.3%;
 97 |   flex: 0 0 33.3%;
 98 |   max-width: 33%;
 99 | }
100 | 
101 | .course .descrition {
102 |   -ms-flex: 0 0 66.6%;
103 |   flex: 0 0 66.6%;
104 |   max-width: 66.6%;
105 | }
106 | 
107 | .course .descrition p {
108 |   padding-left: 1em;
109 | }
110 | 
111 | .skills .column {
112 |   -ms-flex: 0 0 50%%;
113 |   flex: 0 0 50%;
114 |   max-width: 50%;
115 | }
116 | 
117 | .skills .column ul, ul.job-description {
118 |   list-style-type: none;
119 | }
120 | 
121 | .skills .column ul > li:before {
122 |   content: "►";
123 |   padding-right: 0.5em;
124 |   color: #509e98;
125 | }
126 | 
127 | .school, .job-title {
128 |   text-transform: capitalize;
129 | }
130 | 
131 | .school span, .job-title span {
132 |   color: #889499;
133 |   text-decoration: underline;
134 | }
135 | 
136 | ul.job-description li:before{
137 |   content: "✔";
138 |   padding-right: 0.5em;
139 |   color: #509e98;
140 | }
141 | 
142 | footer {
143 |  padding: 1em 1.5em;
144 |  background: #A7B8BF;
145 |  color: white;
146 |  text-align: right;
147 | }
148 | 
149 | @media only screen and (max-width: 768px) {
150 |   .course {
151 |     display: block;
152 |   }
153 | 
154 |   .course .title, .course .descrition {
155 |     max-width: 100%;
156 |   }
157 | }
158 | 
159 | @media only screen and (max-width: 576px) {
160 |   .skills {
161 |     display: block;
162 |   }
163 | 
164 |   .skills .column {
165 |     max-width: 100%;
166 |   }
167 | 
168 |   footer {
169 |     text-align: center;
170 |   }
171 | }
172 | 


--------------------------------------------------------------------------------
/HTML-CSS-CV-demo-master/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>CV - Pradeep</title>
  6 |   <meta name="description" content="simple CV example created with HTML and CSS">
  7 |   <meta name="author" content="Pradeep">
  8 |   <link rel="icon" href="./img/favicon.ico">
  9 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 10 |   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 11 |   <link rel="stylesheet" href="style.css">
 12 | </head>
 13 | 
 14 | <body>
 15 |   <header>
 16 |     <div>
 17 |       <img src="./img/PicsArt_08-03-09.05.06.jpg" />
 18 |     </div>
 19 |     <h1>Pradeep Velmurugan</h1>
 20 |     <section>
 21 |       <p>Hello! I am Pradeep Velmurugan. I work as interface and front-end developer. I have passion for pixel perfect, minimal and easy to use interfaces. I'm  focused, dedicated, hard-working and willing to learn in a changing and challenging environment.</p>
 22 |       <a href="https://www.facebook.com/velmurugan.pradeep.3?mibextid=ZbWKwL" target="_blank">
 23 |         <i class="fab fa-facebook-f"></i>
 24 |       </a>
 25 |       <a href="https://twitter.com/vel_pradeep?t=DiLySz9UVtyC_pIhxfQ6XA&s=09" target="_blank">
 26 |         <i class="fab fa-twitter"></i>
 27 |       </a>
 28 |       <a href="https://github.com" target="_blank">
 29 |         <i class="fab fa-github-alt"></i>
 30 |       </a>
 31 |       <a href="https://www.instagram.com/_the_pradeep_03_/" target="_blank">
 32 |         <i class="fab fa-instagram"></i>
 33 |       </a>
 34 |       <a href="https://www.linkedin.com/in/pradeep-vel-8b759a227" target="_blank">
 35 |         <i class="fab fa-linkedin-in"></i>
 36 |       </a>
 37 |     </section>
 38 |   </header>
 39 |   <main>
 40 |     <section>
 41 |       <h3>Courses & Workshops</h3>
 42 |       <article class='course'>
 43 |         <div class='title'>
 44 |           <h4>Udacity: Intro to HTML and CSS</h4>
 45 |         </div>
 46 |         <div class="descrition">
 47 |           <p>Build styled, well-structured websites. Learn how to use HTML5 standard to create websites. Understand CSS syntax, selectors, and units. Learn about code editors and a browser's Developer Tools.</p>
 48 |         </div>
 49 |       </article>
 50 |     </section>
 51 |     <section>
 52 |       <h3>Skills</h3>
 53 |       <div class='skills'>
 54 |         <div class='column'>
 55 |           <h4>Good knowledge</h4>
 56 |           <ul>
 57 |             <li>C</li>
 58 |             <li>C++</li>
 59 |             <li>HTML5</li>
 60 |             <li>Java</li>
 61 |           
 62 |           </ul>
 63 |         </div>
 64 |         <div class='column'>
 65 |           <h4>Basic knowledge</h4>
 66 |           <ul>
 67 |             <li>Digital Ectronics</li>
 68 |             <li>Radio frequency</li>
 69 |             <li></li>
 70 |           </ul>
 71 |         </div>
 72 |         <div>
 73 |           <h4>Languages</h4>
 74 |           <p>Tamil - Native speaker</p>
 75 |           <p>English </p>
 76 |           <p>Hindi</p>
 77 |         </div>
 78 |       </div>
 79 |       <div class='column'>
 80 |         <h4>Soft Skills</h4>
 81 |         <ul>
 82 |           <li>Leadership</li>
 83 |           <li>Team Work</li>
 84 |           <li>Adaptability</li>
 85 |           <li>Self Motivated</li>
 86 |          </ul>
 87 |       </div>
 88 |       <div class='column'>
 89 |         <h4>Area of Interest</h4>
 90 |         <ul>
 91 |           <li>Suffering on internet</li>
 92 |           
 93 |          </ul>
 94 |       </div>
 95 |       <div class='column'>
 96 |         <h4>Extra Curricular Activities</h4>
 97 |         <ul>
 98 |           <li>Project Team Leader (2022-2023)</li>
 99 |          </ul>
100 |       </div>
101 |     </section>
102 |     <h3>Projects</h3>
103 |       <article class='course'>
104 |         <div class='title'>
105 |           <h4>TERAHERTZ METAMATERIAL FOR 6G</h4>
106 |         </div>
107 |         <div class="descrition">
108 |           <p>A broadband terahertz antenna based on Metamaterial is designed. The
109 |             Metamaterial is etched in the ground plane to stimulate the generation of a new
110 |             resonant frequency.This work provides a way to
111 |             design the broadband terahertz antenna.</p>
112 |         </div>
113 |       </article>
114 |       <article class='course'>
115 |         <div class='title'>
116 |           <h4>METAMATERIAL BASED SUPERSTRATE ANTENNA FOR WLAN APPLICATION</h4>
117 |         </div>
118 |         <div class="descrition">
119 |           <p>A antenna with high return lose and gain by using the various material is considered to be good for the applications. 
120 |             In this existing method there will be a little data loss while transmitting the signal for a distance. 
121 |             The aim of the project is to increase the return loss and gain by introducing metamaterial by varying the slots of the parameter. 
122 |             The metamaterial has also etched to the ground of the antenna.  
123 |           </p>           
124 |         </div>
125 |       </article>
126 |     </section>
127 |     <section>
128 |       <h3>Education</h3>
129 |       <article>
130 |         <div class='school'>
131 |           <span>2014-2021</span> <strong>Bharani Park Matric Hr.Sec.School</strong>
132 |         </div>
133 |         <div class="College">
134 |          <span>2021-2025</span> <strong>Bechelor of Engineering (Electronics & Communication Engineering)</strong>
135 |         </div>
136 |       </article>
137 |     </section>
138 |   </main>
139 |   <footer>
140 |     <p>Created by: <a href="https://www.instagram.com/_the_pradeep_03_/">@pradeep_vel</a>  / <a href="https://www.linkedin.com/in/pradeep-vel-8b759a227">LinkedIn</a> / 2023 </p>
141 |   </footer>
142 | </body>
143 | </html>
144 | 


--------------------------------------------------------------------------------