FSW_10_July/webpage.html at main · CodeKul/FSW_10_July · GitHub

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
<html>
    <head>
        <title>WebPage</title>
        <style>
            body{
                margin: 0;
            }
            .header {
                text-align: center;
                padding: 2%;
                background-color: #27374D;
                color: #DDE6ED;
                font-size: 40px;
            }
            ul{
                background-color: #526D82;
                margin: 0;
                list-style-type: none;
                overflow: hidden;
            }
            li{
                float: left;
                padding: 1%;
            }
            a{
                color: #DDE6ED;
                text-decoration: none;
                font-size: 20px;
                font-family: 'Times New Roman', Times, serif;
            }

            .container{
                display: flex;
                flex-wrap: wrap;
                justify-content:center;
            }
            .card{
                overflow: hidden;
                height: 80%;
                width: 40%;
                border: 2px solid gray;
                margin: 1%;
            }
            img{
                height: 70%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <!-- Header -->
        <div class="header">CodeKul</div>

        <!-- NavBar -->
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Help</a></li>
            <li><a href="">Services</a></li>
        </ul>

        <!-- Middle Content -->
        <div class="container">
            <div class="card">
                <img  src="https://img.freepik.com/free-vector/tiny-graphic-designer-drawing-with-big-pen-computer-screen-creators-work-creative-woman-working-laptop-flat-vector-illustration-digital-design-concept-banner-landing-web-page_74855-25342.jpg?w=2000" alt="">
                <div class="ctitle">Lorem ipsum dolor sit amet.</div>
                <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste reprehenderit, asperiores nulla similique reiciendis dolore tempore eveniet optio minus sapiente! ipsum dolor sit amet consectetur, adipisicing elit. Doloribus voluptatibus sint incidunt esse similique consequatur repudiandae nulla placeat aspernatur distinctio.</p>
            </div>
            <div class="card">
                <img  src="https://img.freepik.com/free-vector/tiny-graphic-designer-drawing-with-big-pen-computer-screen-creators-work-creative-woman-working-laptop-flat-vector-illustration-digital-design-concept-banner-landing-web-page_74855-25342.jpg?w=2000" alt="">
                <div class="ctitle">Lorem ipsum dolor sit amet.</div>
                <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste reprehenderit, asperiores nulla similique reiciendis dolore tempore eveniet optio minus sapiente! ipsum dolor sit amet consectetur, adipisicing elit. Doloribus voluptatibus sint incidunt esse similique consequatur repudiandae nulla placeat aspernatur distinctio.</p>
            </div>
            <div class="card">
                <img  src="https://img.freepik.com/free-vector/tiny-graphic-designer-drawing-with-big-pen-computer-screen-creators-work-creative-woman-working-laptop-flat-vector-illustration-digital-design-concept-banner-landing-web-page_74855-25342.jpg?w=2000" alt="">
                <div class="ctitle">Lorem ipsum dolor sit amet.</div>
                <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste reprehenderit, asperiores nulla similique reiciendis dolore tempore eveniet optio minus sapiente! ipsum dolor sit amet consectetur, adipisicing elit. Doloribus voluptatibus sint incidunt esse similique consequatur repudiandae nulla placeat aspernatur distinctio.</p>
            </div>
            <div class="card">
                <img  src="https://img.freepik.com/free-vector/tiny-graphic-designer-drawing-with-big-pen-computer-screen-creators-work-creative-woman-working-laptop-flat-vector-illustration-digital-design-concept-banner-landing-web-page_74855-25342.jpg?w=2000" alt="">
                <div class="ctitle">Lorem ipsum dolor sit amet.</div>
                <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste reprehenderit, asperiores nulla similique reiciendis dolore tempore eveniet optio minus sapiente! ipsum dolor sit amet consectetur, adipisicing elit. Doloribus voluptatibus sint incidunt esse similique consequatur repudiandae nulla placeat aspernatur distinctio.</p>
            </div>
        </div>
    </body>
</html>