I am new at web development. All I do is watch tutorials on youtube and copy css and html in to my vs code. The problem I am facing is that front end of my web pages looks very different from the youtubers. I think the problem is related to resolution as most of YouTubers have big screens and high resolution screens(more pixels), elements are positioned differently. I think there must be a way to overcome this issue. I am attaching images that will make my question more clear. I tried zooming out and zooming in which actually worked. When I zoom out to 60%, the page looks more like the youtuber's.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Professional Photographer available for weadings and social events"
/>
<meta name="robots" content="index,follow" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="style.css" />
<title>Elena Joy | Professional Photographer</title>
</head>
<body>
<header class="main-head">
<nav>
<h1 id="logo">Elena Joy</h1>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-introduction flex">
<h2>Elena Joy<br />Photography</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non
dolorum earum, temporibus iste at necessitatibus voluptas ullam quam
eveniet sapiente?
</p>
<a href="#gallery">Gallery</a>
</div>
<div class="hero-images">
<img
class="hero-elena"
src="./img/elena-joy.png"
alt="Picture of Elena Joy"
/>
<img src="./img/plant1.png" alt="" class="plant1 plant">
<img src="./img/plant2.png" alt="" class="plant2 plant">
</div>
</section>
</main>
</body>
</html>
/* Global styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Ruhl";
src: url("./Fonts/FrankRuhlLibre-Regular.ttf");
}
@font-face {
font-family: "Ruhl Medium";
src: url("./Fonts/FrankRuhlLibre-Medium.ttf");
}
@font-face {
font-family: "Vibes";
src: url("./Fonts/GreatVibes-Regular.ttf");
}
html {
font-size: 62.5%;
--header1: calc(2rem + 1vw);
--header2: calc(3.5rem + 1vw);
--header3: calc(3rem + 1vw);
--header4: calc(2.4rem + 1vw);
--text: calc(1.5rem + 1vw);
--big: calc(2.4rem + 1vw);
--special-color: #906272;
--background-color: #414141;
--gray-text: #525252;
}
h1 {
font-size: var(--header1);
}
li,
button,
label,
input,
a,
p {
font-size: calc(1rem + 1vw);
/* font-size: var(--text); */
}
h2 {
font-size: var(--header1);
}
h3 {
font-size: var(--header3);
font-weight: normal;
}
h4,
h5,
h6 {
font-size: var(--header4);
}
a {
text-decoration: none;
color: black;
}
ul {
list-style: none;
}
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
body {
font-family: "Ruhl", sans-serif;
}
h1 #logo {
font-family: "Vibes" sans-serif;
}
/*Nav section*/
.main-head {
/* background: #414141; */
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
position: relative;
}
nav {
display: flex;
align-items: center;
min-height: 10vh;
padding: 2rem 0rem;
}
#logo {
flex: 1 1 20rem;
}
.nav-links {
display: flex;
justify-content: space-around;
flex: 1 1 20rem;
}
.hero {
height: 90vh;
width: 95%;
margin: 0 0 0 auto;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.hero-introduction {
flex: 2 1 40rem;
text-align: center;
}
.hero-introduction p {
padding: 5rem 10rem;
}
.hero-introduction h2 {
padding-top: 3rem;
}
.hero-introduction a {
padding: 2rem 8rem;
border: 3px solid black;
margin-bottom: 4rem;
}
.hero-images {
flex: 1 1 40rem;
background: linear-gradient(#dad8dd, #dad1d4);
position: relative;
z-index: 1;
}
.hero-elena {
width: 100%;
height: 100%;
object-fit: cover;
}
.plant {
position: absolute;
bottom: 0%;
left: -20%;
z-index: -1;
}
.plant2 {
left: 40%;
}
Aucun commentaire:
Enregistrer un commentaire