HTML CSS

# Web Board

Preview Full HTML

index.html

<html>

<head>
    <title>MyWebsite</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

</head>

<body>
    <div class="contrainer">
        <div class="header">
            <h1>My Website</h1>
            <p style="margin-block-end: 3rem">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."<br> "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
            <div class="bar">
                <div>
                    <a href="#">link</a>
                    <a href="#">link</a>
                    <a href="#">link</a>

                </div>
                <div>
                    <a href="#">link</a>
                </div>

            </div>
        </div>
        <div class="content">
            <div class="postList">
                <div class="post">
                    <h2>TITLE HEADING</h2>
                    <p style=" font-weight: bold;">Title description, Dec 7, 2017</p>
                    <div class="picBig">
                        <p>Image</p>
                    </div>
                    <p>Some text..<br> Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                </div>
                <div class="post">
                    <h2>TITLE HEADING</h2>
                    <p style=" font-weight: bold;">Title description, Dec 7, 2017</p>
                    <div class="picBig">
                        <p>Image</p>
                    </div>
                    <p>Some text..<br> Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                </div>

            </div>
            <div class="etcList">
                <div class="etc">
                    <h2>About Me</h2>
                    <div class="picBig picSmall">
                        <p>Image</p>
                    </div>
                    <p>Some text..<br> Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

                </div>
                <div class="etc">
                    <h2>Popular Post</h2>
                    <div class="picBig picSmall">
                        <p>Image</p>
                    </div>
                    <div class="picBig picSmall">
                        <p>Image</p>
                    </div>
                    <div class="picBig picSmall">
                        <p>Image</p>
                    </div>

                </div>
                <div class="etc">
                    <h2>Follow Me</h2>

                    <p>Some text..</p>

                </div>

            </div>

        </div>
        <div class="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

style.css

body {
    font-family: 'Montserrat', sans-serif;
    background-color: rgb(255, 192, 0);
    margin: 0;
}

* {
    box-sizing: border-box;
}

.header {
    text-align: center;
    padding-top: 2rem;
    background-color: whitesmoke;
}

.contrainer {
    display: flex;
    flex-direction: column;
}

.bar {
    background-color: black;
    padding: 1rem;
    display: flex;
    justify-content: space-between
}

a {
    text-decoration: none;
    margin: 0.5rem;
    color: whitesmoke;
}

.picBig {
    padding: 2rem;
    background-color: gray;
    height: 20rem;
    /* width: 100%; */
}

.picSmall {
    height: 10rem;
}

.content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    margin-top: 1rem;
}

.postList {
    margin: 1rem;
    display: flex;
    flex-direction: column;
}

.etcList {
    margin: 1rem;
    display: flex;
    flex-direction: column;
}

.etc {
    margin-bottom: 1rem;
    background-color: whitesmoke;
    /* margin: 1rem; */
    padding: 2rem;
    width: 100%;
}

.post {
    margin-bottom: 1rem;
    background-color: whitesmoke;
    /* margin: 1rem; */
    padding: 2rem;
    width: 100%;
}

.footer {
    /* padding: 2rem; */
    background-color: gray;
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83