Upload New File

weatherstyle.css

+@font-face {
+    font-family: 'Roboto';
+    src: url(fontd/Roboto.ttf);
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+.header-container {
+    padding: 20px;
+    text-align: center;
+    background-color: #1e1e2d; 
+    color: white;
+}
+
+
+nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav ul li {
+    display: inline-block;
+    margin: 0 10px;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: white;
+}
+
+.thin-line {
+    height: 2px; 
+    background-color: white;
+    width: 100%; 
+    margin-top: 10px;
+    border: none;
+}
+
+
+.hero {
+    background-color: #1e1e2d; 
+    color: white;
+    padding: 50px 20px;
+    display: flex; 
+    justify-content: space-between;
+    align-items: center; 
+    flex-wrap: nowrap; 
+}
+
+.hero-text {
+    flex: 1;
+    margin-right: 20px;
+    text-align: left; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 50%; 
+}
+
+.hero-text h2 {
+    margin-bottom: 20px; 
+}
+
+.hero-image {
+    flex: 1; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #6c757d; 
+    color: white;
+    width: 100%;
+    height: 200px; 
+    max-width: 400px; 
+}
+
+.btn {
+    display: inline-block;
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    margin-top: 20px; 
+    align-self: start; 
+}
+
+@media (max-width: 768px) {
+    .hero {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .hero-text {
+        margin-right: 0;
+        max-width: 100%;
+    }
+
+    .hero-image {
+        margin-top: 20px;
+        max-width: 100%; 
+    }
+}
+
+.information {
+    padding: 50px;
+    text-align: center;
+}
+
+.info-cards {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 50px;
+    max-width: 1200px;
+    margin: 0 auto; 
+}
+
+.card {
+    width: 45%;
+    padding: 20px;
+    background-color: #f0f0f0;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); 
+}
+
+.card p {
+    text-align: left;
+}
+
+.image-placeholder {
+    background-color: #999;
+    height: 100px;
+    width: 100px;
+    margin: 0 auto 20px;
+}
+
+.quote {
+    background-color: #eee;
+    padding: 50px;
+    text-align: center;
+    font-style: italic;
+}
+
+.quote blockquote {
+    font-size: 1.2rem;
+}
+
+.cta {
+    background-color: #007bff;
+    color: white;
+    padding: 40px;
+    text-align: center;
+    margin-top: 40px; 
+}
+
+.cta h4 {
+    margin: 0 0 10px;
+}
+
+.cta button {
+    padding: 10px 20px;
+    border: none;
+    background-color: white;
+    color: #007bff;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.cta button:hover {
+    background-color: #0056b3;
+    color: white;
+}
+
+footer {
+    background-color: #1e1e2d; 
+    color: white;
+    text-align: center;
+    padding: 20px;
+    border: none;
+}
+
+.btn {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+
+.weather-section {
+    padding: 50px;
+    text-align: center;
+}
+
+.weather-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 50px;
+    max-width: 1200px;
+    margin: 0 auto; 
+}
+
+.weather-card {
+    width: 45%;
+    padding: 20px;
+    background-color: #f0f0f0;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px; 
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); 
+}
+
+.weather-card p {
+    text-align: left;
+}