└── HTML-CSS-CV-demo-master └── HTML-CSS-CV-demo-master ├── README.md ├── img ├── avatar.jpg ├── bg.jpg ├── favicon.ico └── resume_icon.png ├── index.html └── style.css /HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/README.md: -------------------------------------------------------------------------------- 1 |
2 |

Oh, So Simple HTML CV!

3 | 4 | Simple HTML CV 5 | 6 | HTML and CSS template for your outstanding job applications 7 |
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/HTML-CSS-CV-demo-master/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PradeepVelmurugan/pradeepvel/74058cd7b12f97b9293d55e8ff115f3e51d0d441/HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/img/avatar.jpg -------------------------------------------------------------------------------- /HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PradeepVelmurugan/pradeepvel/74058cd7b12f97b9293d55e8ff115f3e51d0d441/HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/img/bg.jpg -------------------------------------------------------------------------------- /HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PradeepVelmurugan/pradeepvel/74058cd7b12f97b9293d55e8ff115f3e51d0d441/HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/img/favicon.ico -------------------------------------------------------------------------------- /HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/img/resume_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PradeepVelmurugan/pradeepvel/74058cd7b12f97b9293d55e8ff115f3e51d0d441/HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/img/resume_icon.png -------------------------------------------------------------------------------- /HTML-CSS-CV-demo-master/HTML-CSS-CV-demo-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CV - Pradeep 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |

Pradeep Velmurugan

20 |
21 |

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.

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |

Courses & Workshops

42 |
43 |
44 |

Udacity: Intro to HTML and CSS

45 |
46 |
47 |

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.

48 |
49 |
50 |
51 |
52 |

Skills

53 |
54 |
55 |

Good knowledge

56 |
    57 |
  • C
    • 58 |
  • C++
    • 59 |
  • HTML5
    • 60 |
  • Java
    • 61 | 62 |
63 |
64 |
65 |

Basic knowledge

66 |
    67 |
  • Digital Ectronics
    • 68 |
  • Radio frequency
    • 69 |
70 |
71 |
72 |

Languages

73 |

Tamil - Native speaker

74 |

English

75 |

Hindi

76 |
77 |
78 |
79 | 80 |
81 |

Education

82 |
83 |
84 | 2014-2021 Bharani Park Matric Hr.Sec.School 85 |
86 |
87 | 2021-2025 Bechelor of Engineering (Electronics & Communication Engineering) 88 |
89 |
90 |
91 |
92 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /HTML-CSS-CV-demo-master/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/bg.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 | --------------------------------------------------------------------------------