Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@2232def
2232def authored Apr 4, 2024
1 parent e755af0 commit 7d79d0e
Show file tree
Hide file tree
Showing 2 changed files with 336 additions and 0 deletions.
106 changes: 106 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="background">
<video autoplay loop muted plays-inline class="background-clip">
<source src="GF and BF.mp4" type="">
</video>
</div>
<div class="section">

<nav>
<ul class="logo">Logo</ul>


<ul class="nav-list">
<li><a href="login">login</a></li>
<li><a href="about">About</a></li>
<li><a href="description">Description</a></li>
</ul>

</nav>
</div>
<section class="home" id="home">

<div class="container">

<h1 style="text-transform: uppercase;">Crush</h1>
<h1 style="text-transform: uppercase;">connect</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa reprehenderit dignissimos perferendis inventore
eius quasi nam excepturi earum voluptate? Nihil, pariatur alias laborum in molestias atque vero deserunt omnis
facilis </p>
<a href="#"><button>view more</button></a>
</div>

<div class="box-container">

<div class="box">
<img class="logo1" src="https://img.icons8.com/fluency/48/000000/login-rounded-down.png"
alt="login-rounded-down" />
<h3>Signin</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae?</p>
</div>

<div class="box">
<img class="logo1" src="icons8-chat.gif"
alt="login-rounded-down" /></i>
<h3>chat</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae?</p>
</div>

<div class="box">
<img class="logo1" src="stock-vector-boy-and-girl-playing-smart-phone-542051818.jpg"
alt="login-rounded-down" /></i>
<h3>connect</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae?
</div>

</div>
</section>

<section class="about" id="about">
<h1 class="heading">About us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam accusamus facilis excepturi tempora necessitatibus
nihil, praesentium mollitia debitis vero distinctio explicabo nisi quae</p>
<h3 class="title">Start Journey with us</h3>
</div>
</section>

<section class="example" id="example">
<h1>Some of our most famous reviewers</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa laborum recusandae quidem similique, aliquam,
voluptates, minus quas aspernatur vitae quae inventore ea? Esse error modi laborum illum officia. Nemo tempore
recusandae perspiciatis amet?</p>

<div class="card-container">
<div class="card">
<img class="img1" src="Mome.jpeg" alt="Modi and Meloni">
<h3>Narendra modi and Giorgia meloni</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, esse?</p>
</div>
<div class="card">
<img class="img2" src="actors.jpeg" alt="Brad Pitt and Angelina Jolie's ">
<h3>Brad Pitt and Angelina Jolie's </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, esse?</p>
</div>
<div class="card">
<img class="img3" src="K and A.jpeg" alt="Kohli and Anuskha">
<h3>Kohli and Anuskha</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, esse?</p>
</div>
</div>

</section>

<script src="script.js"></script>
</body>

</html>
230 changes: 230 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
html {
overflow-x: hidden;
}

body {
margin: 0;
padding: 0;
}

.background {
background-color: rgb(223, 137, 234);
background-attachment: fixed;
background-size: cover;
}

.background .background-clip {
position: absolute;
right: 0;
bottom: 0;
opacity: 0.6;
z-index: -1;
width: -webkit-fill-available;
}


.section {
background-color: rgb(255, 148, 214);
width: 94%;
border-radius: 20rem;
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
padding: 0rem 1rem;
}



nav {
display: flex;
justify-content: flex-end;
align-items: center;
}

.logo {
cursor: pointer;
margin-right: auto;
color: rgb(0, 0, 0);
}

.nav-list a {
list-style: none;
font-family: fantasy;
text-decoration: none;
color: rgb(163, 46, 163);
}

.nav-list li {
display: inline-block;
padding: 0px 30px;
}

.nav-list li a {
transition: all 0.3s ease 0s;
}

.nav-list li a:hover {
color: #ff2af4;
}

.home .container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-flow: column;
padding-top: 14rem;
padding-bottom: 4rem;
}


.home .container h1 {
font-size: 8rem;
padding: 0 3rem;
margin: -3rem;
color: violet;
text-shadow: 0rem 0.5rem 0.7rem rgb(141, 4, 141);
}

.home .container p {
padding: 2rem;
color: rgb(87, 87, 87);
}

.home .container button {
height: 32px;
width: 110px;
border-radius: 50px;
background-color: hwb(341 45% 0%);
color: azure;
font-size: 17px;
cursor: pointer;
transition: 0.2s;
border: none;
box-shadow: 0rem 0.2rem 0.3rem rgb(88, 3, 45);
}

.home .container button:hover {
letter-spacing: 1px;
}

.home .box-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.home .box-container .box {
height: 18rem;
width: 21rem;
background: white;
text-align: center;
border-radius: 2rem;
box-shadow: 0 0.3rem 0.5rem black;
margin: 2rem;
cursor: pointer;
}

.home .box-container .box .logo1 {
padding-top: 15px;
height: 5rem;
width: 5rem;
}

.home .box-container .box h3 {
font-size: 1.5rem;
color: rgb(89, 11, 105);
transition: 0.3s;
}

.home .box-container .box h3:hover {
color: rgb(219, 126, 213);
}

.home .box-container .box p {
font-size: 1.1rem;
padding: 1rem 2rem;
}

.home::before {
content: '';
position: absolute;
bottom: -25rem;
left: 50%;
transform: translateX(-50%);
border-top: 70vh solid white;
width: 120%;
border-radius: 50%;
z-index: -1;
}

/*section for about*/

.heading {
font-size: 4rem;
color: rgb(234, 6, 44);
text-align: center;
padding: 0 1rem;
padding-top: 6rem;
letter-spacing: 0.3rem;
font-weight: 500;
}

.title {
padding: 0 1rem;
font-size: 2rem;
text-align: center;
color: brown;
}

/*example starts*/

.example {
background: aliceblue;
}

.example .card-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 2rem 0;
}

.example .card-container .card {
padding: 2rem;
margin: 2rem;
width: 23rem;
background: #fff;
text-align: center;
box-shadow: 0 0.3rem 0.5rem black;
}



.example .card-container .card .img1 {
height: 14rem;
width: 100%;
object-fit: cover;
}


.example .card-container .card .img2 {
height: 14rem;
width: 100%;
}


.example .card-container .card .img3 {
height: 14rem;
width: 100%;
object-fit: cover;
}

.example h1 {
text-align: center;
color: rgb(255, 83, 83);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

0 comments on commit 7d79d0e

Please sign in to comment.