not responsive

ranjit800 · Jul 13, 2024 · 86cdecb · 86cdecb
commit 86cdecb
Show file tree

Hide file tree

Showing 4 changed files with 222 additions and 0 deletions.
diff --git a/brian-lawson-ZOVMfgwLN2g-unsplash.jpg b/brian-lawson-ZOVMfgwLN2g-unsplash.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+    <div id="main">
+        <div id="left">
+            <h1>
+                a cotton
+                <br> weave.
+            </h1>
+
+            <div id="bottom-left">
+                <div id="color">
+                    <h5>
+                        color
+                    </h5>
+                    <div id="color1"></div>
+                    <div id="color2"></div>
+                </div>
+                <h2>Details</h2>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quia sapiente maiores obcaecati
+                    tempora quidem mollitia assumenda veritatis velit ex
+                    tempore expedita natus nulla architecto sit esse deleniti, quos qui.</p>
+            </div>
+        </div>
+
+        <div id="right">
+            <div id="right-top">
+                <h4>$599</h4>
+                <h5>Rating <i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i
+                        class="ri-star-fill"></i><i class="ri-star-fill"></i></h5>
+            </div>
+            <img src="https://media.istockphoto.com/id/627216156/photo/beautiful-woman-in-a-pink-sweater.jpg?s=2048x2048&w=is&k=20&c=DIly8_w7HcKtLhy6DWmLHMUIJ2MTdlOmjZn-R-OYHuQ="
+                alt="">
+
+            <div id="black-gola">
+                <h5>add to bag</h5>
+            </div>
+            <h2 id="rotated-text">
+                Cotton twill cap
+            </h2>
+
+
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/rafaella-mendes-diniz-et_78QkMMQs-unsplash.jpg b/rafaella-mendes-diniz-et_78QkMMQs-unsplash.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,164 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: work sans;
+}
+html,body{
+    height: 100%;
+    width: 100%;
+}
+
+#main{
+    height: 100%;
+    width: 100%;
+    /* background-color: crimson; */
+    display: flex;
+    /* justify-content: ; */
+    /* align-items: center; */
+    align-items: flex-end;
+
+    padding: 0px 90px;
+    padding-top: 120px;
+    gap: 70px;
+
+}
+
+#left{
+    height: 100%;
+    width: 45%;
+    /* background-color: rgb(255, 89, 0); */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 9px;
+}
+
+#left h1{
+    font-size: 8.3vw;
+    font-weight: 500;
+    /* line-height: 140px; */
+    line-height: 8.3vw;
+    font-family: work sans;
+}
+
+#bottom-left{
+    height: 40%;
+    width: 100%;
+    /* background-color: yellow; */
+}
+#color{
+    /* background-color: blue; */
+    /* margin-top: 25px; */
+    width: fit-content;
+    padding: 8px 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    border: 1px solid black;
+}
+#color h5{
+    font-size: 20px;
+    margin-right: 10px;
+    font-weight: 500;
+}
+
+#color1{
+height: 20px;
+width: 20px;
+background-color:burlywood;
+border-radius: 50%;
+margin: 3px;
+
+}
+
+#color2{
+    height: 20px;
+    width: 20px;
+    background-color:brown;
+    border-radius: 50%;
+    }
+
+#left h2{
+    margin-top: 50px;
+    font-size: 30px;
+    margin-bottom: 15px;
+}
+#left p{
+    /* font-size: 15px; */
+    font-size: 1.1vw;
+    width: 65%;
+    font-weight: 500;
+    color: #444;
+    line-height: 25px;
+}
+
+
+
+
+#right{
+    height: 90%;
+    width: 33%;
+    /* background-color: #13a700dc; */
+    position: relative;
+}
+#right-top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    /* background-color: red; */
+    padding-right: 20px;
+}
+
+#right-top h4{
+    font-size: 28px;
+    font-weight: 500;
+}
+
+#right-top h5{
+    font-size: 10px;
+}
+#right-top h5 i{
+    color: gold;
+}
+
+#right img{
+    width: 100%;
+    height: 43vw;
+    object-fit: cover;
+    object-position: 28% 100%;
+    border-radius: 9px;
+}
+
+#black-gola{
+    position: absolute;
+    right: -15%;
+    top:30% ;
+    height: 150px;
+    width: 150px;
+    background-color:#1c1b1e;
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#black-gola h5{
+    font-size: 26px;
+    font-weight: 500;
+}
+
+
+#rotated-text{
+    position: absolute;
+    left: -10%;
+    bottom: 5%;
+    rotate: -90deg;
+    transform-origin: 0 0;
+    font-size: 30px;
+    font-weight: 700;
+}