Create three break points using media queries in at least one style sheet to alter the way your website looks on small, medium and large dev o it will help to view your current website on a mobile device and document what looks broken (overflow, small text, etc) • start coding media queries after identifying elements of your website that need responsive behavior Each style sheet must have at least 25 unique CSS selectors. Your selectors must satisfy the requirements below: • 1x Universal Selector • >= 1 x Type Selector • >= 1 x Class Selector • >= 1 x ID Selector • >= 1x Group Selector (ex: h1, p, a {/*styles here*/}) • >= 2 x Child Selector • >= 2 x General Sibling Combinator (~) • >= 2 x Adjacent Sibling Combinator (+) • >= 2 x Pseudo Class Selector (ex: :nth-of-type) There must be at least one Grid layout and one Flex layout on your website • Grid style requirements: grid-template-areas • grid-template-columns grid-template-rows • grid-area • Flex style requirements: • flex-direction (can be set to row our column) • flex-wrap • flex-basis • flex-grow - you must have one item that grows more than other flex items given available space! • flex-shrink - you must have one item that shrinks more than other flex items given available space!
this is what I have so far please help with what you can
I need an answer similar to what in the link below
https://www.bartleby.com/questions-and-answers/css-requirements-separate-your-style-sheets-into-three-stylescolors.css-stylesformatting.css-stylest/6de4db39-d0f3-428c-ba78-9ee24b6cfce4
my html below
<!DOCTYPE html>
<html>
<head>
<title>Contact me</title>
</head>
<body>
<!--Added main tag-->
<main>
<!--Added nav tag-->
<nav>
<a href="index.html">Home</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</nav>
<h1>Contact ME</h1>
<span>photo of me Joe Mc</span>
<br>
<picture>
<source media="(min-width:650px)" srcset="./images/me1-650.jpg">
<source media="(min-width:465px)" srcset="./images/me1-465.jpg">
<img src="./images/me1.jpg" alt="lake" style="width:auto;">
</picture>
<p>You can contact me through : </p>
<div>
<ul>
<li>Email - 332b@gmail.com</li>
<li>Phone - (802)3742375</li>
</ul>
<footer>
<div>
<p>Author: Josiah McSweeney<br>
<p>Copyright Reserved</p>
</div>
</footer>
</main>
</body>
</html>
Step by step
Solved in 4 steps with 3 images
