Scribd
Upload
18 views4 pages

Ahmed

Uploaded by

bodymkadry
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views4 pages

Ahmed

Uploaded by

bodymkadry
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>SİNAV PROFİLE</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="LOGO.jpg" alt="Logo">
</div>
<ul class="nav-links">
<li><a href="#about">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="container">
<div class="profile">
<img src="OIP.jpeg" alt="Profile Picture" class="profile-
img">
<h1>AHMED SOLIMAN</h1>
<p>Web Developer - Web Designer</p>
<p class="description">THE <b>LIFE</b> IS <b>HOW TO</b>
REACT ABOUT FEELINGS.</p>
<div class="buttons">

<button>OZGECMIS</button>
<button>ILETSIM</button>
</div>
</div>
</div>
<div class="myclass">

<input type="button" value="HAKKIMIZDA">


<input type="button" value="PROJELERİM">
</div>
</body>
</html>
body {
margin: 0;
font-family: Arial, sans-serif;
background: url('R.jpg') no-repeat center center fixed;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}

.navbar {
width: 100%;
background-color:NONE;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
z-index: 1000;
}

.logo img {
width: 50px;
height: 50px;
}

.nav-links {
list-style: none;
display: flex;
margin: 0;
padding: 0;

.nav-links li {
margin: 0 15px;
}

.nav-links a {
text-decoration: none;
color: white;
font-size: 1em;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: yellow;
}

.container {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
width: 300px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
margin-top: 200px;
}

.profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
}

h1 {
margin: 10px 0;
font-size: 1.5em;
}

.description {
color: black;
font-size: 20px;
margin: 10px 0;
font-weight: 10px;
}

.buttons button {
margin: 5px;
padding: 10px 20px;
border: none;
background-color: gold;
color: white;
font-size: 1em;
border-radius: 20px;
cursor: pointer;
}

.buttons button:hover {
background-color:black;
}
.myclass input{

margin-top: 60px;
margin-left: 10px;
padding: 10px 20px;
background-color: rgb(7, 148, 35);
border: none;
border-radius: 20px;
font-size: 1em;
color: white;
cursor: pointer;

}
.myclass input:hover{

background-color: black;
cursor: pointer;
}
b:nth-child(1){

color:green;
}
b:nth-child(2){
color:red;
}

You might also like