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*/