Scribd
Upload
40 views21 pages

Intern Krish N

The document contains CSS code to style various elements of a webpage layout, including the header, navigation bar, content sections, and footer. CSS is used to control the design and formatting of the webpage by adjusting properties like colors, sizes, positioning, and more. Different CSS techniques are defined, including internal and external CSS. HTML markup is also included to structure the webpage content and apply the CSS styling rules.

Uploaded by

Krishna Fadadu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views21 pages

Intern Krish N

The document contains CSS code to style various elements of a webpage layout, including the header, navigation bar, content sections, and footer. CSS is used to control the design and formatting of the webpage by adjusting properties like colors, sizes, positioning, and more. Different CSS techniques are defined, including internal and external CSS. HTML markup is also included to structure the webpage content and apply the CSS styling rules.

Uploaded by

Krishna Fadadu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Name – krishna fadadu h

Enroll - 226170316033
Cascading Style Sheets (CSS) is used to
format the layout of a webpage.
CSS is use for give design/style to
Webpage.
 CSS Types
▪ Inline CSS
▪ Internal CSS
▪ External CSS
- To give style in tag by using the style attribute inside
HTML elements
-An internal CSS is used to define a style for
a single HTML page.

-An internal CSS is defined in


the <head> section of an HTML page,
within a <style> element.
 body
 {
 margin:0px;
 padding: 0px;
 }
 .hea1
 {
 height: 500px;
 width: 100%;
 background-image: url("image4.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 padding-top:40px;
 background-attachment: fixed;

 }
 .nav
 {
 height:50px;
 width:70%;
 background-color: red;
 border-radius: 0px 60px 60px 0px;
 float:left;
 }
 ul
 {
 display: flex;
 }
 ul li
 {
 list-style-type: none;
 }
 ul li a
 {
 text-decoration: none;
 display:block;
 margin-left:60px;
 font-size:15px;
 color: white;

}
 .logo
 {
 float:right;
 margin-right: 40px;

}
 .logo>img
 {
 border-radius: 100px;
 }
 .clearall
 {clear: both;}
 .infoarea
 {
 padding: 10px 100px;

 }
 .btn1
 {
 height:50px;
 width:300px;
 background-color:white;
 color:red;
 border-radius:70px;
 border:none;
 font-size: 20px;
 margin-top:10px;
 }

/* day 2 */
 .main
 {
 height: auto;
 width:100%;
 background-color: antiquewhite;
 margin:0px;

}
 .main1
 {
 height:400px;
 display: flex;
 justify-content: center;
 width: 100%;
 }
 .main2
 {
 height:400px;
 display: flex;
 width: 100%;
 justify-content: center;

}
 .main3
 {
 height:250px;
 width: 300px;
 background-color:rgb(9, 13, 13);
 margin:10px 50px;
 font-size:20px;
 color:rgb(226, 204, 204);
 padding:15px 20px;
 text-align:center;
 border-radius:20px;

 }
 .main3:hover
 {
 color:rgb(239, 19, 144);
 background-image:url("image4.jpg");
 }
 .bottom
 {
 height: 450px;
 Width:100%;
 background-color:black;
 margin: 0px:
 }
 .bottom1:
 {
 height:300px;
 width:100%;
 text-align:center;
 color:white:
 margin: 0px:
 }
 .bottom1>input
 {
 height:50px ;
 width: 60%/
 hordar:none;
 background-color:white ;
 color:rbg(255,82,82);
 margin:15px 30px;
 hordar-radius:30px;
 padding:5px 25px;
 font-size: 20px;
 }
 .bottom2
 {
 height;25px;
 width:100px;
 background-color:red;
 color:aliceblue;
 padding:10px;
 }
 .bottom1.hower
 {background-color: rgb(255,82,82);
 color:aliceblue;}

}
 <html lang="en">
 <head>
 <title>web layout</title>
 <link href="external2.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <header>
 <div class="hea1">
 <nav>
 <div class="nav">
 <ul>
 <li><a href="#">home</a></li>
 <li><a href="#">product</a></li>
 <li><a href="#">pricing</a></li>
 <li><a href="#">contact us</a></li>
 </ul>
 </div>
 </nav>
 <div class="logo">
 <img src="logo.png" class="" height="100px" width="100px"/>
 </div>
 <div class="clearall"></div>
 <div class="infoarea">
 <h1 style="padding-top:20px;">WE HELP YOU</h1>
 <H1>FOR YOUR HEALTH</H1>
 <P>We Believe It is Critical to Treat all Aspects of Our
Patients </P>
 <p>and Provide Holistic Care</p>
 <input type="submit" value="How Can I Help You?" class="btn1"/>
 </div>
 </div>
 </header>

 <main>
 <div class="main">
 <h1 style="text-align: center; padding:20px;margin: 0px;">OUR
SERVICES</h1>
 <div class="main1">
 <div class="main3">
 <h1>DOCTOR</h1>
 <p>Getting The Right Medical Attention Made Easy.
 The Answer For A Worry-Less Tomorrow.
 </p>
 <center><input type="button" value="See More"
 style="height:50px;width: 200px;color:rgb(255, 82,
82);border: none;"/></center>
 </div>
 <div class="main3">
 <h1>Nurse</h1>
 <p>Making Your Tomorrow Healthier.
 The First Step To Happiness Is Good Health.
 Health Is What We Do.</p>
 <center><input type="button" value="See More"
 style="height:50px;width: 200px;color:rgb(255, 82, 82
 );border: none;"/></center>
 </div>
 <div class="main3">
 <h1>Physiotherapist</h1>
 <p>Bringing You The Best Medical Care.
 Giving You Superior Medical Care.</p>
 <center><input type="button" value="See More"
 style="height:50px;width: 200px;color:rgb(255, 82,
82);border: none;"/></center>
 </div>
 </div>
 </div>
 </main>
 <footer>
 <div class"bottom">
 <div class"buttom1">

<h1 style="margin: 0px;padding: 27px;> Enquiry</h1>
 <input type="text" value="fullname"/>
 <input types="text" value="Contact nummber"/>
 <input types="text" value="requirement"/>
 <input types="submit"
 style="background-color: rgb(255, 82, 82); color:aliceblue;"
 value="submit"/>

</div>
 <div/>
 <div class-"bottam2">
 <center>
 <p style="margin: 0px;">2023 All Rights Reserved</p>
 </center>
 </div>
 </footer>

</body>
 </html>

You might also like