<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap"rel="stylesheet"><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Roboto&display=swap"rel="stylesheet"><linkrel="stylesheet"href="style.css"><title>coding_Now</title></head><body><!-- nav bar and header --><header><navclass="navbar"><h1style="font-family:'Space Mono', monospace; font-weight:900;"><spanclass="one">system</span>.<spanclass="two">out</span>.<spanclass="three">println</span>(<spanclass="four">"Coding Now!"</span>)</h1><ul><li><ahref="">About us</a></li><li><ahref="">Program Advantages</a></li><li><ahref="">Download Now!</a></li></ul></nav></header><!--section(container)--><sectionclass="content"><divclass="phone"><pclass="phone_des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nostrum harum voluptatem est odit, error, corporis blanditiis ad, dolorem laudantium aliquam libero soluta necessitatibus. Rerum dolorem ab porro distinctio et eius iure! Laudantium sint doloribus, officiis vel sequi quaerat, recusandae sunt ratione asperiores ipsam similique placeat est eum at voluptatum accusantium delectus omnis voluptatem ea explicabo qui. Sint inventore fuga dolor consequuntur amet eius provident nobis officiis nam doloremque doloribus modi, tempora excepturi? Cumque nostrum perspiciatis eligendi iusto dicta dolores tempore delectus accusantium harum! Placeat, sequi, blanditiis incidunt error dignissimos optio repudiandae enim eaque eius facilis inventore eos nulla laborum.</p><imgclass="phone_img"width="250px"src="photos/phone.png"alt="noIMg"></div></section></body></html>
كود css
*{
margin:0;
padding:0;
box-sizing: border-box;}
body {
background-color:#121420;
font-family:'Roboto', sans-serif;}/* logo colors *//* nav bar code and header*/.one {
color: rgb(104,0,139);}.two {
color: rgb(232,185,0);}.three {
color: rgb(0,0,160);}.four {
color: green;}/* nav bar code and header*/
header {
position:fixed;
width:100%;}.navbar {
display: flex;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
margin:20px;
color: rgb(172,172,172);}.navbar ul li {
list-style: none;
display:inline-block;}.navbar ul li a {
font-size:18px;
font-weight:700;
color:#5d69a9;
text-decoration: none;
padding:10px;
transition:1s all;-webkit-transition:0.5 all;-moz-transition:1s all;-ms-transition:1s all;-o-transition:1s all;}.navbar ul li a:hover {
text-shadow:2px5px rgb(0,30,86);
border: solid red 2px;}/* end of header and nav bar */.phone {
display: flex;
justify-content: space-around;
align-items: center;}.phone_des {
width:45%;
color: white;}
السؤال
Mohammed Hhhh
كيف اجعل صورة الهاتف تحترم ال header
و المشكله موضحه في الصورة المرقفه
كود html
كود css
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.