|
28 | 28 | margin: 4px; |
29 | 29 | transition: 0.4s; |
30 | 30 | } |
| 31 | + @media only screen and (max-width:200px) { |
| 32 | + .sponsor-btn{ |
| 33 | + font-size: 12px !important; |
| 34 | + width: 90px !important; |
| 35 | + height: 46px !important; |
| 36 | + } |
| 37 | + .star-button{ |
| 38 | + font-size: 12px !important; |
| 39 | + width: 90px !important; |
| 40 | + } |
| 41 | +} |
| 42 | +@media only screen and (max-width:497px){ |
| 43 | +h1{ |
| 44 | + font-size: 40px !important; |
| 45 | +} |
| 46 | +.main-content{ |
| 47 | + gap: 30px; |
| 48 | +} |
| 49 | +} |
| 50 | +@media only screen and (max-width:347px){ |
| 51 | +h1{ |
| 52 | + font-size: 30px !important; |
| 53 | +} |
| 54 | +.get-started-btn{ |
| 55 | + position: relative; |
| 56 | + top: 60px; |
| 57 | +} |
| 58 | +} |
31 | 59 | </style> |
32 | 60 |
|
33 | 61 | </head> |
34 | 62 | <body> |
35 | 63 | <header> |
36 | 64 | <nav> |
37 | 65 | <a href="index.html"> |
38 | | - <div class="logo"> |
39 | | - <img src="HelpOps-H Fevicon.png" alt="Logo"> |
40 | | - </div> |
41 | | - </a> |
| 66 | + <div class="logo"> |
| 67 | + <img src="HelpOps-H Fevicon.png" alt="Logo"> |
| 68 | + </div> |
| 69 | + </a> |
| 70 | + |
42 | 71 | <ul class="nav-links"> |
43 | 72 | <li><a href="index.html">Home</a></li> |
44 | 73 | <li><a href="#">About</a></li> |
45 | 74 | <li><a href="contributor.html">Team</a></li> |
46 | 75 | <li><a href="#">Contact</a></li> |
47 | 76 | </ul> |
| 77 | + |
48 | 78 | <div class="nav-actions"> |
49 | 79 | <a href="https://github.com/sponsors/mdazfar2"> |
50 | 80 | <button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button> |
|
62 | 92 | <li><a href="#">About</a></li> |
63 | 93 | <li><a href="contributor.html">Team</a></li> |
64 | 94 | <li><a href="#">Contact</a></li> |
65 | | - <li class="isDisplay"> |
66 | | - <a href="https://github.com/sponsors/mdazfar2"> |
67 | | - <button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button> |
68 | | - </a> </li> |
| 95 | + |
69 | 96 | </ul> |
70 | 97 | <main> |
71 | 98 | <div class="main-content"> |
72 | | - |
73 | | - <button class="star-button"> |
74 | | - <i class="star-icon"><i class="fas fa-star"></i></i> <!-- This is a star character --> |
75 | | - Star Us |
76 | | - </button> |
77 | | - |
| 99 | + <div class="conte"> |
| 100 | + |
| 101 | + <button class="star-button"> |
| 102 | + <i class="star-icon"><i class="fas fa-star"></i></i> <!-- This is a star character --> |
| 103 | + Star Us |
| 104 | + </button> |
| 105 | + <li class="isDisplay"> |
| 106 | + <a href="https://github.com/sponsors/mdazfar2"> |
| 107 | + <button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button> |
| 108 | + </a> </li> |
| 109 | + </div> |
78 | 110 | <h1>HelpOps-Hub</h1> |
79 | 111 | <p>Ensuring You Never Get Stuck In DevOps Again!</p> |
80 | 112 | <a href="resources.html"> |
|
0 commit comments