Learn how to create a stunning doctor appointment landing page using HTML and CSS with our step-by-step tutorial. Source code included for easy implementation.
Table of Contents
In this guide, we'll delve into the world of web development, focusing on creating a doctor appointment landing page using HTML and CSS. Whether you're new to coding or a seasoned developer, this step-by-step tutorial will equip you with the knowledge and skills to craft a professional-looking and functional web page. From structuring your HTML to styling with CSS and adding interactive elements, we'll cover everything you need to know to bring your doctor appointment landing page to life. Let's get started!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our landing page.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the HTML code:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: This tag defines the root element of the HTML document. The "lang" attribute specifies the language of the document, which is English in this case.
3. <head>: This section contains meta-information about the document, such as its title, character encoding, and links to external resources like stylesheets and scripts.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters from various languages.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport width to the device's width and sets the initial zoom level to 1.0, ensuring proper rendering on mobile devices.
- <title>Doctor Appointment Landing Page</title>: Sets the title of the webpage displayed on the browser tab.
- <link rel="stylesheet" href="https://maxcd...css">: Links to a stylesheet provided by Font Awesome, which is used for icons.
- <link rel="stylesheet" href="https://cdnjs.cl..">: Links to the Normalize.css stylesheet, which normalizes styles across different browsers.
- <link rel="stylesheet" href="styles.css">: Links to an external stylesheet named "styles.css" for custom styling of the webpage.
4. <body>: This section contains the content of the webpage.
- The content is divided into several <section> elements, each representing a distinct part of the webpage, such as the main header, how-it-works section, question section, talk section, signup section, footer, and social media section.
- Within each section, there are various <div> elements containing different components such as headers, content, buttons, forms, and lists.
- <img> tags are used to display images throughout the webpage, with the "src" attribute specifying the image URLs.
- <a> tags are used for hyperlinks, with the "href" attribute specifying the destination URLs.
- Icons are included using <i> tags with Font Awesome class names.
This is the basic structure of our landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the website is in place, the next step is to add styling to the website using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our landing page. Let's break down the CSS code:
1. Font Import:
- @import url("https://fonts.google..");: This imports the "Lato" font family from Google Fonts with three different weights: 300 (light), 400 (regular), and 900 (bold).
2. Universal Box Sizing:
- * { box-sizing: border-box; }: Applies a box-sizing property of border-box to all elements on the page, ensuring that padding and border are included in the element's total width and height.
3. Global Styles:
- html, body { font-family: "Lato", sans-serif; }: Sets the font family for the entire document to "Lato", falling back to the generic sans-serif font family.
- a { text-decoration: none; color: black; }: Removes underline from anchor tags and sets the color to black.
- ul { list-style-type: none; margin: 0; padding: 0; }: Removes default list styling and margins/padding from unordered lists.
4. Layout Styles:
- .container { width: 960px; max-width: 90%; margin: 0 auto; }: Defines a container class with a fixed width of 960 pixels (with a maximum width of 90% of the viewport width) and centers it horizontally on the page.
- .main-header { ... }: Styles for the main header section, including a background image, menu, app icons, and overlay.
5. Header Styles:
- .container header { ... }: Styles for the header inside the container, including flex layout, logo, and navigation links.
- .container header .logo { ... }: Styles for the logo inside the header, including flex layout and logo image.
- .container header .nav a { ... }: Styles for the navigation links inside the header, including padding, color, and text transformation.
6 Content Styles:
- .content .content-wrapper { ... }: Styles for the content wrapper, including width and alignment.
- .content .content-wrapper .blob { ... }: Styles for blob text content, including font size, color, and margin.
- .content .content-wrapper .button-wrapper { ... }: Styles for the button wrapper, including margin and flex layout.
- .content .content-wrapper .button { ... }: Styles for buttons, including padding, background color, text color, and border radius.
7. Footer Styles:
- .footer { padding: 50px 0px; }: Styles for the footer section, including padding.
8. Column Styles:
- .col-wrapper { ... }: Styles for column wrappers, including flex layout.
- .col-wrapper .col-1 { ... }: Styles for the first column, including width and alignment.
- .col-wrapper .col-1 li { ... }: Styles for list items inside the first column, including margin.
- .col-wrapper .col-1 li a { ... }: Styles for links inside list items, including font size, color, and transition effects.
9. Social Media Section Styles:
- #social-media { ... }: Styles for the social media section, including padding.
- #social-media .social-wrapper { ... }: Styles for the social media wrapper, including flex layout.
- #social-media .social-wrapper .copyright { ... }: Styles for copyright text, including text transformation, font size, and color.
- #social-media .social-wrapper .icons i { ... }: Styles for social media icons, including size, color, and transition effects.
- #social-media .slug { ... }: Styles for the slug section, including flex layout.
10. How It Works Section (#how-it-works):
- Sets the padding of 100 pixels on the top and bottom.
- Styles the introductory text.
- Styles the section title and content.
- Styles the icon wrapper for displaying icons and their associated text.
- Defines the appearance of icons, including their size, background, color, and hover effects.
11. Question Section (#question):
- Sets the background color to a shade of teal and padding of 150 pixels on the top and bottom.
- Styles the section title and content, including font size, alignment, and color.
- Defines the appearance of the form, including input fields and an icon.
12. Talk Section (#talk):
- Defines a two-column layout for displaying content.
- Styles the left column (col-50) with padding.
- Styles the right column (col-50:nth-child(2)) with a background image and positioning.
- Defines the appearance of the section title and content, including font size and line height.
- Styles the options list.
13. Signup Section (#signup):
- Sets the padding of 100 pixels on the top and bottom.
- Styles the section title and content.
- Styles the button wrapper and buttons, including background color, border, and hover effects.
14. Main Header Styles (@media (max-width: 750px)):
- Hides the app icons and navigation links in the main header.
- Displays a menu icon with increased font size and white color.
- Adjusts the size of the logo image and text.
- Modifies the styles of content within the main header, such as blob text and buttons.
15. Footer Styles (@media (max-width: 750px)):
- Reduces the padding of the footer.
- Changes the layout of columns in the footer to a block display.
- Adjusts the width, alignment, and styling of elements within the footer.
16. Social Media Section Styles (@media (max-width: 750px)):
- Removes padding from the social media section.
- Changes the layout of social media icons and text to center-aligned blocks.
17. How It Works Section Styles (@media (max-width: 750px)):
- Adjust padding for the "How It Works" section.
- Modifies the size and spacing of introductory text.
- Changes the appearance and layout of icons.
18. Question Section Styles (@media (max-width: 750px)):
- Adjust padding for the "Question" section.
- Modifies the font size and maximum width of content.
- Adjusts input field styling within the form.
19. Talk Section Styles (@media (max-width: 750px)):
- Adjust padding for the "Talk" section.
- Modifies the font size, alignment, and layout of content within the section.
- Adjust column layout and styling.
20. Signup Section Styles (@media (max-width: 750px)):
- Adjust padding for the "Signup" section.
- Modifies the font size and styling of the section title, content, and buttons within the section.
This will give our doctor appointment landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,900");
* {
box-sizing: border-box;
}
html, body {
font-family: "Lato", sans-serif;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.container {
width: 960px;
max-width: 90%;
margin: 0 auto;
}
.main-header {
position: relative;
background-image: url(https://previews.123rf.com/images/michaeljung/michaeljung1302/michaeljung130200296/17781867-handsome-african-american-medical-doctor-with-colleagues-in-background.jpg);
background-size: cover;
}
.main-header .menu {
display: none;
}
.main-header .app-icons {
position: absolute;
max-width: 450px;
top: 40%;
right: 20px;
opacity: 0.4;
}
.main-header .overlay {
background: rgba(62, 209, 204, 0.9);
padding: 0px 0px 80px 0px;
}
.container header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 0px;
}
.container header .logo {
display: flex;
align-items: center;
}
.container header .logo img {
width: 50px;
margin-right: 10px;
}
.container header .logo span {
font-size: 40px;
color: white;
width: 50px;
}
.container header .nav a {
display: inline-block;
padding: 15px 20px;
margin-left: 20px;
color: white;
text-transform: uppercase;
font-size: 12px;
}
.container header .nav a.active {
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
.content .content-wrapper {
width: 500px;
}
.content .content-wrapper .blob {
font-size: 50px;
font-weight: 300;
text-align: left;
margin-bottom: 20px;
color: white;
}
.content .content-wrapper .button-wrapper {
margin-top: 50px;
display: flex;
}
.content .content-wrapper .button-wrapper .button {
margin-right: 20px;
padding: 25px 30px;
background: #ec2c82;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
font-size: 10px;
font-weight: 400;
letter-spacing: 2px;
}
.content .content-wrapper .button-wrapper .button.ask {
background: rgba(0, 0, 0, 0.4);
}
.content .content-wrapper .button-wrapper .button span {
margin-left: 20px;
}
.footer {
padding: 50px 0px;
}
.col-wrapper {
display: flex;
}
.col-wrapper .col-1 {
width: 25%;
}
.col-wrapper .col-1 .logo {
display: flex;
align-items: center;
}
.col-wrapper .col-1 .logo span {
font-size: 40px;
margin-left: 15px;
color: #3ed1cc;
}
.col-wrapper .col-1 .logo img {
width: 50px;
}
.col-wrapper .col-1 li {
margin-bottom: 15px;
}
.col-wrapper .col-1 li a {
font-size: 14px;
font-weight: 900;
color: #999;
transition: all ease-in-out 300ms;
}
.col-wrapper .col-1 li a:hover {
color: #3ed1cc;
}
.col-wrapper .col-1 li a.header {
color: black;
font-size: 16px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
}
#social-media {
padding: 30px 0px;
}
#social-media .social-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
#social-media .social-wrapper .copyright {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
color: #999;
letter-spacing: 2px;
}
#social-media .social-wrapper .icons i {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
border: 1px solid #999;
margin: 0px 10px;
border-radius: 50%;
line-height: 40px;
font-size: 20px;
color: #3ed1cc;
cursor: pointer;
transition: all ease-in-out 300ms;
}
#social-media .social-wrapper .icons i:hover {
background: #3ed1cc;
color: white;
border: 1px solid white;
}
#social-media .slug {
display: flex;
align-items: center;
}
#social-media .slug span {
color: #999;
text-transform: uppercase;
font-size: 12px;
font-weight: 900;
}
#social-media .slug img {
width: 20px;
margin-left: 15px;
}
#how-it-works {
padding: 100px 0px;
}
#how-it-works .intro {
margin-bottom: 100px;
font-size: 25px;
color: #999;
display: flex;
align-items: center;
}
#how-it-works .intro span {
color: #3ed1cc;
margin-left: 20px;
text-transform: uppercase;
display: flex;
align-items: center;
font-size: 16px;
font-weight: 900;
}
#how-it-works .intro span i {
font-size: 10px;
margin-left: 10px;
}
#how-it-works .slug {
text-transform: uppercase;
text-align: center;
color: #999;
letter-spacing: 2px;
}
#how-it-works .title {
font-size: 50px;
letter-spacing: 2px;
text-align: center;
margin-bottom: 20px;
}
#how-it-works .content {
width: 740px;
margin: 0 auto 100px;
text-align: center;
font-size: 20px;
line-height: 1.4;
}
#how-it-works .icon-wrapper {
display: flex;
justify-content: space-around;
width: 900px;
margin: 0 auto;
max-width: 95%;
}
#how-it-works .icon-wrapper .icon {
text-align: center;
}
#how-it-works .icon-wrapper .icon i {
display: inline-block;
width: 75px;
height: 75px;
margin-bottom: 15px;
line-height: 75px;
border-radius: 50%;
background: white;
font-size: 30px;
box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.2);
color: #3ed1cc;
cursor: pointer;
transition: all ease-in-out 300ms;
}
#how-it-works .icon-wrapper .icon i:hover {
background: #3ed1cc;
color: white;
}
#how-it-works .icon-wrapper .icon p {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
#question {
background: #3ed1cc;
padding: 150px 0px;
}
#question .title {
font-size: 40px;
font-weight: 300;
text-align: center;
margin-bottom: 20px;
color: white;
}
#question .content {
width: 640px;
margin: 0 auto;
text-align: center;
line-height: 1.2;
font-size: 18px;
margin-bottom: 80px;
color: white;
}
#question .form {
width: 640px;
margin: 0 auto;
position: relative;
}
#question .form input {
width: 100%;
padding: 20px 0px;
outline: none;
border: none;
text-indent: 20px;
border-radius: 5px;
box-shadow: 0px 2px 3px 5px rgba(0, 0, 0, 0.1);
}
#question .form i {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
color: #3ed1cc;
font-size: 18px;
}
#talk .col-wrapper {
display: flex;
min-height: 500px;
}
#talk .col-wrapper .col-50 {
width: 50%;
padding: 50px;
}
#talk .col-wrapper .col-50:nth-child(2) {
background-image: url(https://stage.webpsychology.com/sites/default/files/article_images/shutterstock_84259324.jpg);
size: cover;
position: top;
}
#talk .title {
font-size: 40px;
margin: 80px 0px 20px 20px;
}
#talk .content {
font-size: 18px;
line-height: 1.3;
max-width: 540px;
}
#talk .options {
margin-top: 50px;
}
#talk .options li {
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}
#talk .options li span {
margin-right: 10px;
color: #3ed1cc;
}
#signup {
padding: 100px 0px;
}
#signup .slug {
text-transform: uppercase;
color: #999;
text-align: center;
margin-bottom: 20px;
}
#signup .title {
font-size: 40px;
text-align: center;
margin-bottom: 20px;
}
#signup .content {
max-width: 640px;
margin: 0 auto 50px;
text-align: center;
line-height: 1.5;
}
#signup .button-wrapper {
text-align: center;
}
#signup .button-wrapper button {
outline: none;
padding: 30px 50px;
margin: 0px 20px;
text-transform: uppercase;
border-radius: 50px;
background: white;
color: #3ed1cc;
border: 2px solid #3ed1cc;
cursor: pointer;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
transition: all ease-in-out 300ms;
}
#signup .button-wrapper button:hover {
background: #3ed1cc;
color: white;
}
@media (max-width: 750px) {
.main-header .app-icons {
display: none;
}
.main-header .nav {
display: none;
}
.main-header .menu {
display: block;
font-size: 40px;
color: white;
cursor: pointer;
}
.main-header .container .logo img {
width: 40px;
}
.main-header .container .logo span {
font-size: 30px;
margin-left: 10px;
}
.main-header .content .content-wrapper .blob {
font-size: 40px;
text-align: center;
}
.main-header .content .content-wrapper .button-wrapper {
justify-content: center;
}
.main-header .content .content-wrapper .button-wrapper .button {
font-size: 10px;
padding: 20px 10px;
}
.footer {
padding: 10px 0px;
}
.footer .col-wrapper {
display: block;
}
.footer .col-wrapper .col-1 {
width: 90%;
text-align: center;
margin-bottom: 20px;
}
.footer .col-wrapper .col-1:last-child {
margin-bottom: 0px;
}
.footer .col-wrapper .logo {
display: block;
}
.footer .col-wrapper .logo img {
width: 50px;
display: block;
margin: 0 auto;
}
.footer .col-wrapper .logo span {
font-size: 40px;
}
#social-media {
padding: 0px;
}
#social-media .social-wrapper {
display: block;
text-align: center;
}
#social-media .social-wrapper .slug {
display: block;
}
#social-media .social-wrapper .icons {
margin: 20px 0px;
}
#how-it-works {
padding: 40px 20px;
}
#how-it-works .intro {
font-size: 20px;
margin-bottom: 30px;
}
#how-it-works .intro span {
margin-left: 5px;
font-size: 12px;
}
#how-it-works .slug {
color: black;
font-size: 14px;
}
#how-it-works .title {
font-size: 30px;
}
#how-it-works .content {
max-width: 360px;
margin-bottom: 20px;
font-size: 18px;
}
#how-it-works .icon-wrapper {
display: block;
width: 100%;
}
#how-it-works .icon-wrapper .icon {
width: 100%;
}
#how-it-works .icon-wrapper .icon i {
font-size: 20px;
width: 60px;
height: 60px;
line-height: 60px;
}
#how-it-works .icon-wrapper .icon p {
font-weight: 300;
}
#question {
padding: 20px 0px 80px;
}
#question .title {
font-size: 30px;
}
#question .content {
max-width: 450px;
font-size: 16px;
margin-bottom: 30px;
}
#question .form {
max-width: 360px;
}
#question .form input {
padding: 10px;
}
#talk {
padding: 20px 30px;
}
#talk .title {
margin-top: 20px;
text-align: center;
margin-bottom: 10px;
font-size: 30px;
}
#talk .content {
text-align: center;
font-weight: 300;
font-size: 16px;
line-height: 1.5;
}
#talk .col-wrapper {
display: block;
}
#talk .col-wrapper .col-50 {
width: 100%;
padding: 20px 0px;
}
#talk .col-wrapper .col-50:last-child {
min-height: 400px;
padding: 0px 30px;
background-position: top left;
}
#signup {
padding: 20px;
}
#signup .slug {
font-size: 14px;
margin-bottom: 10px;
}
#signup .title {
font-size: 30px;
}
#signup .content {
font-size: 14px;
}
#signup .button-wrapper button {
font-size: 12px;
padding: 20px 20px;
margin: 0px 5px;
}
} Final Output:
Conclusion:
Congratulations on completing this tutorial on creating a doctor appointment landing page with HTML and CSS! You've learned valuable skills that can be applied to many other web development projects. Remember to keep practicing and experimenting with different techniques to further enhance your abilities. With your newfound knowledge, you're well-equipped to continue exploring the exciting world of web development. Keep building, keep learning, and enjoy the journey ahead!
Code by: Esco
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: html, css, doctor appointment, landing page, source code, custom html/css for doctor appointment page, building doctor appointment page with html and css, doctor appointment landing page tutorial
End of the article
