Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.
Hier mein HTML code:
<body class="backgroundimage">
<div class="card">
<div class="search">
<button><img src="/images/SuchIcon.png"></button>
<input type="text" placeholder="Search" spellcheck="false"/>
</div>
</div>
<div class="weather">
<div class="center margin-top">
<img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />
</div>
<div>
<h1 class="temp">22°c</h1>
</div>
<div class="center">
<h2 class="city center margin-top">New York</h2>
</div>
<hr class="hr1 line1" />
<div id="imagesMain">
<img src="/images/image1.png" width="75" height="75" class="imageline "
<img src="/images/image1.png" width="75" height="75" class="imageline "
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"
</div>
<div>
<p style="color:black;"class="line0 title margin-left ">Monday</p>
<p style="color:black;"class="line0 title margin-left ">Tuesday</p>
<p style="color:black;"class="line0 title margin-left ">Wednesday</p>
<p style="color:black;"class="line0 title margin-left ">Thursday</p>
<p style="color: black;"class="line0 title margin-left ">Friday</p>
</div>
<hr class="hr1 line" />
<div class ="details">
<div class="col">
<img src="images/humidity.png"/>
<div>
<p class="speed">Humidity</p>
<p class="humidity">50%</p>
</div>
</div>
<div class="col">
<img src="images/wind.png" />
<div>
<p class="speed">Wind Speed</p>
<p class="wind">15 km/h </p>
</div>
</div>
</div>
</div>
</body>
hier mein Css code:
.backgroundimage {
background-image: url('../images/sun_background.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.cloud-background {
background-image: url('../images/cloud.png');
/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */
}
.card {
width: 90%;
max-width: 470px;
color: #fff;
margin: 10px auto 0;
border-radius: 20px;
}
.search{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.search input{
border: 0;
outline: 0;
background: #ebfffc;
color: #555;
padding: 10px 25px;
height: 60px;
border-radius: 30px;
flex: 1;
margin-right: 16px;
font-size: 18px;
}
.search button{
border: 0;
outline: 0;
background: #ebfffc;
border-radius: 60%;
width: 60px;
height: 60px;
cursor: pointer;
}
.weather-icon{
margin-bottom: -30px;
}
.weather h1 {
font-size: 80px;
font-weight: 500;
color: floralwhite;
}
.weather h2 {
font-size: 40px;
font-weight: 400;
margin-top: -10px;
color: floralwhite;
}
.details {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
margin-top: 50px;
}
.col {
display: flex;
align-items: center;
text-align: left;
margin-top: 150px;
}
.col img {
width: 20px;
margin-right: 20px;
margin-bottom: 70px
}
.humidity, .wind{
font-size: 28px;
margin-top: -6px;
color: floralwhite;
}
.speed{
font-weight: bold;
}
.temp {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.search button img{
width: 55%;
}
.center {
display: flex;
justify-content: center;
}
.top-left{
display: flex;
justify-content:left
}
.top-left
{
margin-left: 10px;
}
.margin-top{
margin-top: 20px;
}
.hr1 {
width: 390px;
height: 2px;
color: black;
}
.line{
margin-bottom: -100px;
margin-top: 10px;
}
.line1{
margin-top: 30px;
margin-bottom: -20px;
}
.line0{
margin-top: 70px;
margin-bottom: -90px;
font-size: 14px;
font-weight: bold;
color: black;
}
.imageline {
margin-top: 5px;
margin-bottom: -90px;
}
.imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
.imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
.title {
display: inline-block;
color: lightgray;
}
.margin-left{
margin-left: 14px;
}
Okay habe ich hinzugefügt, vielen Dank schon mal dafür :) Jetzt ist die SVG Datei zwar links aber ich bekomme sie nicht mittig. Ich würde die Weltkugel gerne mittig links haben... Was muss ich da hinzufügen?