personalweb/index.html at main · Ren-webious/personalweb · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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="./css/main.css">
    <link rel="stylesheet" href="./css/main2.css">
</head>
<body class="m-0 p-0 bg-[#c9c9c9a5]">
<div class=" flex items-center bg-rose-600 max-w-full h-[40px]">

 <img src="./media/background1.webp" alt="" class=" absolute inset-0 w-full h-[300px] md:h-[400px] lg:h-[500px] object-cover">
 <nav class="bg-[#979797dc]  text-white p-4 w-full z-10">
    <ul class="flex justify-center space-x-4">
        <li><a href="#" class="hover:underline">Home</a></li>
        <li><a href="#" class="hover:underline">About</a></li>
        <li><a href="#" class="hover:underline">Projects</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
    </ul>
</nav>

</div>


<div class="relative w-full flex flex-col items-center mt-32 px-4 sm:px-8 lg:px-16">
    <div class="bg-[#a8a8a8d7] text-white p-8 sm:p-12 lg:p-16 text-center rounded-lg">
        <h1 class="font-bold text-3xl sm:text-4xl lg:text-5xl">HI, I'M REN</h1>
        <p class="text-sm sm:text-base lg:text-lg">Web Developer and Designer</p>
    </div>
</div>
<!--help-board-->
 <h1 class="font-bold text-3xl mt-20 text-[#6e6e6e]
        sm:mt-48 lg:mt-54 ml-10">
          • how can i help you?</h1>

       <div class="flex-col lg:flex lg:flex-row items-center justify-center lg:gap-x-10
       sm:grid sm:grid-cols-2
       ">
        <div class=" bg-[#a8a8a8d7] w-[230px] h-[400px]
        col-sm-6 col-xl-3 ml-20 mt-10 lg:ml-10 rounded-lg">
        <div class="flex mt-0 w-[230px] overflow-hidden ">
            <img src="./media/pc1.jpeg" alt="" class="rounded-t-lg">
        </div>
        <a href="#">  <h3 class="font-bold font-sans text-center p-4 text-[#2a2a2a]">Got a creative mind?</h3></a>

        <p class="px-5 text-justify">if your mind is full of ideas for develop or designing a web, lets create them!</p>

      </div>


      <div class=" bg-[#a8a8a8d7] w-[230px] h-[400px]
      col-sm-6 col-xl-3 ml-20 mt-10 lg:ml-10 rounded-lg ">
      <div class="flex mt-0 w-[230px] overflow-hidden "><img src="./media/pic2.jpeg" alt="" class="rounded-t-lg"></div>
      <a href="#"><h3 class="font-bold font-sans text-center p-4 text-[#2a2a2a]">Is your mind full of questions?</h3></a>
       <p class="px-4 text-justify"> if you're tierd of multipule unanswered questions? im right here to help!</p>


    </div>


    <div class=" bg-[#a8a8a8d7] w-[230px] h-[400px]
    col-sm-6 col-xl-3 ml-20 mt-10 lg:ml-10 rounded-lg">
    <div class="flex mt-0 w-[230px] overflow-hidden "><img src="./media/pic3.jpeg" alt="" class="rounded-t-lg"></div>

    <a href="#"><h3 class="font-bold font-sans text-center p-4 text-[#2a2a2a]">Needing good sources?</h3></a>

    <p class="px-4 text-justify"> need the best sources to learn coding fast? you are in the right place!</p>
  </div>


  <div class=" bg-[#a8a8a8d7] w-[230px] h-[400px]
  col-sm-6 col-xl-3  mt-10 ml-20 lg:ml-10 rounded-lg">
  <div class="flex mt-0 w-[230px] overflow-hidden "><img src="./media/pic4.jpeg" alt="" class="rounded-t-lg"></div>

  <a href="#"><h3 class="font-bold font-sans text-center p-4 text-[#2a2a2a]">Need a long-destain developer?</h3></a>
  <p class="px-4 text-justify"> need a expert long-destain web developers team? we even work long-destain !</p>
</div>

</div>

<!--end-help-board-->

<hr class="mt-10 border-[#c6c7c6] border-1">

<div class=" sub flex flex-col text-center items-center gap-4 bg-opacity-15">

    <h1 class="font-sans font-bold text-2xl text-[#c4c2c2] py-5 "> Your subscrition warms the 🤍</h1>

    <input id="firstname" name="firstname" placeholder="First Name" type="text" class="p-2 rounded-lg w-72 " inputmode="text">


    <input id="email" name="email" required="" placeholder="Email" type="email" class="p-2 rounded-lg w-72" inputmode="email">

    <button class="bg-[#c4c2c2] w-72 rounded-lg text-[#8f8e8ef4] mb-5 p-2">subscribe</button>

    <div class="flex gap-7 mb-5">


       <a href="#"><img src="./media/svg2-1.svg" alt=""></a>

        <a href="#"><img src="./media/svg5.svg" alt=""></a>
        <a href="#"> <img src="./media/svg6.svg" alt="">
        </a>
        <a href="#">   <img src="./media/svg2.svg" alt=""></a>

      <a href="#"> <img src="./media/face.svg" alt=""></a>

    </div>

</div>


</body>
</html>