Easy Tutorial
❮ Cglibcode Generation Library Intro Mac Os Ssh Pem ❯

Design a Web Page with HTML/CSS

Category Programming Techniques

Let's create a simple responsive web page using HTML/CSS.

Before we start learning, we can take a look at the effect: https://www.tutorialpro.org/try/demo_source/tryhtmlcss_website.htm

CSS Code

* {
    box-sizing: border-box;
}

/* Body style */
body {
    font-family: Arial;
    margin: 0;
}

/* Header */
.header {
    padding: 80px;
    text-align: center;
    background: #1abc9c;
    color: white;
}

/* Enlarge header font */
.header h1 {
    font-size: 40px;
}

/* Navigation */
.navbar {
    overflow: hidden;
    background-color: #333;
}

/* Navigation bar style */
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

/* Right link */
.navbar a.right {
    float: right;
}

/* Color when hovering over a link */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Row container */
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* Create two columns */
/* Sidebar */
.side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}

/* Main content area */
.main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: white;
    padding: 20px;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
}

/* Responsive layout - when the screen device width is less than 700px, stack the two columns vertically */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
    }
}

/* Responsive layout - when the screen device width is less than 400px, stack the navigation bar vertically */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}

HTML Code

``` <div class="header"> <h1>tutorialpro.org Web Page Test Example</h1> <p>Create a page.</p> </div>

<div class="navbar"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#" class="right">Link</a> </div>

<div class="row"> <div class="side"> <h2>About Me</h2> <h5>My Photo:</h5> <div class="fakeimg" style="height:200px;">Insert image here</div> <p>Introduction about me...</p> <h3>More Content</h3> <p>More about me</p> <div class="fakeimg" style="height:60px;">Insert image here</div><br> <div class="fakeimg" style="height:60px;">Insert image here</div><br> <div class="fakeimg" style="height:60px;">Insert image here</div> </div> <div class="main"> <h2>Title</h2> <h5>Subtitle</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text...</p> <p>tutorialpro.org, what you learn is not only technology, but also dreams!!! tutorialpro.org, what you learn is not only technology, but also dreams!!! tutorialpro.org, what you learn is not only technology, but also dreams!!!</p> <br> <h2>Title</h2> <h5>Subtitle</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text...</p> <p>tutorialpro.org, what you learn is not only technology, but also dreams!!! tutorialpro.org, what you learn is not only technology, but also dreams

❮ Cglibcode Generation Library Intro Mac Os Ssh Pem ❯