针对任何设备的特定 html 网站的响应式设计
嗨，我是HTML和CSS的居民，我知道我的代码真的很糟糕。我想在任何设备上都可以访问我的网站，这是一个演示。我不知道如何做响应式设计，我无法使它起作用。这是网站。在光模式下查看它，因为某些图片不透明。 http://computermk.000webhostapp.com/
这是所有HTML和CSS代码。
对不起。如果有人能告诉我如何在浏览器尺寸缩小尺寸时将其缩小，以便在任何设备上可以阅读，请告诉我。如果您能找到最简单的方法，那就太好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>PC Configurations</h3>
<p id="store">Computer Store MK</p>
</nav>
<br>
<br>
<br>
<br>
<br>
<h2>Personal Computers</h2>
<br>
<br>
<br>
<br>
<br>
<img src="https://www.pbtech.co.nz/imgprod/W/K/WKSGGPC51151__1.jpg" id="PC1">
<p id="pc1spec"><b>Titan Gaming PC</b> <br>Specs:<br>Ryzen 5 5600x<br>GTX 1080 TI<br>16 GB DDR4 2666mhz Ram</p>
<img src="https://vrlatech.com/wp-content/uploads/2019/11/Helios.png" id="PC2">
<p id="pc2spec"><b>Helios Gaming PC</b><br>Specs:<br>Intel Core I7 10700K<br>GTX 1080<br>16GB DDR4 3200mhz Ram</p>
<img src="https://plecom.imgix.net/iil-259648-646963.jpg?auto=format&w=600&h=600" id="PC3">
<p id="pc3spec"><b>Corssair</b><br>Specs:<br>Ryzen 7 5800x<br>Radeon RX 6700XT<br>24GB DDR4 4000mhz Ram</p>
<a href="#" id="Order1">Order Now</a>
<a href="#" id="Order2">Order Now</a>
<a href="#" id="Order3">Order Now</a>
<img src="https://www.corsair.com/medias/sys_master/images/images/h3e/h94/9618136924190/CS-9050008-NA/Gallery/Vengeance_A7200_01/-CS-9050008-NA-Gallery-Vengeance-A7200-01.png_515Wx515H" id="PC4">
<p id="pc4spec"><b>Vengeance Gaming PC</b><br>Specs:<br>RTX 2080 SUPER<br>Intel Core I9 10900K<br>32GB DDR4 3600mhz Ram</p>
<a href="#" id="Order4">Order Now</a>
<a href="#" id="Order5">Order Now</a>
<a href="#" id="Order6">Order Now</a>
<img src="https://www.pcdiy.com.au/wp-content/uploads/2021/03/asus_tuf_gaming_gt301_rgb_tempered_glass_midtower_atx_case_ac34039-600x600-1.jpg" id="PC5">
<p id="pc5spec"><b>Cezzane Gaming Pc</b><br>Specs:<br>Radeon 6600 XT<br>Intel Core I7 11700K<br>24GB DDR4 3200mhz Ram</p>
<img src="https://www.cclonline.com/images/avante/ccl-horizon-cit-flash-main-image.jpg?width=600&height=600&scale=canvas" id="PC6">
<p id="pc6spec"><b>Horizon Gaming PC</b><br>Specs:<br>RTX 3060 TI<br>Ryzen 9 3650x<br>64GB DDR4 4000mhz Ram</p>
</section>
</body>
</html>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
background-color: white;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#PC1{
width: 400px;
height: 400px;
position: relative;
padding: 0px 150px;
}
#pc1spec{
padding: 0px 270px;
font-size: 25px;
}
#PC2{
width: 400px;
height: 400px;
padding: 0px 725px;
position: relative;
top: -570px;
}
#pc2spec{
padding: 0px 820px;
top: -590px;
position: relative;
font-size: 25px;
}
#PC3{
width: 400px;
height: 400px;
padding: 0px 1300px;
top: -1200px;
position: relative;
}
#pc3spec{
position: relative;
font-size: 25px;
left: -200px;
top: -1205px;
float: Right;
}
#section{
position: relative;
padding: 0px 250px;
}
#Order1{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
margin: 280px;
border-radius: 50px;;
position: relative;
top: -970px;
}
#Order1:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order2{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
margin: 125px;
border-radius: 50px;;
position: relative;
top: -970px;
}
#Order2:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order3{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: right;
border-radius: 50px;;
position: relative;
left: -10px;
top: -982px;
}
#Order3:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#PC4{
position: relative;
width: 400px;
height: 400px;
top: -750px;
padding: 0px 150px;
}
#pc4spec{
position: relative;
font-size: 25px;
padding: 0px 235px;
top: -740px;
}
#PC5{
position: relative;
padding: 0px 215px;
top: -1330px;
width: 450px;
height: 450px;
}
#pc5spec{
position: relative;
left: 825px;
top: -1350px;
font-size: 25px;
float: center;
}
#PC6{
width: 450px;
height: 450px;
position: relative;
top: -1950px;
left: -150px;
float: right;
}
#pc6spec{
position: relative;
font-size: 25px;
float: right;
left: 225px;
top: -1510px;
}
#Order4{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 270px;
top: -660px;
}
#Order4:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order5{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 700px;
top: -660px;
}
#Order5:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order6{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 1120px;
top: -660px;
}
#Order6:hover{
background-color: black;
transition: 0.5s;
color: white;
}
img { max-width: 100%; height: auto; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>Contacts</h3>
<p id="store">Computer Store MK</p>
</nav>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<a href="https://gmail.com" target="blank"><img src="https://cdn.wccftech.com/wp-content/uploads/2020/09/Gmail.png" id="emailimg"></a>
<p id="email">Contact Me Via Buisness Email</p>
<a href="https://globfone.com/call-phone/" target="blank"><img src="https://media.istockphoto.com/vectors/phone-icon-call-application-symbol-green-round-button-flat-interface-vector-id1250911025?k=20&m=1250911025&s=170667a&w=0&h=1aZJUHR8KVcvWKyVaufUdR8yN_r5VqTCfyGNx8pdOAY=" id="numimg"></a>
<p id="num">Contact Me Via Number</p>
<a href="https://instagram.com" target="blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1024px-Instagram_logo_2016.svg.png" id="insimg"></a>
<p id="ins">Contact Me Via Instagram</p>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#email{
position: relative;
font-size: 35px;
top: -102px;
left: 122px;
}
#emailimg{
position: relative;
width: 640px;
height: 400px;
top: -75px;
left: 40px;
}
#numimg{
position: relative;
width: 330px;
height: 330px;
top: -495px;
left: 780px;}
#num{
position: relative;
font-size: 35px;
left: 780px;
top: -480px;
}
#insimg{
position: relative;
width: 230px;
height: 230px;
top: -816px;
left: 1400px;
}
#ins{
position: relative;
font-size: 35px;
top: -760px;
left: 1315px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style3.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>About Section</h3>
<p id="store">Computer Store MK</p>
</nav>
<p id="about"> Computer Store MK is a Computer Store in North Macedonia Running Since 2004 Where We Sell:<br>Computers, parts, accessories. CSMK Is The Most Relaible Computer Store Out There.<br> We Have The Latest and Greatest Components And The Cheapest Prices Of Any Other Store.<br><br><b id="porder">So Order Now!</b></p>
<a href="index.html" id="orderpc">Order a PC!</a>
<p id="copyr">©Computer Store MK 2022.</p>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#about{
position: relative;
font-size: 35px;
left: 200px;
top: 200px;
max-width: 100%;
}
#orderpc{
color: black;
text-decoration: none;
border: 5px solid black;
padding: 20px 80px;
float: center;
border-radius: 100px;
position: relative;
top: 310px;
left: 771px;
font-size: 25px;
}
#orderpc:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#porder{
position: relative;
font-size: 35px;
left: 600px;
}
#copyr{
font-size: 30px;
float: right;
left: -20px;
top: 520px;
position: relative;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style4.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>Shop Locations</h3>
<p id="store">Computer Store MK</p>
</nav>
<h2 id="location">Computer Store MK Locations</h2>
<div class="store1">
<hr id="hr">
<p id="skopje"><b>Computer Store MK Skopje</b></p>
<hr id="hr">
<br>
<p id="lc1">street. 1523 бр.1, Скопје<br>
num: 02 3 080 877</p>
<br>
<br>
<p id="sc1"><b>Work Schedule</b><br>Monday to Friday 8:30 to 4:30h<br>Saturday 10:00 to 15:00h<br>Sunday Not Working</p>
</div>
<div class="store2">
<hr id="hr2">
<p id="skopje"><b>Computer Store MK Kavadarci</b></p>
<hr id="hr2">
<br>
<p id="lc1">Западен Булевар бр.2<br>
num: num: 043 447 730</p>
<br>
<br>
<p id="sc2"><b>Work Schedule</b><br>Monday to Friday 09:00 to 21:00h<br>Saturday 09:00 to 20:00h<br>Sunday Not Working</p>
</div>
<div class="store3">
<hr id="hr3">
<p id="skopje"><b>Computer Store Cair</b></p>
<hr id="hr3">
<br>
<p id="lc3">Булевар Македонска Косовска<br> бригада бр.11 1/1<br>num: 02 2 666 036</p>
<br>
<br>
<p id="sc3"><b>Work Schedule</b><br>Monday to Friday 09:00 to 21:00h<br>Saturday 09:00 to 21:00h<br>Sunday 09:00 to 21:00h</p>
</div>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#location{
font-size: 35px;
font-weight: 700;
position: relative;
left: -765px;
top: 50px;
width: 600px;
}
.store1{
position: relative;
font-size: 30px;
left: 110px;
top: 150px;
}
#hr{
width: 370px;
border: none;
height: 2px;
background-color: #99aed1;
}
#lc1{
font-size: 32px;
}
#sc1{
font-size: 32px;
}
.store2{
position: relative;
font-size: 30px;
left: 765px;
top: -271px;
}
#lc2{
font-size: 32px;
}
#sc2{
font-size: 32px;
}
.store3{
position: relative;
font-size: 30px;
left: 1430px;
top: -691px;
}
#lc3{
font-size: 32px;
}
#sc3{
font-size: 32px;
}
#hr2{
width: 410px;
border: none;
height: 2px;
background-color: #99aed1;
}
#hr3{
width: 290px;
border: none;
height: 2px;
background-color: #99aed1;
}Hi i'm a begginer at html and css and i know my code is really bad. I want to make my website visitable on any device here's a demo. I can't figure out how to do the responsive design i can't get it to work. here's the site.View it in light mode because some pictures are not transparent. http://computerstoremk.000webhostapp.com/
Here's all the html and css code.
Sorry for the mess. If anyone could tell me how to scale it down when sizing down the browser size so it could be readable on any device let me know. If you can find the simplest ways it would be nice.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>PC Configurations</h3>
<p id="store">Computer Store MK</p>
</nav>
<br>
<br>
<br>
<br>
<br>
<h2>Personal Computers</h2>
<br>
<br>
<br>
<br>
<br>
<img src="https://www.pbtech.co.nz/imgprod/W/K/WKSGGPC51151__1.jpg" id="PC1">
<p id="pc1spec"><b>Titan Gaming PC</b> <br>Specs:<br>Ryzen 5 5600x<br>GTX 1080 TI<br>16 GB DDR4 2666mhz Ram</p>
<img src="https://vrlatech.com/wp-content/uploads/2019/11/Helios.png" id="PC2">
<p id="pc2spec"><b>Helios Gaming PC</b><br>Specs:<br>Intel Core I7 10700K<br>GTX 1080<br>16GB DDR4 3200mhz Ram</p>
<img src="https://plecom.imgix.net/iil-259648-646963.jpg?auto=format&w=600&h=600" id="PC3">
<p id="pc3spec"><b>Corssair</b><br>Specs:<br>Ryzen 7 5800x<br>Radeon RX 6700XT<br>24GB DDR4 4000mhz Ram</p>
<a href="#" id="Order1">Order Now</a>
<a href="#" id="Order2">Order Now</a>
<a href="#" id="Order3">Order Now</a>
<img src="https://www.corsair.com/medias/sys_master/images/images/h3e/h94/9618136924190/CS-9050008-NA/Gallery/Vengeance_A7200_01/-CS-9050008-NA-Gallery-Vengeance-A7200-01.png_515Wx515H" id="PC4">
<p id="pc4spec"><b>Vengeance Gaming PC</b><br>Specs:<br>RTX 2080 SUPER<br>Intel Core I9 10900K<br>32GB DDR4 3600mhz Ram</p>
<a href="#" id="Order4">Order Now</a>
<a href="#" id="Order5">Order Now</a>
<a href="#" id="Order6">Order Now</a>
<img src="https://www.pcdiy.com.au/wp-content/uploads/2021/03/asus_tuf_gaming_gt301_rgb_tempered_glass_midtower_atx_case_ac34039-600x600-1.jpg" id="PC5">
<p id="pc5spec"><b>Cezzane Gaming Pc</b><br>Specs:<br>Radeon 6600 XT<br>Intel Core I7 11700K<br>24GB DDR4 3200mhz Ram</p>
<img src="https://www.cclonline.com/images/avante/ccl-horizon-cit-flash-main-image.jpg?width=600&height=600&scale=canvas" id="PC6">
<p id="pc6spec"><b>Horizon Gaming PC</b><br>Specs:<br>RTX 3060 TI<br>Ryzen 9 3650x<br>64GB DDR4 4000mhz Ram</p>
</section>
</body>
</html>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
background-color: white;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#PC1{
width: 400px;
height: 400px;
position: relative;
padding: 0px 150px;
}
#pc1spec{
padding: 0px 270px;
font-size: 25px;
}
#PC2{
width: 400px;
height: 400px;
padding: 0px 725px;
position: relative;
top: -570px;
}
#pc2spec{
padding: 0px 820px;
top: -590px;
position: relative;
font-size: 25px;
}
#PC3{
width: 400px;
height: 400px;
padding: 0px 1300px;
top: -1200px;
position: relative;
}
#pc3spec{
position: relative;
font-size: 25px;
left: -200px;
top: -1205px;
float: Right;
}
#section{
position: relative;
padding: 0px 250px;
}
#Order1{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
margin: 280px;
border-radius: 50px;;
position: relative;
top: -970px;
}
#Order1:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order2{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
margin: 125px;
border-radius: 50px;;
position: relative;
top: -970px;
}
#Order2:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order3{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: right;
border-radius: 50px;;
position: relative;
left: -10px;
top: -982px;
}
#Order3:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#PC4{
position: relative;
width: 400px;
height: 400px;
top: -750px;
padding: 0px 150px;
}
#pc4spec{
position: relative;
font-size: 25px;
padding: 0px 235px;
top: -740px;
}
#PC5{
position: relative;
padding: 0px 215px;
top: -1330px;
width: 450px;
height: 450px;
}
#pc5spec{
position: relative;
left: 825px;
top: -1350px;
font-size: 25px;
float: center;
}
#PC6{
width: 450px;
height: 450px;
position: relative;
top: -1950px;
left: -150px;
float: right;
}
#pc6spec{
position: relative;
font-size: 25px;
float: right;
left: 225px;
top: -1510px;
}
#Order4{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 270px;
top: -660px;
}
#Order4:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order5{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 700px;
top: -660px;
}
#Order5:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order6{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 1120px;
top: -660px;
}
#Order6:hover{
background-color: black;
transition: 0.5s;
color: white;
}
img { max-width: 100%; height: auto; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>Contacts</h3>
<p id="store">Computer Store MK</p>
</nav>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<a href="https://gmail.com" target="blank"><img src="https://cdn.wccftech.com/wp-content/uploads/2020/09/Gmail.png" id="emailimg"></a>
<p id="email">Contact Me Via Buisness Email</p>
<a href="https://globfone.com/call-phone/" target="blank"><img src="https://media.istockphoto.com/vectors/phone-icon-call-application-symbol-green-round-button-flat-interface-vector-id1250911025?k=20&m=1250911025&s=170667a&w=0&h=1aZJUHR8KVcvWKyVaufUdR8yN_r5VqTCfyGNx8pdOAY=" id="numimg"></a>
<p id="num">Contact Me Via Number</p>
<a href="https://instagram.com" target="blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1024px-Instagram_logo_2016.svg.png" id="insimg"></a>
<p id="ins">Contact Me Via Instagram</p>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#email{
position: relative;
font-size: 35px;
top: -102px;
left: 122px;
}
#emailimg{
position: relative;
width: 640px;
height: 400px;
top: -75px;
left: 40px;
}
#numimg{
position: relative;
width: 330px;
height: 330px;
top: -495px;
left: 780px;}
#num{
position: relative;
font-size: 35px;
left: 780px;
top: -480px;
}
#insimg{
position: relative;
width: 230px;
height: 230px;
top: -816px;
left: 1400px;
}
#ins{
position: relative;
font-size: 35px;
top: -760px;
left: 1315px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style3.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>About Section</h3>
<p id="store">Computer Store MK</p>
</nav>
<p id="about"> Computer Store MK is a Computer Store in North Macedonia Running Since 2004 Where We Sell:<br>Computers, parts, accessories. CSMK Is The Most Relaible Computer Store Out There.<br> We Have The Latest and Greatest Components And The Cheapest Prices Of Any Other Store.<br><br><b id="porder">So Order Now!</b></p>
<a href="index.html" id="orderpc">Order a PC!</a>
<p id="copyr">©Computer Store MK 2022.</p>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#about{
position: relative;
font-size: 35px;
left: 200px;
top: 200px;
max-width: 100%;
}
#orderpc{
color: black;
text-decoration: none;
border: 5px solid black;
padding: 20px 80px;
float: center;
border-radius: 100px;
position: relative;
top: 310px;
left: 771px;
font-size: 25px;
}
#orderpc:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#porder{
position: relative;
font-size: 35px;
left: 600px;
}
#copyr{
font-size: 30px;
float: right;
left: -20px;
top: 520px;
position: relative;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style4.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="shops.html" class="home">Shops</a></li>
<li><a href="about.html" class="home">About</a></li>
<li><a href="contact.html" class="home">Contact</a></li>
</ul>
</div>
<h3>Shop Locations</h3>
<p id="store">Computer Store MK</p>
</nav>
<h2 id="location">Computer Store MK Locations</h2>
<div class="store1">
<hr id="hr">
<p id="skopje"><b>Computer Store MK Skopje</b></p>
<hr id="hr">
<br>
<p id="lc1">street. 1523 бр.1, Скопје<br>
num: 02 3 080 877</p>
<br>
<br>
<p id="sc1"><b>Work Schedule</b><br>Monday to Friday 8:30 to 4:30h<br>Saturday 10:00 to 15:00h<br>Sunday Not Working</p>
</div>
<div class="store2">
<hr id="hr2">
<p id="skopje"><b>Computer Store MK Kavadarci</b></p>
<hr id="hr2">
<br>
<p id="lc1">Западен Булевар бр.2<br>
num: num: 043 447 730</p>
<br>
<br>
<p id="sc2"><b>Work Schedule</b><br>Monday to Friday 09:00 to 21:00h<br>Saturday 09:00 to 20:00h<br>Sunday Not Working</p>
</div>
<div class="store3">
<hr id="hr3">
<p id="skopje"><b>Computer Store Cair</b></p>
<hr id="hr3">
<br>
<p id="lc3">Булевар Македонска Косовска<br> бригада бр.11 1/1<br>num: 02 2 666 036</p>
<br>
<br>
<p id="sc3"><b>Work Schedule</b><br>Monday to Friday 09:00 to 21:00h<br>Saturday 09:00 to 21:00h<br>Sunday 09:00 to 21:00h</p>
</div>@import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#location{
font-size: 35px;
font-weight: 700;
position: relative;
left: -765px;
top: 50px;
width: 600px;
}
.store1{
position: relative;
font-size: 30px;
left: 110px;
top: 150px;
}
#hr{
width: 370px;
border: none;
height: 2px;
background-color: #99aed1;
}
#lc1{
font-size: 32px;
}
#sc1{
font-size: 32px;
}
.store2{
position: relative;
font-size: 30px;
left: 765px;
top: -271px;
}
#lc2{
font-size: 32px;
}
#sc2{
font-size: 32px;
}
.store3{
position: relative;
font-size: 30px;
left: 1430px;
top: -691px;
}
#lc3{
font-size: 32px;
}
#sc3{
font-size: 32px;
}
#hr2{
width: 410px;
border: none;
height: 2px;
background-color: #99aed1;
}
#hr3{
width: 290px;
border: none;
height: 2px;
background-color: #99aed1;
}如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
无论代码如何，都要回答问题，
使用 媒体查询
，现在看看这个链接，以便更好地理解和使用这个代码以获得更好的掌握
to answer the question regardless of the code,
that is done using media queries
, now have a look at this link for better understanding and play with this code to get a better grip