suzzil60
-
Posts
3 -
Joined
-
Last visited
suzzil60's Achievements
Newbie (1/7)
0
Reputation
-
This is the box model I have created from css grid.I am stuck.I wanna add more box on the bottom of the side bar.Is it possible to do so? Here is my code. HTML <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML - BASICS</title> <link rel="stylesheet" type="text/css" href="css/html.css"> </head> <body> <div class="wrapper"> <div class="box-1"> <ul> <li class="current"><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">CSS GRID</a></li> <li><a href="#">BOOTSTRAP</a></li> <li><a href="#">JAVASCRIPT</a></li> <li><a href="#">JQUERY</a></li> <li><a href="#">NODE.JS</a></li> <li><a href="#">PYTHON</a></li> <li><a href="#">PHP</a></li> <li><a href="#">MYSQL</a></li> </ul> </div> <div class="box-2"> <div class="main-content"> <h1>HTML 5 Tutorial</h1> <h2> New element in HTML 5</h2> <ul> <li><span>Header</span> ---It contains title of the main content.It displays top screen in the browser.</li> <li><span>Nav </span>--- This element contains menu and catergories section.It may displayed in top, middle or side on the screen of the screen.It my be vertical or horizontal.</li> <li><span>Aside</span> --- This is the new element of the HTML 5 which stays on the side of the website.</li> <li><span>Section</span> --- This is the main area of the website.It is located in the middle of the website.</li> <li><span>Footer</span> --- This element defines the footer in the websites.</li> <li><span> Details</span> --- Defines additional details that users can see or hide</li> <li><span>Dialog</span> --- Defines the dialog box or window.</li> <li><span>figcaption </span>--- Defines a caption for a 'figure' element.</li> <li><span>Figure</span></span> --- Defines a self-contained content.</li> <li><span>Main</span> --- Define the main content of a element.</li> <li><span>Mark</span> --- Define mark or highlighted text in the content.</li> <li><span>Progress</span> --- Represent progress of the a task.</li> <li><span>Summary</span> --- Defines a visible heading for 'detils' element.</li> <li><span>Time </span>--- Defines date or time.</li> <li><span>bdi</span> --- Isolate a part of text that might be formatted in a different direction from other text outside it.</li> <i><span>Meter</span> --- Defines a scalar measurement within a known range (a gauge).</li> <li><span>rp</span> --- Defines what to show in browsers that do not support ruby annotations).</li> <li><span>rt </span>--- Defines an explanation/pronunciation of characters (for East Asian typography).</li> <li><span>Ruby </span>--- Defines a ruby annotation (for East Asian typography).</li> </ul> </div> </div> <div class="box-3"> <h1>Display your Ad here</h1> </div> </div> </body> </html> CSS *{ margin: 0px; padding: 0px; } .wrapper{ display: grid; grid-template-columns: 0.5fr 2fr 1fr; grid-gap: 0.5em; } .box-1{ border: 2px solid black; margin: 0px 0px 0px 10px; line-height: 5em; background: #dcdcdc; height: 800px; } .box-1 li{ list-style-type: none; font-size: 25px; font-weight: bold; text-align: center; } .box-1 a{ margin-right: 20px; margin-left: 20px; text-decoration: none; color: #000; padding: 15px 20px 10px 20px ; } .current{ background: blue; color: #fff; margin-right: 0px; padding: 0px; text-align: center; } .current a { color: white; padding-left: 0px; } .box-1 a:hover{ background : blue; color: #fff; transition-duration: 0.7s; } .box-2{ border: 2px solid blue; margin: 0px 0px 0px 0px; } .main-content ul{ margin: 20px 0px 0px 0px; padding: 20px; font-size: 22px; list-style-type: none; font-weight: bold; line-height: 1.9em; color: #7B7C7C; } .main-content h1{ text-align: center; } .main-content h2{ padding-left: 20px; margin-top: 30px; } .main-content{ margin-top: 20px; } .main-content span { color: green; font-size: 25px; } .box-3{ border: 2px solid red; background: #dcdcdc; } .box-3 h1{ text-align: center; margin-top: 200px; height: 1200px;
.thumb.png.81102823dd19df9664fe4521d3df9226.png)
-
Thank you so much for your time and consideration.
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Professional Webite Development-Welcome</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="main-wrapper"> <header class="top-content"> <div id="soft"> <h1>Isoft</h1> </div> <nav class="main-menu"> <ul class="sub-menu"> <li><a href="#">Home</a></li> <li><a href="#">services</a></li> <li><a href="#">About</a></li> <li><a href="#">my profile</a></li> </ul> </nav> </header> </div> <!--main-wrapper--> <div class="main-wrapper"> <section> <article> <h2>Software Development</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </section> </div> <div class="main-wrapper"> <section class="main-content"> <article> <h2>Computer Programming</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </section> </div> <footer> <p>copy right © All right reserved </p> </footer> </body> </html> CSS *{ margin: 0; padding: 0; } body{ background: #dcdcdc; } .main-wrapper{ width: 80%; margin-left: 100px; } header{ background: blue; margin-bottom: 50px; } header h1{ color: #fff; font-family: luminari; font-size: 30px; padding-left: 30px; } #soft{display: inline-block; } .main-menu{ display: inline-block; text-align: right; width: calc(100% - 100px); } .main-menu li{ display: inline-block; font-size: 20px; text-decoration: none; padding: 10px; } .sub-menu a{ text-decoration: none; color: white; } section{ border: 1px solid #000; text-align: justify; padding-right: 15px; padding-left: 15px; overflow: hidden; box-sizing: border-box; width: 65%; background: #fff; font-family: tahoma; float: left; } section h2{ padding-top: 20px; } section p{ padding-top: 10px; padding-bottom: 10px; line-height: 1.4em; font-size: 14px; } .main-content{ border: 1px solid #000; text-align: justify; padding-right: 15px; padding-left: 15px; overflow: hidden; box-sizing: border-box; width: 30%; background: #fff; font-family: tahoma; float: right; } .main-content h2{ padding-top: 20px; } .main-content p{ padding-top: 10px; padding-bottom: 10px; line-height: 1.4em; font-size: 14px; } footer{ background: #000; } WHAT 'WRONG WITH MY CODE? WHY DOES FOOTER NOT DISPLAY ON BOTTOM ?PLEASE KINDLY GIVE ME SOLUTION
.thumb.png.8e9a7b5dec5d3984e0667347644db14b.png)
.png.05d1d770d36779ff6a2554c98d180777.png)
.png.166ba6bcfd563b1d7d72560ded3cae78.png)