tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes per end of "Stop over-engineering your CSS" video

This commit is contained in:
Robert McGovern 2024-02-01 20:08:51 +00:00
parent bd79b9c569
commit 2a9d10af21
2 changed files with 72 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
projects/random/minimal-styling/index.html
View File

@ -9,39 +9,39 @@
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1>
<img src="./IMG_0030.JPG" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem et in
placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus
consectetur magni vero eum, autem et in placeat reiciendis doloremque.
</p>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<h3>Lorem, ipsum dolor.</h3>
<img src="IMG_0468.JPG" alt="">
<p></p>
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium maxime
accusamus ipsam architecto debitis expedita?</p>
<ul>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
</ul>
<fieldset>
<form action="">
<label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label>
<label for="email">Email<input type="email" name="email" id=""
placeholder="Enter your email address"></label>
<label for="message">Message
<textarea id="message" name="message" rows="4" cols="50" placeholder="Your message here"></textarea>
</label>
</form>
</fieldset>
<img src="./IMG_0835.JPG" alt="">
<main>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1>
<img src="./IMG_0030.JPG" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem et
in
placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus
consectetur magni vero eum, autem et in placeat reiciendis doloremque.
</p>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<h3>Lorem, ipsum dolor.</h3>
<img src="IMG_0468.JPG" alt="">
<p></p>
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium
maxime
accusamus ipsam architecto debitis expedita?</p>
<ul>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
</ul>
<fieldset>
<form action="">
<label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label>
<label for="email">Email<input type="email" name="email" id=""
placeholder="Enter your email address"></label>
<label for="message">Message
<textarea id="message" name="message" rows="4" cols="50" placeholder="Your message here"></textarea>
</label>
</form>
</fieldset>
<img src="./IMG_0835.JPG" alt="">
</main>
</body>

39
projects/random/minimal-styling/style.css
View File

@ -0,0 +1,39 @@
/* * {
margin: 0;
} */
/* img, svg, video {
width: 100%;
display: block;
} */
html {
color-scheme: light dark;
}
body {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
font-size: 1.125rem;
line-height: 1.5;
}
main {
width: min(65ch, 100% - 4rem);
margin-inline: auto;
}
:where(img, svg, video) {
width: 100%;
display: block;
}