CSS Requirements 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 devices • 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 • >= 1 x 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!
what I have so far please help with what you can
<!DOCTYPE html>
<html>
<head>
<title>ABOUT</title>
</head>
<body>
<main>
<nav>
<a href="index.html">Home</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</nav>
<h1>About ME</h1>
<picture>
<source media="(min-width:650px)" srcset="./images/lake-650.jpg">
<source media="(min-width:465px)" srcset="./images/lake-465.jpg">
<img src="./images/lake.jpg" alt="lake" style="width:auto;">
</picture>
<p>Why hello there and welcome!.</p>
<p>Hello there my name is Josiah McSweeney and I am a computer engineering student I really enjoy working with computers and exploring what I'm able to do with them I am currently 22 years and I'm working towards getting my associate's degree In computer engineering.</p>
<p>My motto: is take your time do your best and you will always succeed.</p>
<div>
<span>
<h2>Interest and hobbies </h2>
<p>I really enjoy photography anime video games and almost anything that has to do with computers I've always enjoyed playing on working on and exploring what I can do using computers which is one of the reasons why I'm here today in this class below is a very small list of some of my interest . </p>
<ul>
<li>anime</li>
<li>video games</li>
<li>photography</li>
</ul>
<p>I hope you found my page enjoyable and thank you for reading.</p>
</span>
<footer>
<div>
<p>Author: Josiah McSweeney<br>
<p>Copyright Reserved</p>
</div>
</footer>
</main>
</body>
</html>
Step by step
Solved in 3 steps
