├── style.css └── hello.html /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Arial', sans-serif; 6 | } 7 | 8 | body { 9 | line-height: 1.6; 10 | background-color: #f9f9f9; 11 | color: #333; 12 | } 13 | 14 | .container { 15 | width: 90%; 16 | max-width: 1100px; 17 | margin: auto; 18 | padding: 20px 0; 19 | } 20 | 21 | header { 22 | background: #333; 23 | color: #fff; 24 | padding: 20px 0; 25 | } 26 | 27 | header h1 { 28 | display: inline-block; 29 | } 30 | 31 | nav { 32 | float: right; 33 | } 34 | 35 | nav a { 36 | color: #fff; 37 | text-decoration: none; 38 | margin-left: 20px; 39 | } 40 | 41 | .hero { 42 | background: #007BFF; 43 | color: white; 44 | padding: 60px 0; 45 | text-align: center; 46 | } 47 | 48 | .about, .projects, .contact { 49 | padding: 40px 0; 50 | } 51 | 52 | .projects .project-grid { 53 | display: grid; 54 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 55 | gap: 20px; 56 | margin-top: 20px; 57 | } 58 | 59 | .project-card { 60 | background: #fff; 61 | padding: 20px; 62 | border: 1px solid #ccc; 63 | } 64 | 65 | footer { 66 | background: #333; 67 | color: #fff; 68 | text-align: center; 69 | padding: 20px 0; 70 | margin-top: 40px; 71 | } 72 | 73 | /* Responsive */ 74 | @media (max-width: 768px) { 75 | nav { 76 | float: none; 77 | text-align: center; 78 | margin-top: 10px; 79 | } 80 | 81 | nav a { 82 | display: block; 83 | margin: 10px 0; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /hello.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Portfolio 7 | 8 | 9 | 10 | 11 |
12 |
13 |

sri sanjana

14 | 19 |
20 |
21 | 22 |
23 |
24 |

Hello, I'm srisanjana

25 |

Web Developer & Designer

26 |
27 |
28 | 29 |
30 |
31 |

About Me

32 |

I’m a passionate web developer with experience in building responsive and dynamic websites using HTML, CSS, and JavaScript.

33 |
34 |
35 | 36 |
37 |
38 |

Projects

39 |
40 |
41 |

Project One

42 |

Description of the project.

43 |
44 |
45 |

Project Two

46 |

Description of the project.

47 |
48 |
49 |

Project Three

50 |

Description of the project.

51 |
52 |
53 |
54 |
55 | 56 |
57 |
58 |

Contact

59 |

Email: srisanjana698@gmail.com

60 |

LinkedIn: linkedin.com/in/johndoe

61 |
62 |
63 | 64 | 69 | 70 | 71 | 72 | --------------------------------------------------------------------------------