<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="The official website for web designer Anas Lasheen ">
<meta name="author" content="Anas Lasheen">
<title>Anas Lasheen</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
<main>
<section id="header">
<div id="branding">
<h1 ><a href="index.html"> <a href="index.html"><img src="/img/letter-a (1).png" alt="page icon"></a> </a></h1>
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="gallery.html">Portfolio</a></li>
<li>Services</li>
<li><a target="_blank" href="https://www.linkedin.com/in/anas-lasheen-5104981a6/">Linkedin</a></li>
<li><a target="_blank" href="https://dribbble.com/RAGNAR_VI">Dribbble</a></li>
<li>Contact</li>
</ul>
</nav>
</section>
<section id="showcase">
<h1>Hello there!</h1>
<p> Fulled by a passion for designing compelling <br>
products,I have a deep desire to excel and <br>
continuously improve in my work.Learn more about <br>
my journey below.</p>
<img src="/img/1634485372473.jpg" alt="anasphoto" class="myimg">
</section>
<section id="newsletter">
</section>
<section id="boxes">
</section>
<section id="footer">
</section>
</main>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Space+Mono&display=swap');
body
{
font-family: 'Space Mono', monospace;
padding: 0;
margin: 0;
background-color: #ffffff;
direction: ltr;
}
main
{
display: flex;
flex-wrap: wrap;
}
main>section {
width: 100%;
margin: auto;
overflow: hidden;
}
#header
{
background: #ffffff;
display: flex;
flex-flow: row wrap;
justify-content: left;
align-content: center;
align-items: center;
padding: 0px 40px;
}
#branding h1
{
font-size: 20px;
}
#branding h1 img
{
width: 50px;
height: 50px;
}
nav >ul
{
margin-top: 0px;
list-style-type:none;
}
#header a
{
color: rgb(3, 2, 2);
text-decoration: none;
}
nav > ul > li
{
float:left;
margin-left: 20px;
margin-right: 10px;
position: relative;
left: 1150px;
bottom: 10px;
}
li a
{
text-decoration: none;
color: whitesmoke;
}
#header .highlight, #header .current a
{
color: rgb(3, 2, 2) ;
}
#showcase .myimg
{
border-radius: 50%;
position: absolute;
top: 110px;
left: 300px;
}
#showcase h1
{
font-size: 50px;
padding-left: 700px;
}
#showcase p
{
font-size: 25px;
opacity: .6;
padding-left: 700px;
}
لا استطيع وضع الصورة بجوار النصوص وقد قمت بتجريب جميع الطرق بلغة css ولكن نفس المشكلة
