Skip to content

Commit 45f99d3

Browse files
alirezatayebinejadalirezatayebinejad
committed
first commit
0 parents  commit 45f99d3

File tree

10 files changed

+130
-0
lines changed

10 files changed

+130
-0
lines changed

‎design 1/bg.png‎

6.08 KB
Loading

‎design 1/img1.png‎

362 KB
Loading

‎design 1/img2.png‎

295 KB
Loading

‎design 1/img3.png‎

214 KB
Loading

‎design 1/img4.png‎

7.9 KB
Loading

‎design 1/img5.png‎

9.1 KB
Loading

‎design 1/img6.png‎

12.1 KB
Loading

‎design 1/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>design 1</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<!--swiperjs.com>>getstarted>>use swiper from CDN>>demos-->
10+
<link
11+
rel="stylesheet"
12+
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
13+
/>
14+
</head>
15+
16+
<body>
17+
<div class="container">
18+
<div class="wave">
19+
<img src="bg.png" alt="" />
20+
</div>
21+
<nav>
22+
<ul>
23+
<li><a href="#">Home</a></li>
24+
<li><a href="#">Products</a></li>
25+
<li><a href="#">Service</a></li>
26+
<li><a href="#">Types</a></li>
27+
<li><a href="#">FAQ</a></li>
28+
</ul>
29+
<img class="logo" src="logo.png" alt="" />
30+
</nav>
31+
<div class="main-content">
32+
<div class="image-pista">
33+
<img src="img1.png" alt="" />
34+
</div>
35+
<div class="main-text">
36+
<h1>The Pistachios</h1>
37+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
38+
<button>Know More</button>
39+
</div>
40+
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
41+
</div>
42+
</div>
43+
</body>
44+
</html>

‎design 1/logo.png‎

19.9 KB
Loading

‎design 1/style.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
font-family: "Montserrat", sans-serif;
6+
}
7+
.container {
8+
height: 100vh;
9+
width: 100%;
10+
background: linear-gradient(to right, #1f1f1f 70%, #252526 30%);
11+
position: relative;
12+
overflow: hidden; /* no scroll bar even if its nessecery*/
13+
}
14+
.wave {
15+
position: absolute;
16+
top: 0;
17+
right: 30%;
18+
}
19+
nav {
20+
width: 90%;
21+
margin: auto;
22+
padding-top: 20px;
23+
display: flex;
24+
align-items: center;
25+
justify-content: space-between;
26+
}
27+
nav ul {
28+
display: flex;
29+
list-style-type: none;
30+
}
31+
nav ul li {
32+
margin: 0 5px;
33+
}
34+
nav ul li a {
35+
text-decoration: none;
36+
color: #ece5d8;
37+
background-color: #252526;
38+
border-radius: 50px;
39+
padding: 0.5rem 1rem;
40+
font-size: 17px;
41+
font-weight: bold;
42+
transition: 0.3s;
43+
}
44+
nav ul li a:hover {
45+
background-color: #516e3c;
46+
}
47+
48+
/*main*/
49+
50+
.main-content {
51+
width: 60%;
52+
padding-top: 100px;
53+
margin-left: 3rem;
54+
display: flex;
55+
align-items: center;
56+
justify-content: space-around;
57+
}
58+
.image-pista,
59+
.main-text {
60+
flex-basis: 50%;
61+
}
62+
.image-pista img {
63+
width: 100%;
64+
}
65+
.main-content h1 {
66+
font-size: 60px;
67+
letter-spacing: 1px;
68+
color: #3c9151;
69+
}
70+
.main-content p {
71+
margin-top: 10px;
72+
font-size: 15px;
73+
letter-spacing: 1px;
74+
color: #c7c7c7;
75+
}
76+
.main-content button {
77+
margin-top: 2.5rem;
78+
outline: none;
79+
border: none;
80+
font-size: 18px;
81+
padding: 0.5rem 2.5rem 0.5rem 1rem;
82+
border-radius: 0 50% 50% 0;
83+
background-color: #3c9151;
84+
color: white;
85+
cursor: pointer;
86+
}

0 commit comments

Comments
 (0)