├── README.md ├── READ !!!.txt ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio -------------------------------------------------------------------------------- /READ !!!.txt: -------------------------------------------------------------------------------- 1 | DONT FORGET TO LIKE ,SUBSCRIBE MY CHANNEL. THANK YOU!!! -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Portfolio 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | certifications 13 | my projects 14 | skills 15 | profile 16 | 17 |
18 | 19 |
20 |

Hi, I'm NANDHINI J.

21 |

CSE STUDENT

22 |

Pursuing B.E-COMPUTER SCIENCE AND ENGINEERING at 23 |
M.KUMARASAMY COLLEGE OF ENGINEERING,KARUR.
24 |
Interested in Front end development

25 | Contact Me 26 |
27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .main{ 7 | width: 100%; 8 | background: url(pic/bg.jpeg); 9 | background-position: center; 10 | background-size: cover; 11 | height: 100vh; 12 | position: relative; 13 | font-family: sans-serif; 14 | } 15 | 16 | .navbar{ 17 | width: 86%; 18 | display: flex; 19 | margin: auto; 20 | padding: 15px 0; 21 | align-items: center; 22 | justify-content: space-between; 23 | } 24 | 25 | .navbar .logo{ 26 | width: 160px; 27 | cursor: pointer; 28 | margin-top: -3%; 29 | margin-left: -2%; 30 | } 31 | 32 | ul{ 33 | margin-top: -4%; 34 | } 35 | 36 | ul li{ 37 | list-style: none; 38 | display: inline-block; 39 | padding: 10px 16px; 40 | } 41 | 42 | ul li a{ 43 | font-size: 16px; 44 | font-weight: bold; 45 | text-decoration: none; 46 | color: darkslategray; 47 | margin-top: -3%; 48 | transition: .4s ease; 49 | 50 | } 51 | 52 | ul li a:hover{ 53 | color: rgb(230,104,59); 54 | } 55 | 56 | .info{ 57 | margin-left: 7%; 58 | margin-top: 6%; 59 | } 60 | 61 | .info h1{ 62 | font-size: 65px; 63 | color: rgb(36,32,30); 64 | } 65 | 66 | .info h3{ 67 | font-size: 18px; 68 | letter-spacing: 1px; 69 | line-height: 24px; 70 | } 71 | 72 | .info span{ 73 | color: rgb(230,104,59); 74 | } 75 | 76 | .info a{ 77 | text-decoration: none; 78 | color: #fff; 79 | background: rgb(36,32,30); 80 | margin: 26px 0; 81 | padding: 10px 18px; 82 | border-radius: 10px; 83 | display: inline-block; 84 | transition: .4s ease; 85 | } 86 | 87 | .info a:hover{ 88 | background: rgb(59,174,209); 89 | } 90 | 91 | .image{ 92 | width: 30%; 93 | height: 60%; 94 | position: absolute; 95 | right: 100px; 96 | bottom: 0; 97 | } 98 | 99 | .image img{ 100 | position: absolute; 101 | height: 140%; 102 | left: 40%; 103 | transform: translate(-55%); 104 | bottom: 0; 105 | transition: left 2s ease; 106 | } 107 | 108 | .image:hover .girl{ 109 | left: 55%; 110 | } 111 | 112 | .icons a{ 113 | text-decoration: none; 114 | color: #000; 115 | } 116 | 117 | .icons ion-icon{ 118 | margin-left: 7%; 119 | color: #000; 120 | margin-right: -60px; 121 | font-size: 40px; 122 | transition: .4s ease; 123 | 124 | } 125 | 126 | .icons ion-icon:hover{ 127 | color: rgb(59,174,209); 128 | } 129 | --------------------------------------------------------------------------------