I am comparatively new to coding and at the moment studying HTML and CSS. As you may observe, I am within the means of constructing a portfolio web site. I’ve encountered a number of minor points with my code and will use some help in resolving them, please.
- The problem I am encountering is that after I scale back the scale of my web page to simulate a cell phone display, it turns into responsive, however not all of the textual content and pictures resize appropriately. I would like each the textual content and pictures to be responsive together with the web page. I hope that is smart.
2. I have been making an attempt for days to remodel this sq. field right into a round border, however I’ve had no luck up to now.
3. The ultimate challenge I am encountering is with my footer on the backside of the web page. I have been attempting to push the textual content “2024 made with by msk” a bit additional down, however my makes an attempt have been unsuccessful up to now.
Any steering could be vastly appreciated! Thanks a lot.
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<title>#</title>
<hyperlink rel="stylesheet" href="NEWMSK2.css">
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.web/npm/[email protected]/font/bootstrap-icons.css" />
<hyperlink rel="shortcut icon" href="msk12.jpg" kind="picture/jpg">
</head>
<physique>
<nav class="header">
<a href="https://stackoverflow.com/questions/78188311/NEWMSK.html" class="brand"><img src="#" alt="brand"></a>
<ul class="main-nav">
<li><a href="#">Contact Me</a></li>
<li><a href="Venture.html">Initiatives</a></li>
<li><a href="Expertise.html">Expertise</a></li>
<li><a href="Schooling.html">Schooling</a></li>
<li><a href="NEWMSK.html">House</a></li>
</ul>
</nav>
<div class="content material">
<div class="identify">
<h1>#<span> #</span>
<span class="emoji">👋🏾</span></h1>
<h2> (You possibly can name me )</h2>
<p>
Devoted software program developer with a ardour for AI and internet improvement.<br> Just lately graduated from Buckinghamshire New College with a level in Airport </br> and Airline Administration.Dedicated to leveraging revolutionary know-how to create optimistic <br>change on this planet.</br>
</p>
<p>
<a category="rounded-button" href="#">
<ion-icon identify="logo-instagram" dimension="giant"></ion-icon> </a>
<a category="rounded-button" href="#">
<ion-icon identify="logo-linkedin" dimension="giant"></ion-icon> </a>
<a category="rounded-button" href="#">
<ion-icon identify="logo-github" dimension="giant"></ion-icon>
</a>
<a category="rounded-button" href="#">
<ion-icon identify="mail-outline" dimension="giant"></ion-icon> </a>
<a category="rounded-button" href="#">
<ion-icon identify="logo-youtube" dimension="giant"></ion-icon> </a>
</p>
<a href="#">See My Resume</a>
</div>
<div class="pictures">
<img src="blob.svg" class="blob">
<img src="newpicofme.png" class="image">
</div>
<div class="footer-bottom">
<p> ©2024 Made with ❤️ by<span> Msk</span></p>
</div>
</div>
<script kind="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</physique>
</html>
right here is my css code:
physique {
margin: 0;
padding: 0;
border: 0;
font-family: Hoefler Textual content;
background-color: rgb(233, 245, 248);
}
header {
margin: 3% 10%;
padding: 37px 0;
show: flex;
justify-content: space-between;
align-items: middle;
}
@media display and (max-width: 768px) {
header {
margin: 3% 5%;
}
.brand img {
max-width: 250px;
}
}
.brand img {
max-width: 550px;
}
.main-nav {
font-size: 20px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00BFFF;
}
.main-nav li {
float: proper;
}
.main-nav li a {
show: block;
colour: #ffffff;
text-align: middle;
padding: 10px 12px;
text-decoration: none;
}
.main-nav li:hover {
background: #D3D3D3;
}
.identify {
margin-left: 5%;
margin-top: 8%;
}
.identify h1 {
font-size: 50px;
colour: #030303;
margin-bottom: 20px;
}
span {
colour: #00BFFF;
}
.identify p {
colour: rgb(122, 122, 145);
line-height: 22px;
font-size: 20px;
margin: 1px;
}
.identify h2 {
colour: rgb(3, 3, 3);
margin-bottom: 20px;
}
.identify a {
background-color: #00BFFF;
padding: 10px 18px;
text-decoration: none;
font-weight: daring;
colour: rgb(246, 246, 250);
show: inline-flex;
margin: 30px 0;
border-radius: 5px;
transition: background 0.2s;
cursor: pointer;
}
.identify a:hover {
background: #D3D3D3;
}
.emoji {
show: inline-block;
flex-direction: column;
justify-content: middle;
align-items: middle;
peak: 50px;
font-size: 50px;
animation: waving-hands 1.5s infinite;
transform-origin: 70% 70%;
}
@keyframes waving-hands {
0% {
remodel: rotate(0deg);
}
10% {
remodel: rotate(14deg);
}
20% {
remodel: rotate(-8deg);
}
30% {
remodel: rotate(14deg);
}
40% {
remodel: rotate(-4.0deg);
}
50% {
remodel: rotate(10deg);
}
60% {
remodel: rotate(0deg);
}
100% {
remodel: rotate(0deg);
}
}
.rounded-button {
show: inline-flex;
align-items: middle;
justify-content: middle;
width: 45px;
peak: 45px;
background: #00BFFF;
colour: rgb(246, 250, 250);
cursor: pointer;
font-size: 20px;
padding: 0;
border-radius: 20%;
border: none;
text-decoration: none;
transition: background 0.2s;
}
.rounded-button:hover {
background: #D3D3D3;
}
.pictures {
width: 50%;
peak: 60%;
place: absolute;
backside: 150px;
proper: 100px;
}
.pictures img {
peak: 100%;
place: absolute;
left: 70%;
backside: 0;
remodel: translateX(-50%);
transition: backside 1s, left 1s;
}
.pictures:hover .blob {
backside: 40px;
}
.pictures:hover .image {
left: 45%;
}
.footer-bottom {
background: rgb(233, 245, 248);
padding: 20px ;
place: relative;
text-align: middle;
backside: 20px;
width: 100%;
}
.footer-bottom p {
font-size: 15px;
word-spacing: 2px;
text-transform: capitalize;
}
I attempted every part however no fortunate
