Untitled
unknown
html
2 years ago
4.9 kB
6
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style1.css" /> <link rel="stylesheet" href="media.css" media="screen and (max-width: 762px)"> <title>Document</title> </head> <body> <header> <div class="upSide--head"> <div class="bloggist">Bloggist</div> <div class="options--menu"> <label for="menu">About</label> <select name="Parentpage" id="menu"> <optgroup> <option value="menu">Parent Page</option> <option value="menu">2</option> <option value="menu">3</option> <option value="menu">5</option> <option value="menu">6</option> </optgroup> </select> </div> </div> <div class="image"> <img src="/Background.jpg" alt="khodam" width="100%" height="280px" /> </div> </header> <main class="main-content"> <div class="main--leftSide"> <div class="worth row"> <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum.</p> </div> <button class="btn--primary">+</button> <div class="worth row"> <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum.</p> </div> <button class="btn--primary">+</button> <div class="worth row"> <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum.</p> </div> <button class="btn--primary">+</button> <div class="worth row"> <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum.</p> </div> <button class="btn--primary">+</button> <div class="worth row"> <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum.</p> </div> <button class="btn--primary">+</button> <div class="worth row"> <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum.</p> </div> <button class="btn--primary">+</button> <div class="worth row"> <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum.</p> </div> <button class="btn--primary">+</button> </div> <div class="main--rightSide"> <div class="categories"> <h5>CATEGORIES</h5> <p>Lorem, ipsum dolor.</p> <p>Lorem, ipsum dolor.</p> <p>Lorem, ipsum dolor.</p> <p>Lorem, ipsum dolor.</p> <p>Lorem, ipsum dolor.</p> </div> <div class="meta"> <h5>META</h5> <p>Lorem, ipsum dolor.</p> <p>Lorem, ipsum dolor.</p> <p>Lorem, ipsum dolor.</p> </div> </div> </main> <footer> <p> The purpose of this Privacy Policy 2023 is to help you understand what information we collect </p> </footer> </body> </html> @import url("https://v1.fontapi.ir/css/Shabnam:300;400"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; } .upSide--head { display: flex; flex-direction: row; justify-content: space-between; margin: 1% 7%; } .options--menu { display: flex; flex-direction: row; gap: 3em; } .main-content { display: grid; grid-template-columns: 2fr 1fr; width: 80%; margin: 1rem auto; } .main--leftSide { display: flex; flex-direction: column; } .row { line-height: 1.5; background-color: whitesmoke; padding: 0.5em 1.5em; border-radius: 5px; } .btn--primary { width: 35px; height: 35px; border-radius: 50%; background-color: orange; color: white; outline: none; border: none; cursor: pointer; position: relative; left: 650px; top: -20px; } .main--rightSide { display: flex; flex-direction: column; row-gap: 2em; margin: 0 2rem; line-height: 2; } h5 { color: grey; } .categories p, .meta p { background-color: whitesmoke; margin: 5px 0; border-radius: 3px; padding: 5px; } footer { background-color: black; padding: 1em 0; } footer p { width: 50%; margin: auto; background-color: black; color: white; }
Editor is loading...