PLS Help me to write the code ... i am stuck

I NEED MY WEBPAGE TO look like this .

HTML CODE:

<html>

<head>
    <link rel="stylesheet" type="text/css" href="web-2.css">
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">

</head>

<body>
    <div class="main-page">
        <!-- nav bar-->
         <div class="nav-bar">
            <nav class="nav2">
                <a href="#">Home</a>
                <a href="#">Contact </a>
                <a href="#">About Us</a>
                <a href="#">Register</a>
            </nav>
        </div>
        <!-- End- navbar-->
        <div class="sub-page">
           
               <h1 class="sub-page-1" >START NOW!</h1>
                    <!-- try renamaing the page to main-page " -->
                   <!--<img  class="my-img" alt="homepage" src="simplicity.jpg"/>  -->
        </div>
        
        <div class="all-card">
            <div class="card">
                <div class="image">
                    <div class="img-2">
                        <img src="random1.jpeg" alt="random person" />
                    </div>
                </div>
                <div class="title">
                    <h1>Rebbeca William</h1>
                </div>
                <div class="desp">
                    <p>Description of thisIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
                    <button> Read more </button>
                </div>
            </div>

            <!-- card-2-->
            <div class="card">
                <div class="image">
                    <div class="img-2">
                        <img src="random%202.jpeg" alt="random person" />
                    </div>
                </div>
                <div class="title">
                    <h1>James Hammer</h1>
                </div>
                <div class="desp">
                    <p>Description of thisIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
                    <button> Read more </button>
                </div>
            </div>

            <!-- card-3-->

            <div class="card">
                <div class="image">
                    <div class="img-2">
                        <img  src="random3.jpeg" alt="random person" />
                    </div>
                </div>
                <div class="title">
                    <h1>Jordan Henry</h1>
                </div>
                <div class="desp">
                    <p>Description of thisIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
                    <button> Read more </button>
                </div>
            </div>

        </div>
    </div>
</body>

</html>

CSS CODE:

* {
    padding: 0;
    margin: 0;
}

//.main-page{
background-image: linear-gradient(rgb(242, 239, 239), rgb(206, 204, 204))
/* TRY ADDING ON THE BODY TAG*/
}

.card {
    width: 20%;
    background-color: white;
    //background-image: linear-gradient( to left, rgb(211, 211, 211), rgb(255, 255, 255));
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 40px;
    border: 2px solid black;
}

.card:hover {
    box-shadow: 2px 2px 30px black;
}

.image img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-left: 40px;
    margin-right: 50px;
    margin-top: 20px;

    /* border-------- items--- 
       border-top-right-radius: 360px;
       border-top-left-radius: 360px;
       border-bottom-left-radius: 360px;
       border-bottom-right-radius: 360px;
    */

}

.title {
    text-align: center;
    font-size: 15px;
    margin-top: 12px;
    padding: 10px;
    font-family: 'Merriweather Sans', sans-serif;
}

.desp {
    text-align: center;
    padding: 15px;
    font-family: 'Nanum Gothic', sans-serif;

}

button {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 12px;
    border-radius: 5px;
    background-color: white;
    border: 1px solid black;
    font-size: 15px;
    cursor: pointer;
    font-family: 'Merriweather Sans', sans-serif;
}

button:hover {
    background-color: black;
    color: white;
    border: 1px solid white;
    transition: .5s;

}

.img-2 {
    margin: 0 auto;
    //background-color: aquamarine
}

.all-card {
    display: flex;
    flex: 1;
}


/* NAVIGATION BAR */

nav a {
    text-decoration: none;
    padding: 10px;
    font-size: 40px;
    color: black;
    border: 1px solid black;
    flex: 1;
    text-align: center;
    font-family: 'Asap', sans-serif;
    border-radius: 5px
}

nav {
    display: flex;
    margin: 0px;
    margin-top: 0px;
    //border-radius: 10px 10px 10px 10px; /*---- to  be  tested-----*/
    //border-radius: 50%;                               
}

nav a:hover {
    color: white;
    background-color: black;
    transition: .5s;
}

/* NAVIGATION BAR */
/* CUP-IMAGE -START*/
.sub-page{
    height: 100%;
    width: 100%;
    background-image:linear-gradient(to top ,rgba(0,0,0,0.5),rgb(255, 255, 255)),  url(simplicity.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0;
    padding: 0;
}
.sub-page-1{
    height:50%;
    width:50%;
    //margin-top: 1500px;
   // margin-left: 55%;
    text-align: center;
    padding: 20px;
}
.sub-page-head{
    
}
.my-img{
    height: 100%;
    width:100%; 
    
}

/* CUP-IMAGE -END*/






My advice:
Set up a code pen and add a link here to show what your page looks like now.
Work out what bits don’t look like you want them to and ask questions about each of those bits.

1 Like