Could anyone help me please, my image is'nt loading and also the content is aligned in bottom of the page.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title> Informative Website </title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Jost&family=Nunito:wght@300&family=Poppins:wght@300&family=Raleway&display=swap');
body{
background-color: black;
}
.top{
text-align: center;
align-content: center;
justify-content: center;
}
.topnav{
margin-top: 10px;
display: flex;
align-content: center;
justify-content: center;
padding: 10px;
text-decoration: none;
border-bottom: 1.5px solid #0081ff;
border-top: 1.5px solid #0081ff;
font-family: "Raleway";
}
.topnav a:hover {
border-bottom: 1.5px solid #0081ff;
}
.topnav a::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.75px;
background-color: #0081ff;
transition: width 0.5s;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.topnav a:hover::after {
width: 100%;
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.header {
flex-direction: column;
}
.topnav {
flex-direction: column;
}
.logo {
margin-bottom: 10px;
}
}
a{
position: relative;
margin-left: 20px;
margin-right: 20px;
text-decoration: none;
color: white;
font-family: "Raleway";
width: 100px;
}
.i{
height: 100px;
width: 100px;
}
.dds-txt{
font-family: "Nunito";
text-align: center;
color: white;
}
.please-help-me{
text-align: center;
margin-top: 50px;
}
.search{
width: 500px;
height: 40px;
border-top: 1.5px solid #0081ff;
border-bottom: 1.5px solid #0081ff;
text-align: center;
color: white;
font-family: 'Nunito';
background-color: transparent;
border-left : 0px solid white;
border-right: 0px solid white;
}
.search:hover{
width: 650px;
border-top: 1.5px solid #0081ff;
border-bottom: 1.5px solid #0081ff;
border-left : 0px solid white;
border-right: 0px solid white;
box-shadow: -2px 2px 50px -7.5px #0081ff;
transition-duration: 400ms;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
header{
background-repeat: no-repeat;
background-size: cover;
height: 800px;
}
.s{
font-family: "Poppins";
color: white;
margin-right: 10px;
}
footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #000000;
color: #ffffff;
font-size: 14px;
font-family: "Nunito", sans-serif;
margin-top: 100px;
font-weight: 20px;
color: white;
font-size: 15px;
background-color: white;
display: flex;
font-family: "Fredoka";
height: auto;
text-decoration: none;
color: black;
margin-top: auto;
position: fixed;
bottom: 0;
width: 100%;
}
footer-left {
flex: 1;
}
.youtube-button {
display: inline-block;
padding: 8px 20px;
font-size: 16px;
color: #007bff;
border: 2px solid #007bff;
background-color: transparent;
text-align: center;
border-radius: 99px;
border-style: solid;
width: 150px;
text-decoration: none;
margin-right: 20px;
}
.main-container {
display: flex;
align-items: center;
padding: 40px;
}
.image-container img {
max-width: 500px;
height: auto;
border-radius: 20px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.605);
text-align: right;
}
.text-container {
padding:30px;
}
@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');
.heading {
font-family: "Jost";
font-size: 36px;
margin-bottom: 20px;
color: white;
}
.sub-heading {
font-size: 18px;
line-height: 1.6;
margin-bottom: 30px;
color: white;
font-family: "Nunito";
}
.button-container {
text-align: left;
}
.hire-button {
border: 2px solid #0081ff;
border-radius: 999px;
background-color: transparent;
color: #0081ff;
font-size: 18px;
padding: 10px 30px;
text-decoration: none;
display: inline-block;
width: 200px;
text-align: center;
margin-right: 50px;
margin-bottom: 50px;
font-family: "Nunito";
}
.hire-button:hover{
background-color: #0081ff;
border-color: white;
color: black;
transform: translateY(5);
transition-duration: 350ms;
box-shadow: 0px 0px 200px -10px #0081ff;
}
@import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap');
.youtube-button:hover {
box-shadow: 0 0 100px -2px #007bff;
transition-duration: 300ms;
background-color: transparent;
border-color: #007bff;
color: #007bff;
}
html, body {
height: 100%;
}
.c{
color: black;
}
</style>
<header>
<div class="top">
<div class="topnav-before">
<img class="i"src="https://lh3.googleusercontent.com/fife/AKsag4PQSNb5QpX5PuySenEVRH2dh05j7idtuNGXQ8LTdO3XCeU5fY3eDlo7lgF1f_8dLnWG4uniilxRbudM0Ilg3Gp5pNaNer-FYBQQ11Y3acdABEBtDekXsX4iW39JQbMFVyJVQPRKzyX-ga64UZkU1cMme6laxwJeymFUl_kap2DCG9e-8CNn8K9oQLyP1jYPX93jbvXFZ0FddeKgAzghg2XsRV1__UXu_5-pFsGVrKyIqhQzGUNjQD1Xx4gtkBpbkuUqJ1uXgUQkfekkgdmFlu9IunsC6EXHXQs-FFcGgOTnaOJ8F0MICjhMHn6gh0sX3l8JOkSqxr2oHNyfMyD1y1_guVxdatU0q_lzfNxSKHZykKK7sdfgz649KDqi_5jLFcEd3o2WFs1ePe5qMzQ_aT1_M3lXBhTrYwutc5toiBgO_yFRls_Sp-aYY_XSp2_I05gy4kbOoEc1kK6yAEN1-NtdpHMg49qRVgCycutxlVRGsNXK0BvwRa1VXcjlwsGQYzW4yvGDtV65cYSv-4OPaICq9WzWnekBrdcJNitCJ2Ah2bKupXZidAdjsimQvnUArw2Q1YMZXBuU0-YvFi3ENrhy6lIBlvnQzZzl2noNkm1ZdN0WdTcWRj1q8GE8dx6cGNf0X70wRIWIhkQJ7NT2adSSz84sopggbKnmlfv7OUT1keIBnwzoTg7Je4V0Xt-U0bIWTRPDv4lw8IS17NFsJeyFnMfzY5F0idogk14m5eXwOIdl4IAvZgJz_OQ8heGyZbyHYUsfv7CSSMS4ONWC8sDaTHAExGdrxlwtk1q2k_5ek2fNaivOBAc5iFTv4sRiInbaFxeQYj3Yvpx6iPFXMckiKjwzRUVfcRUnggFpn-malGwqkv1AahNuK5hKExgvJDt2JxL0Sw5cWRcPlbipW0GDzyw1nYdLjrWw8UdwqfHZVh2pzxmtjSvPlDFnlqJ1q3qdfWiwJCFob8tIJa0FRzTcneDfyAK7NMWKBd35XfExBv33-OztpFPI2TYBygEU_Hhvl4FK4jfks1jvQH5Il5RlWKjpUH16HXRnEWw6xH5dlNmFdvuNywoFvmdFr-1qZtbz6NmEj2j7FA0Hr02OlXGxWEkuWOtbA0XI4IdlAuo7VOXXuEXzwteNI47LxRweWStuFhLPJgywLZi2ZCZegD29sw1oJcHEYy0r49MdQjhocRvmAdVcXKOvmkawW2aJ_NiWIpWR0epDf0wbZXXSj-bGG_w-eiF1eL54lYwzyKTLkbQJJ-O3asKbSMKz_rxX-BlXiXqg4CeXy1irh6skpjvcJRCZjjS1Ng5mXKA8Bi_0lKVj72fzUPa9B9J0iTYHlThVK44d6ye6ov8cfCfL339Xo5jkrjVl_mZAyFlHrU0WDcPbvRrVaKxS6aRpL_YRFs2j3AJDKP9lwRaYBPHBBfwUVgKwBgDiGQB_FG33ijw1QKNf9jgu9Z6NNbSm_917IVzCTB8PWjwf-ianqfKM5RuC0wpHzSO9d9Rg29ZQYgjEyc7KJyjf_ToFD-ImXbeVgRyhQ7SXQ5M0Wk6qMdIP4gc6_94hxxVrwgg=s947-w947-h947-s-no?authuser=0">
</div>
<div class="topnav">
<div class="t">
<a href="#home">HOME</a>
<a href="#about-us">ABOUT US</a>
<a href="#services">SERVICES</a>
</div>
</div>
</div>
</header>
<div class="main-container">
<div class="image-container">
<img src="https://lh3.googleusercontent.com/fife/AKsag4PQSNb5QpX5PuySenEVRH2dh05j7idtuNGXQ8LTdO3XCeU5fY3eDlo7lgF1f_8dLnWG4uniilxRbudM0Ilg3Gp5pNaNer-FYBQQ11Y3acdABEBtDekXsX4iW39JQbMFVyJVQPRKzyX-ga64UZkU1cMme6laxwJeymFUl_kap2DCG9e-8CNn8K9oQLyP1jYPX93jbvXFZ0FddeKgAzghg2XsRV1__UXu_5-pFsGVrKyIqhQzGUNjQD1Xx4gtkBpbkuUqJ1uXgUQkfekkgdmFlu9IunsC6EXHXQs-FFcGgOTnaOJ8F0MICjhMHn6gh0sX3l8JOkSqxr2oHNyfMyD1y1_guVxdatU0q_lzfNxSKHZykKK7sdfgz649KDqi_5jLFcEd3o2WFs1ePe5qMzQ_aT1_M3lXBhTrYwutc5toiBgO_yFRls_Sp-aYY_XSp2_I05gy4kbOoEc1kK6yAEN1-NtdpHMg49qRVgCycutxlVRGsNXK0BvwRa1VXcjlwsGQYzW4yvGDtV65cYSv-4OPaICq9WzWnekBrdcJNitCJ2Ah2bKupXZidAdjsimQvnUArw2Q1YMZXBuU0-YvFi3ENrhy6lIBlvnQzZzl2noNkm1ZdN0WdTcWRj1q8GE8dx6cGNf0X70wRIWIhkQJ7NT2adSSz84sopggbKnmlfv7OUT1keIBnwzoTg7Je4V0Xt-U0bIWTRPDv4lw8IS17NFsJeyFnMfzY5F0idogk14m5eXwOIdl4IAvZgJz_OQ8heGyZbyHYUsfv7CSSMS4ONWC8sDaTHAExGdrxlwtk1q2k_5ek2fNaivOBAc5iFTv4sRiInbaFxeQYj3Yvpx6iPFXMckiKjwzRUVfcRUnggFpn-malGwqkv1AahNuK5hKExgvJDt2JxL0Sw5cWRcPlbipW0GDzyw1nYdLjrWw8UdwqfHZVh2pzxmtjSvPlDFnlqJ1q3qdfWiwJCFob8tIJa0FRzTcneDfyAK7NMWKBd35XfExBv33-OztpFPI2TYBygEU_Hhvl4FK4jfks1jvQH5Il5RlWKjpUH16HXRnEWw6xH5dlNmFdvuNywoFvmdFr-1qZtbz6NmEj2j7FA0Hr02OlXGxWEkuWOtbA0XI4IdlAuo7VOXXuEXzwteNI47LxRweWStuFhLPJgywLZi2ZCZegD29sw1oJcHEYy0r49MdQjhocRvmAdVcXKOvmkawW2aJ_NiWIpWR0epDf0wbZXXSj-bGG_w-eiF1eL54lYwzyKTLkbQJJ-O3asKbSMKz_rxX-BlXiXqg4CeXy1irh6skpjvcJRCZjjS1Ng5mXKA8Bi_0lKVj72fzUPa9B9J0iTYHlThVK44d6ye6ov8cfCfL339Xo5jkrjVl_mZAyFlHrU0WDcPbvRrVaKxS6aRpL_YRFs2j3AJDKP9lwRaYBPHBBfwUVgKwBgDiGQB_FG33ijw1QKNf9jgu9Z6NNbSm_917IVzCTB8PWjwf-ianqfKM5RuC0wpHzSO9d9Rg29ZQYgjEyc7KJyjf_ToFD-ImXbeVgRyhQ7SXQ5M0Wk6qMdIP4gc6_94hxxVrwgg=s947-w947-h947-s-no?authuser=0" alt="DevDynamos Image">
</div>
<div class="text-container">
<div class="heading">DEVDYNAMOS</div>
<div class="sub-heading">
Journey through the enigmatic realm of DevDynamos, where reality fractures and digital dreams manifest. Unleashing websites steeped in ethereal enchantment, designs born from hypothetical realms, and animations that whisper enigmatic secrets. Enter the labyrinth of infinite creativity and mystery.
</div>
<div class="button-container">
<a href="#" class="hire-button">HIRE US</a>
<a href="#" class="hire-button">CONTACT</a>
</div>
</div>
</div>
<footer>
<label class="c"> Developed by DevDynamos | Contact: devdynamos.co@gmail.com |</label>
<a href="https://www.youtube.com/@devdynamos-co" class="youtube-button">YouTube</a>
</footer>
</body>
</html>
{% embed %}
Top comments (3)
For the problem rendering Images please use a short and direct link or else save the image on your local environment and use it [you are using image directly on from some googleusercontent with inifinitly long string of link hence the problem is the src url you have used]. For the which is showing the botton not just after the header ends.
Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:
... to specify the language:
More details in our editor guide!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.