commit ce7bdeb3e9bad1bd9343106338eba8ae1868f697 Author: Harilee <45534309+harilee1325@users.noreply.github.com> Date: Fri Oct 27 15:44:45 2023 +0530 first commit diff --git a/css.html b/css.html new file mode 100644 index 0000000..b4385c2 --- /dev/null +++ b/css.html @@ -0,0 +1,55 @@ + + + + + + +

My First CSS Example

+

This is a paragraph.

+ +

Red and center-aligned heading

+

Red and center-aligned paragraph.

+ +

Hello World!

+

This paragraph is not affected by the style.

+ +
    +
  1. Coffee
  2. +
  3. Tea
  4. +
  5. Coca Cola
  6. +
+ + + +

This is a heading

+

This is a paragraph.

+ + +
This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.
+ +
This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
+ + + +
    +
  1. Table
  2. +
  3. Chair
  4. +
  5. Bed
  6. +
+ + + + +
+ +

This is a heading

+

This is a heading

+

This is a heading

+ +
+ + diff --git a/external.css b/external.css new file mode 100644 index 0000000..49e6f30 --- /dev/null +++ b/external.css @@ -0,0 +1,131 @@ +body { + background-color: lightblue; + } + + h1 { + color: white; + text-align: center; + } + + p { + font-family: verdana; + font-size: 20px; + } + + /* + class selector + */ + .center { + text-align: center; + color: red; + } + + /* + id selector + */ + #para1 { + text-align: center; + color: red; + } + + /* + list styling + */ + + ol { + background: #ff9999; + padding: 20px; + + } + + ul { + background: #3399ff; + padding: 20px; + } + + ol li { + background: #ffe5e5; + color: darkred; + padding: 5px; + margin-left: 35px; + } + + ul li { + background: #cce5ff; + color: darkblue; + margin: 5px; + } + + /* + margin example + */ + + #margin_example { + border: 1px solid black; + margin-top: 100px; + margin-bottom: 100px; + margin-right: 150px; + margin-left: 80px; + background-color: lightblue; + } + + /* + padding example + */ + + #padding_example { + border: 1px solid black; + background-color: lightblue; + padding-top: 50px; + padding-right: 30px; + padding-bottom: 50px; + padding-left: 80px; + } + + /* + centering items using margin auto + */ + + #center_table { + background: #ff9999; + padding: 20px; + margin: 50px auto; + width: 200px; + height: 100px; + } + + /* + centering with flex box horizontally + */ + + .center_horizontal_flex_box { + font-family: arial; + font-size: 24px; + margin: 25px; + width: 1050px; + height: 200px; + outline: dashed 1px black; + /* Center child horizontally*/ + display: flex; + justify-content: center; + } + + .child { + width: 50px; + height: 50px; + background-color: red; + } + + .center_vertical_flex_box { + font-family: arial; + font-size: 24px; + margin: 25px; + width: 1050px; + height: 200px; + outline: dashed 1px black; + /* Center vertically */ + display: flex; + align-items: center; + justify-content: center; + + } diff --git a/index.html b/index.html new file mode 100644 index 0000000..9bbfc96 --- /dev/null +++ b/index.html @@ -0,0 +1,98 @@ + + + + Page Title + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ + + + Visit W3Schools + + + +

+ This paragraph contains a lot of lines in the source code, but the browser + ignores it. +

+ + +

This is heading 1

+

This is some text.

+
+

This is heading 2

+

This is some other text.

+
+ + +

This is
a paragraph
with line breaks.

+ + + +

This is a heading

+

This is a paragraph.

+ +

This is a heading

+

This is a paragraph.

+ +

This is a heading

+

This is a paragraph.

+ + + + + + + + + + + + + + + + + + + +
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
+ + + + + + +
    +
  1. Coffee
  2. +
  3. Tea
  4. +
  5. Milk
  6. +
+ + +
+
Coffee
+
- black hot drink
+
Milk
+
- white cold drink
+
+ + diff --git a/middle_part/middle_part.css b/middle_part/middle_part.css new file mode 100644 index 0000000..e69de29 diff --git a/middle_part/middle_part.html b/middle_part/middle_part.html new file mode 100644 index 0000000..e69de29 diff --git a/nav_bar/img/logo.png b/nav_bar/img/logo.png new file mode 100644 index 0000000..33d06e8 Binary files /dev/null and b/nav_bar/img/logo.png differ diff --git a/nav_bar/nav_bar.css b/nav_bar/nav_bar.css new file mode 100644 index 0000000..3edf825 --- /dev/null +++ b/nav_bar/nav_bar.css @@ -0,0 +1,38 @@ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } + + .topnav { + overflow: hidden; + background-color: #FFFF; + } + + .topnav a { + float: left; + color: black; + text-align: end; + padding: 14px 16px; + text-decoration: none; + font-size: 15px; + } + + .topnav a:hover { + color: red; + } + + .topnav a.active { + color: red; + } + + .logo { + width: 200px; + height: 50px; + padding-right: 480px; + padding-left: 30px; + } + + .header-container{ + display: flex; + align-items: center; + } \ No newline at end of file diff --git a/nav_bar/nav_bar.html b/nav_bar/nav_bar.html new file mode 100644 index 0000000..5d7b8cf --- /dev/null +++ b/nav_bar/nav_bar.html @@ -0,0 +1,26 @@ + + + + + + + +
+
+ +
+ +
+ Home + About Us + Doctors + Department + New and Media + Career + Contact Us +
+ + +
+ + diff --git a/top_header/img/doctor_img.png b/top_header/img/doctor_img.png new file mode 100644 index 0000000..e1b5063 Binary files /dev/null and b/top_header/img/doctor_img.png differ diff --git a/top_header/top_header.css b/top_header/top_header.css new file mode 100644 index 0000000..893710d --- /dev/null +++ b/top_header/top_header.css @@ -0,0 +1,113 @@ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } + + .topnav { + margin-top: 30px; + overflow: hidden; + background-color: #FFFF; + } + + .topnav a { + float: left; + color: black; + text-align: end; + padding: 14px 16px; + text-decoration: none; + font-size: 15px; + } + + .topnav a:hover { + color: red; + } + + .topnav a.active { + color: red; + } + + .logo { + width: 200px; + height: 50px; + padding-right: 480px; + padding-left: 30px; + } + + .header-container{ + display: flex; + align-items: center; + } + + + .doctor_img { + width: 95vw; + margin-left: 30px; + margin-right: 30px; + margin-top: 50px; + + } + + .title_1{ + width: 250px; + margin-left: 100px; + margin-top: -400px; + font-size: 20; + } + + h3 { + width: 500px; + color: rgb(181, 181, 181); + font-size: 10; + font-weight: lighter; + + } + + .book-appointment{ + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + width: 75%; + position: absolute; + top: 110%; + left: 50%; + transform: translate(-50%, -50%); + + } + + h4 { + margin-left: 20px; + padding-top: 10px; + } + + + .rounded-input { + border: 1px solid #ccc; + border-radius: 10px; /* Adjust this value to change the radius */ + padding: 5px; + width: 30%; + height: 35px; /* Set the width of each input field */ + margin: 1%; /* Add some margin for spacing */ +} + +/* Style for the container div */ +.input-container { + display: flex; /* Make the children flex items */ + justify-content: space-between; /* Space the children equally */ + margin-bottom: 10px; /* Add some margin for spacing */ +} + + +/* Style for the "Book Appointment" button */ +.book-appointment-button { + background-color: #17C1A3; + border-color: white; + color: white; + border-radius: 10px; + padding: 5px; + width: 30%; + height: 50px; + margin: 1%; + cursor: pointer; + outline: none; +} \ No newline at end of file diff --git a/top_header/top_header.html b/top_header/top_header.html new file mode 100644 index 0000000..b5cb2f0 --- /dev/null +++ b/top_header/top_header.html @@ -0,0 +1,61 @@ + + + + + + + +
+
+
+ +
+ + + + +
+ + +
+ +
+ doc image +
+ +
+

Love & Care to Humanity

+

Fastest-Growing Multi Speciality Hospital in South Kerala

+
+ +
+ +
+

Book an Appoinment

+ +
+ + + +
+ +
+ + + +
+
+ + + +
+ +