Added new frontend project Iphone 14 pro clone

Front-end-Projects/Intermediate/IPHONE-14-Pro-Clone/CSS1.css

@@ -0,0 +1,157 @@
+.grid-container{
+    width: 100%;
+    display: grid;
+    grid-template-columns: 90px 90px 90px 90px 90px 90px 90px 90px 90px 90px 90px;
+    background-color: rgba(18,18,18,255);
+    padding: 4px 4px;
+    column-gap: 5px;
+    justify-content: space-evenly;
+    margin-top: -5px;
+ }
+ .grid-cont1{
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    column-gap: 40px;
+    padding-top: 10px;
+    height: 5px;
+    margin-left: 60px;
+ }
+
+.pro-beyond{
+    width: 1400px;
+    height: auto; 
+}
+.image_side{
+    margin-top:-780px; 
+    margin-left: 520px; margin-right: 50px; 
+    color: #d6d0d0; font-weight: bold;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; 
+    font-size: 500%; 
+    padding-left: 210px;
+    padding-bottom: 500px;  
+}
+
+.content1{
+    color:#bbbbbb;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    margin-left: 270px; 
+    font-weight: bold;
+    font-size: 230%; 
+    margin-top: -90px;
+}
+.gradient-data{
+    background: linear-gradient(to bottom,#f9adff, #a945eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 230%; 
+    margin-left: 270px; 
+    font-weight: bold; 
+}
+.iphone-color{
+    margin-left: 450px;
+    margin-top:150px;
+}
+
+.color_option{
+    margin-top: -700px;
+    margin-left: 690px; 
+    margin-right: 50px; 
+    color: #bbbbbb;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 200%; 
+    padding-left: 250px; 
+    line-height: 45px;
+    /* padding-bottom: 100px;  */
+    /* font-weight: 450;     */
+}
+.below-image-data{
+    color: #d6d0d0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; 
+    font-size: 200%;
+    margin-top: 30px;
+    font-size: x-large;
+    margin-left: 450px; 
+    font-weight: bold;
+}
+.arrow{    
+    background: linear-gradient(to bottom,#d3aac2, #b459c8); 
+    border-radius: 50px; 
+    color: black;
+    height: 60px; 
+    width: 60px;
+    margin-top: 40px;
+    padding-left: 12px; 
+    padding-top: 10px;
+    /* margin-left: 100px; */
+}
+.caption{
+    margin-top:10px;
+    margin-left:150px;
+    color: grey;
+    font-weight: 500;
+    font-size: 100%;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+.caption-1{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    color: grey;
+    margin-left: 50px;
+    /* margin-top:10px; */
+}
+.pic-grid{
+    padding:20px;
+    /* background-color: red; */
+    display: inline-grid;
+    grid-template-columns: 370px 370px 370px;
+    column-gap: 10px; 
+    row-gap:30px;
+    margin-left: 100px;
+}
+.grid-cont2{
+    display: inline-grid;
+    padding:20px;
+    grid-template-columns: auto auto auto;
+    /* background-color: red; */
+    column-gap: 30px;
+    margin-left:150px; 
+    /* margin-bottom: 500px; */
+}
+.grid-items-1{
+    color: #d6d0d0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; 
+    font-size: 150%;
+    /* font-weight: bold; */
+    /* margin-left:60px; */
+    padding-left:100px
+}
+.caption-2{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    color: grey;
+    margin-left: 7px; 
+    font-size: 70%; 
+    font-weight: 600;
+    line-height: 30px;
+}
+.end-back{
+    background-color: #111111;
+    margin-top:200px
+}
+.end-site{
+    /* background-color: red;   #111111 */
+    /* width: 100%; */
+    grid-template-columns: 500px 500px;
+    display: inline-grid; 
+    column-gap: 10px; 
+    row-gap: 20px;
+    padding:100px;
+    margin-left: 100px;
+}
+.grid-merge{
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+.end-bg{
+    border-radius: 30px;
+    background-color: black;
+    padding-left: 10px;
+    /* border: 1px solid blue; */
+    padding:50px;
+}

Front-end-Projects/Intermediate/IPHONE-14-Pro-Clone/CSS2.css

@@ -0,0 +1,72 @@
+.shop{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+     background-color: rgba(64,38,73,255);
+}
+
+a.shop:link{text-decoration: none; color: rgba(39,134,223,255);}
+a.shop:hover{text-decoration: underline;}
+a.shop:visited{color:rgba(39,134,223,255)}
+a.shop:active{color:rgba(39,134,223,255)}
+
+.iphone-image1{
+    margin-left: 145px; 
+    margin-right: 50px; 
+    height: 880px; 
+    width: auto; 
+    padding-top: 40px;}  
+
+.bag{
+    height: 20px; 
+    width: 20px;}
+
+img.bag:hover{color:white}
+
+.data-1{ text-align: justify; 
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; 
+        line-height: 55px;
+        margin-left:250px; 
+        font-weight: 750;
+        font-size: 320%; 
+        background: linear-gradient(to bottom,#e99aef,#9641d2, #7520ad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} 
+/* .film{
+    border: solid; border-radius: 16px; padding: 1px 10px 3px 12px;
+    text-decoration: none; background-color: white; color: black; border-color: white; 
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    font-weight: 300;
+    margin-left:200px;
+    margin-bottom: 300px; margin-top: 100px;
+} */
+.grid-table{
+    display: inline-grid;
+    grid-template-columns: 170px 170px 170px 170px;
+    /* background-color: red; */
+    color: #d6d0d0;
+    padding:10px;
+    gap:10px 40px;
+    margin-top: 50px;
+    margin-left: 270px;
+}
+.grid-table-items{
+    text-align: center; 
+    /* border: 1px solid blue; */
+    font-weight: 500;
+    font-size: 90%; 
+    color: #d6d0d0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+.grid-table-sub{
+    text-align: center; 
+    color: #d6d0d0;
+    font-size: 90%; 
+    font-weight: 350; 
+    line-height: 25px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+.grid-table-capt{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    color: grey;
+    font-size: 70%; 
+    font-weight: 600;
+    line-height: 15px; 
+    margin-top:-12px
+}

Front-end-Projects/Intermediate/IPHONE-14-Pro-Clone/README.md

@@ -0,0 +1,66 @@
+<h1 align='center'><b>💥 IPHONE 14 Pro Clone 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <p>This project is a simple HTML and CSS implementation of a iPhone 14 Pro website clone. It aims to replicate the basic structure and styling of the popular website iPhone 14 pro. This project Showcases the power of HTML and CSS.</p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<div>
+  <p>To run this project locally, follow these steps:
+
+1. Fork the repository.
+
+2. Clone the repository to your local machine:
+    git clone https://github.com/your-username/IPHONE-14-Pro-Clone.git
+
+3. Open the project folder in your preferred code editor, now you can view website in live.
+
+</p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Vansh Chaurasiya</i></b></h4>
+<p align='center'>
+  <a href='https://linkedin.com/in/vanshchaurasiya24'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/vansh-codes'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Front-end-Projects/Intermediate/IPHONE-14-Pro-Clone/footer.css

@@ -0,0 +1,82 @@
+
+footer{
+    background-color: #111111;
+    margin: auto;
+}
+
+.head1{
+    font-size: 14px; font-weight: 110%;
+        /* background-color: rgb(27, 24, 24); */
+    color:white; text-align: left;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+
+}
+.row-div{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;   
+    display: flex; flex-direction: row;
+    text-align: left;
+    color: #bbbbbb ;
+    margin-left: 70px;
+    margin-right: 40px; 
+}
+container{
+    padding-left: 30px;
+    height:350px;
+    width: 170px;
+    /* color: rgb(27, 24, 24); */
+    margin-left: 7px;
+    margin-right: 10px;
+}
+ul{
+    list-style-type: none;
+}
+.col-div{
+    display: flex; flex-direction: column;
+    text-align: left;
+    color:#ffffff ;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    color: #bbbbbb ;
+    /* margin-left: 1px; */
+}
+.col-div ul li a:hover{
+    color: #bbbbbb; 
+   text-decoration: underline;
+}
+.col-div ul li a{
+    font-size: 12px;
+    text-decoration: none;
+    font-weight: 300;
+    color: #bbbbbb;
+    display: block;
+    transition: all 0.3s ease;
+}
+.row-div ul li a:hover{
+    color: #bbbbbb; 
+   text-decoration: underline;
+}
+.row-div ul li a{
+    padding-top: 4px;
+    font-size: 12px;
+    text-decoration: none;
+    font-weight: 500;
+    color: #bbbbbb;
+    display: block;
+    transition: all 0.3s ease;
+}
+.copyright{
+    font-size: 14px; 
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    margin-left: 180px;
+    color:#59595d; font-weight: normal;
+}
+.foot-links{
+    color: #bfbfc4;
+}
+a.foot-links:link{color: #bfbfc4; text-decoration: none;}
+a.foot-links:hover{text-decoration: underline; color: #bfbfc4;}
+
+.footer0{
+    color:#bbbbbb;
+    margin-left: 170px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}