diff --git a/gmail clone/gamil_logo.png b/gmail clone/gamil_logo.png new file mode 100644 index 0000000..7df91b4 Binary files /dev/null and b/gmail clone/gamil_logo.png differ diff --git a/gmail clone/index.html b/gmail clone/index.html new file mode 100644 index 0000000..2669731 --- /dev/null +++ b/gmail clone/index.html @@ -0,0 +1,422 @@ + + + + + + + + + + Gmail UI Clone + + + +
+
+ menu + Gmail Logo +
+ +
+ search + + arrow_drop_down +
+ +
+ apps + notifications + account_circle +
+
+ + + +
+ +
+ +
+ inbox +

Inbox

+
+
+ star +

Starred

+
+
+ label_important +

Important

+
+
+ near_me +

Sent

+
+
+ note +

Drafts

+
+
+ access_time +

Snoozed

+
+
+ expand_more +

More

+
+ +
+
+ person + duo + phone +
+
+
+ + + + +
+ +
+
+ + arrow_drop_down + redo + more_vert +
+
+ chevron_left + chevron_right + keyboard_hide + settings +
+
+ + + +
+
+ inbox

Primary

+
+
+ people

Social

+
+
+ local_offer

Promotions

+
+
+ + + + +
+ +
+
+ + star_border + label_important +
+

Youtube

+
+

You got a new subscriber + -On your channel Tridib. +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

practice

+
+

GFG Weekly - 166 [Rated Contest] about to Start! +

+
+

9.30pm

+
+ + +
+
+ + star_border + label_important +
+

Micrsoft

+
+

You got The Offer Letter for SDE II + -On your mail. +

+
+

11.25pm

+
+ + +
+
+ + star_border + label_important +
+

Hashedin

+
+

Congratulations! You got The Offer Letter for Product Engg + -On your channel Tridib. +

+
+

6.30pm

+
+ + +
+
+ + star_border + label_important +
+

HDFC alerts

+
+

❗ You have done a UPI txn. Check details! +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Deloite

+
+

You got a new subscriber + -On your channel Tridib. +

+
+

1.12am

+
+ + +
+
+ + star_border + label_important +
+

IIM Calcutta

+
+

You got a seat for 2-Years PG program + +

+
+

9.00am

+
+ + +
+
+ + star_border + label_important +
+

Amazon

+
+

You got Offer Letter for CEO-Amazon, India + +

+
+

7.20pm

+
+ + +
+
+ + star_border + label_important +
+

Unstop

+
+

Only 2 days left: Flipkart GRiD Hiring Challenge- Stipend @₹1 lac/month - Apply now! +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

RedBus

+
+

Good news for female travelers! 😍 + +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Youtube

+
+

You got a new subscriber + +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Myntra

+
+

End of season sale is live! + +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Apex Internships

+
+

30+ Paid Internships! 💰 + +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Youtube

+
+

You got a new subscriber +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

SRM

+
+

You have completed your B.Tech +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

PhonePe

+
+

Explore our new features +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Flying Beast

+
+

You got a new subscriber +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Linkedin

+
+

Shalin wants to connect with you +

+
+

8.30pm

+
+ + +
+
+ + star_border + label_important +
+

Sunny Leone

+
+

You got a new subscriber +

+
+

8.30pm

+
+ +
+ +
+ +
+ + \ No newline at end of file diff --git a/gmail clone/style.css b/gmail clone/style.css new file mode 100644 index 0000000..59c245f --- /dev/null +++ b/gmail clone/style.css @@ -0,0 +1,271 @@ +* { + margin: 0; + padding: 0; + /* added */ + margin-left: 2.5px; + +} + +/* Header Styles */ + +.header_left img{ + object-fit: contain; + height: 140px; + margin-left: 7px; +} + +.header{ + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 2px solid whitesmoke; +} +.header_left{ + display: flex; + align-items: center; +} + +.header_middle{ + display: flex; + flex: .7; + align-items: center; + background-color: whitesmoke; + padding: 10px; + border-radius: 4px; +} + +.material-icons{ + color: grey; +} + +.header_middle input{ + border: none; + width: 100%; + padding: 11px; + outline: none; + font-size: medium; + background-color: transparent; +} + +.header_right{ + display: flex; + padding-right: 20px; +} +.header_right span{ + padding: 10px; + cursor: pointer; +} + + +/* Sidebar */ +.sidebar{ + flex: 0.3; + max-width: 300px; + padding-right: 20px; +} + +.sidebar_compose{ + margin-top: 15px; + margin-left: 10px; + margin-bottom: 15px; + text-transform: capitalize; + color: gray; + padding: 15px; + border-radius: 30px; + background-color: white; + display: flex; + align-items: center; + cursor: pointer; + outline: none; + border: none; + box-shadow: 0px 2px 5px -2px rgba(0,0,0,.75); +} +.sidebar_compose span{ + margin-right: 5px; +} + +.sidebar_option{ + display: flex; + align-items: center; + height: 40px; + padding : 0 10px; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + cursor: pointer; + color: #818181; + +} + +.sidebar_option .material-icons{ + padding: 5px; +} +.sidebar_option h3{ + flex: 1; + margin-left: 10px; + font-size: 14px; + font-weight: 400; +} + +.sidebar_option:hover, +.sidebar_option:hover h3, +.sidebar_option:hover .material-icons, +.sidebarOption_active, +.sidebarOption_active h3, +.sidebarOption_active .material-icons{ + + background-color: #fcecec; + color: #0b0c0c; + font-weight: 800; +} + +.sidebar_footer{ + display: flex; + justify-content: center; +} + +.sidebar_footerIcons .material-icons{ + margin: 7px; + cursor: pointer; + +} + +/* Main Body */ +.main-body{ + display: flex; + height: 100vh; +} + +body { + height: 100vh; + overflow-y: hidden; +} + +.emailList{ + flex: 1; + overflow: scroll; +} + +.emailList_settings{ + position: sticky; + display: flex; + top: 0; + justify-content: space-between; + border-bottom: 1px solid whitesmoke; + background-color: white; + z-index: 999; + padding: 9px; +} + +.emailList_settingsLeft{ + display: flex; + align-items: center; + +} + +.emailList_settings .material-icons{ + margin:5px; + cursor: pointer; +} + +.section{ + display: flex; + align-items: center; + border-bottom-width: 2px; + padding: 15px; + min-width: 200px; + cursor: pointer; + color: gray; + border-width: 0; + +} + + +.emailList_sections{ + position: sticky; + top: 0; + display: flex; + background-color: white; + border-bottom: 1px solid whitesmoke; + z-index: 999; +} + +.section_selected{ + background-color: whitesmoke; + color: red; + border-width: 3px; + border-bottom: 3px solid red; + +} + + +.section_selected .material-icons{ + color: red; + +} + +.section:hover{ + background-color: whitesmoke; + border: 3px; +} + +.section h4{ + font-size: 14px; + margin-left: 15px; +} + +.emailRow_options{ + display: flex; + align-items: center; + +} + +.emailRow_options .material-icons, input{ + margin: 5px; +} + +.emailRow{ + display: flex; + align-items: center; + height: 50px; + border-bottom: 1px solid whitesmoke; + cursor: pointer; + z-index: 999; +} + +.emailRow:hover{ + border-top: 1px solid whitesmoke; + box-shadow: 0 4px 4px rgba(0,0,0,.24); +} + +.emailRow_message{ + display: flex; + flex:.8; + align-items: center; + font-size: 13px; + +} + +.emailRow_message h4{ + width: 400px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-left: 5px; + padding-right: 5px; +} + +.emailRow_title{ + font-size: 13px; + flex: .3; +} + +.emailRow_time{ + padding-right: 15px; + font-size: 15px; + font-weight: bold; +} + +.emailRow_description{ + font-weight: 400; + color: gray; +} \ No newline at end of file