<head>
<meta charset="UTF-8">
<title>HENNE - Watches</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Lato|Roboto" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!--https://css-tricks.com/snippets/html/responsive-meta-tag/-->
<meta name="viewport" content="width=device-width">
</head>
<body>
<header class="header-container">
<div class="logo">
<a href="index.html" title="Henne home page"><img src="https://lh3.googleusercontent.com/YQPtzeoIll-4nLhdnBNzX1pqiAn-ycJu7CnEJcSpY4g5yiyNoSuqqxyRSlZ9NdIN-3vyWNNciwxShNwH73BHj4BJLFzqR6KV7DBE6bHyveJ6PdsmHcK0BPZK3AK3YDjhKObZMT2AGdathjw63XWlAzDwlWlyB_r6S5qGZaD60yZKG9IJ2tPe0pHTuD3Vkj3BnMqtQwlUmKJBuVBWDxEOC7sTSMuyHa44kp1lVaAnUleyWwI5eKTSK7fSj-qAYRP5v4R4ns7MaQRQLh8h5XVvin5TqsdpfA2-Htq5a8gySWIWrLnnhmCCQX-um_d8YhgTUZpGcbFF0MD3tblX2YMJL89peGTcqGklo1qiNeU_jnB368Wh-NnJu7D-QCL00sCX9kjTp_AqToDe4pUTlul7n1MQ6wmXdUOciKoP5EV7hBeW6cMxfeeCC9NECuE6Qs-TlYjrMkxJqpAZ9QxIm8X7f7FhgS12Kphfjso5QVdvH45Y2L9UMoe1bm0pHliEf0yc9uEoWFvtpj9JB79cDHVJq2hLUVOVVH67r_rBHDly8ZNT-mrS_IgZNziNI9-pB6kNfg0Y5IUJBpi89rclrIgpNA7WqOgBNfcf9lCUmDY=w534-h99-no" width="180"></a>
</div>
<nav>
<ul>
<li><a title="Home">Home</a></li>
<li><a class="active" title="Watches">Watches</a></li>
<li><a title="Our story">Our Story</a></li>
<li><a title="Contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Watches</h1>
<section class="watch-grid">
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/VHzWkT3Pif1u7jxsba2AEIlGTUjhnwB1SnFXdJJyhZRVoY-qbis8Wt0bDGg2wRcYifcXsTci8aqSpBzwHEquDEzWaMAmaX9AN6RckkCCyKxnLrS7r4ZTXTycBQEgQNUVjay_qQuhRm3OrpHbFHxB72V-lAlE7VP3xttqKD-ZWa7mxvLr2Zd3EkR6os0DQbQpDiZpePnx89_HOPT-x8N9MJxTs0TBMoPFFa3UrFr9l-ipykINyWtcYb3WHsEf5NfIMlsdZKjfSknaXRSDAO0HtdcQz3GCxc23Zcr1_FcF74FQP27eX6FrwvmdWMrJPttyxDKKjAeaq5zv8LpnFlv_ckYyDCBHu3onD-LjQwegEsqlAlRgkiRpGZpdEPVhhuRgl3FTcm1ZyrDPBo_Mx3nNZf-cYt8u4U4WqNV3CcOnTf69vBmnItF5GdnCYBvv8nMcm7gKr73dTco_c3lI0CXp4x2_KGQv2urbGs1VI7mIhS-uZ-vw4ynb9kxT8OVwWQzmmzC9v0RLrmB-PE1CcP0XBdaPJRhCwTZ8wwT1zTRnJBOlzNz2qKYEO3RwmpUAq9-l0IAl62BJ3zxEiQd3aWG6n5r9WIOZyDZqa8IC4aI=w370-h495-no" alt="Timepiece" title="Timepiece">
<div class="watch-info">
<h3>Timepiece</h3>
<p>$15,995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/eNSNII2CkLf8Q7lYPY4Fdk_--jcABg9-HA66_mFVPYQRMGbJPciIiBbFqtkaIgFDW_ixhuUg8l2rlTalz4SLA84V_Ie6k3_IQPD_npuxO3-tMH4j6hA5724GrUpGLb5O_YtPgH4S4tGvCMe7_Ew3nN47yqXklWDhk9jb7NarqL0dm8zri5k9nlmG-nX1bKZMpXINlWneBQtjxEIbodhyd7wUNTWipQGe0qN7zm6tZ5j4SRSfkDpolb3GwLW1Iq-nTMlN3XsEZS6vEQ3QieBqsj00j8EUESSxvZPyD5vFBQw_Ik2JJSo4EEArZba5FBDDU8V2D2Gx6VJDBHN4_gly0z6t4ZhkLzNdAzlYR47a-8eWt43hJKtc6ZsjO1IuMmuTBmuiCFGdq_N_X1OXR8dFX_7AM9x5QrEvVfq2qJ3QEcsY1Qt4pbV7BUTgxARWn30UBCoKP9-A7_SZNws_DveyGVqv64IKoVue_yddem7z-dQAnOn8xUH_6xu7IlDQDcE_R7ogPeuYfnQupmyn1n1UWSHr7NxudJtOKc7yFUvUYoQE-NNcz2EQc2Rh9f9SEXbOhHaUmCGqnZrLgu3LJm-AFlQjcnqtDYfMhX2yvi8=w370-h495-no" alt="Road Rage" title="Road Rage">
<div class="watch-info">
<h3>Road Rage</h3>
<p>$7995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/jDdyI65W98hDzlE4RvVLbQcLOlLzOhRA4VKou901kGkb0mHWtLCRmBZC-OzKRLIWU85VdCgL34d3-qdxa3Jf7pTHwd8SwK-UAUbi4fxkZObk2xDtgeNUDwUQGa6B_RbyW7x9Oyl39tW4DH1sUnXxjxcjWL8J4hQRL-nINSXZ2oVo5Ue0m5QE5lTWP7B6Tuovmif41qJsc7MMacNyVodZHiQTOYYqvZR95MwvCcMz2yVV-45OGBN6gt0XvSPfneS2hGQZhiHWd9zeqtuId5bWO9MTkCH1f8nlevzuYiSH7rPGEt0hAKzvCpT-mNuelMoyp1kJAncxeJ6DrjTVhmcpr4EtV6dje-mmIs6QcMUVDnU3RG-Bb7u-a867dDHkmcDAwZ1k_7r3nuEkWxpj_oiYiw5TjscVoxyo5k-3MxhbbYK17C881UL4490SvKba9OQD26ctcVkd4yUN3eXL_Zq3NC4V0hH6jQBU5_zPUJ_Z_yMQscBzVxcyT-deKaLneaq-Bah2yjYL_baZJ8nQhG0gsW20FrtchqI-geWdQOKI9EL2E6dmzIKRXHl-LIzi13zcYuaZEPnbkulnlkbmLVV--uRirxjI_Y3jOPklD_A=w370-h495-no" alt="Air Queen" title="Air Queen">
<div class="watch-info">
<h3>Air Queen</h3>
<p>$10,995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/hniqd1iOGPJYzhPh31cSqIA3-5zP0vKQIuw1aRuf0w7-A6C_1n1VX051Xn1hsklWCITuwoIF6AT3GH7amWjgTKC294Csm-rIy41nMoH-MZCM2QIX4TutQFDClrB1-Ao0tfqNsnj__gpFpy_hUHNDnSMoYMrS2Sj1ISifQOuCRpi5EWJjMqrHCy5x1iiwhew4V_ZfEN9Y-BuQkOuyjKQSa0drWcuWkRLQzomykuPIw7vtnJitnDd28TZ75TeBdPHZ0jbHTGni7JYlzQWTqnPhqcHnsft5KJEYk2IpMn413dAsFli3_uZ_Lp0oP6z8btD4USLcRsLyKFYdlSBaUAnsOd1JovqiyG_wZ2fP2513KXFh2yl7fipzw4ZGrflmYuX6AWrbUR8q5QBGBgFS1kBsnEfYErtMZxXXf1mPOQmVOqW1ajAodjii72H_U4JdTzcTeSRPm0qeoUaTxAlHvf17berUvDVGbEp0UuBEltIRvIyqxrWx58kYtDjjF6zt5wOz8L-XcmAVvnWbG7lwXKKql97gATXISf2oGEzP2_zb6wWrpyKFKrc3HihGNSG5xkFnotvXW5LUJ8JGwwaW3jb8OhmgFHGo4VHjlA6FUeI=w370-h495-no" alt="Restless" title="Restless">
<div class="watch-info">
<h3>Restless</h3>
<p>$5995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/LSnPqaqZAN8sZ2YatfRGZWAdK1cnwSE9VHgIApuvju1GpCHGVhkUMexN6advItp3DQQmn_SYyEmkElIFdeDLV9U64kR2YYeDK7ADb6eAolupcPrZ-BblvtG8sKEZpZYkm9Gd_SU5Ftb7GKVJvAEO40VDUDnEDJKoi1NH4YFYHfrVRCxJ35v2NBKzBs4DSVwGEzT0vXcqRyT1tPX4JHCUjgfHL27HHrr9ZKwfmFYPruhqJ71vGm-uRTq4RxnXm-NSnRD7MkWCdXynyLP6EU3-6clrv8bGJ4LR-OaF3rPgZi2nDMl1_LMy0uYMaAPMm8KQjZghc6xXRK4WDjz9GHc_VfTtOMyrHsvTnCe3UZIAabYTpqOTi8NYdTmDhLvonhfm9jNx4dIL0amSND9HudrzahaUnvcE8HbDsab2LeC3pG0fwjPr56xKeMnGCUbAwGVMYUJ8UsQgZpNMSPHhi0egIbOAtgMPlmCc1_XCSv01TXt4w7bMiXm32T7F8-WqjpNC4e7tdFI2EFVIGwEpdD4LJgGyrqyPMXy2yZxS_0BbkLqGxLskPR5AdXZjR2of0EH2Djpc1fJAZ6rdpZqZzY5GeBeV9eMm9LDMIxNMI5M=w370-h495-no" alt="Milton Submariner" title="Milton Submariner">
<div class="watch-info">
<h3>Milton Submariner</h3>
<p>$4995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/mEUiMzscIbqPOEIF-ka9Vo8_8PMjeuPWj7kDYLOE52GrXKkiJuJaFYJPFRxUdZLtCVOMUotMrYdydAfxjOISVuIGXoh-2o9LJRpDo-bzq7ZZadg1gT3HXEYfkW5ysCKBLbgAkaDU4o-2NQKGjqVf50fCYy_-Bx7n9p47YhHlJ5Zhdd3qQU-jJLJegIhTIe27NpgpteB5aD3Vq7f5QkiaTv18CUKwRkROL5qpJM819o65cklicLN0aeMSHMBaFgd1i2fH6_mx195UGoSB60VvO8SEsed8c9WippqfRNYf7BtCfnqp1ghbDK_M-z3Jt1QTuNZD8ZNLmPwfw5CCUH3u5sR01Wa1MX0MvEYzP5ibD9FQg7ALY6z2VGslFWfYvHaDH378BmdL3sKyQRdrl368mnwQBfI22mT8L9tVRjQC-xWqshxxiq_dCC7rtIeKMMq07HlsmkPKrRrdHUknwL6MrD8mYsnkO-ni5icgW03XDqA-TYHaRBPz3res4_LnlMqxTn4hqYI0zdvfz0YIBwEKFMb12DswyVy_M8pc11fxLz00aKljYyhlhnU2XUH2WL31W87Ht_8j274pW1sJOz80_pwVg0w5EEXE_UM8ioQ=w370-h495-no" alt="P.A. Explorer" title="P.A. Explorer">
<div class="watch-info">
<h3>P.A. Explorer</h3>
<p>$5995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/HqgQ_sxJgMuyOzKskJB5N_qFu00Fl1iLmxoglRxXW-YOBwqxrMDLZ5rFhHj6Wp8wcjLklCm2eTjPmWHTHOYHjTZG9bO2TYU30VXLwqMmWqnqzKCE2N0QsbofYsME66Nk-poFZ-W9ThwHb328SbnN4meW3fsdQUHiA3fevb4o_aBsK1hn1EMtoDA38-McVlv4YSBC0YIV-1tT1lWJuQw-7KHjGW17Zp2OxcSXI_5Js3XGJdo9dwRDy6MnId-qKL20y65AIvTgarYk9-Lw2ul7Jeg8l8EWfU2iS3hla6II_2Z7smJPweGRAp1AlTJp8Yj-ZxV6KxyIr5Ivee6AnYK8qP-kF4Po-IKMc6nBZYiS-t6lAwUKJfCGritgmXzosSBrAGK6s69c9X1dY2kXOsT8dysHkbAKzSZwCVRMl4SSWpx0wlXk4rW9gfmdmir1aQMeQ_SE89Ote44rFve38qj0DaeAidVuqW85fB7fS-BjEs_KhgT5uoOl0lGtIVyoGvD4-vb9sp3S9zluBQR9NoWK60QCpnukicGPohcv0_W9KBhjfyCAs_J7qN-3V8Yijjf11YX_2Bd-ajy3WN81xhpJnGmjH5GDY2Lb5vqT8ys=w370-h495-no" alt="Luminor Flyback" title="Luminor Flyback">
<div class="watch-info">
<h3>Luminor Flyback</h3>
<p>$12,995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/xtqPo82aJK90iyOb7qCFkTIWEySkYmBKWomBZSH_H0dQ7JbpkDZ8NJnQX6ZqgK_poAv_Q2Gj0I4WaaD8BNvojm5Prg0F1Gkk2rSOpF5assA09m0_uvbqVwKAwhIrZqbgaBBCZc-AaIqmnofaDy785VhWnAiqWuZ9b1JxnTfn4e9ZYaLlyGmNV1gNx6kU4BJY2N-KdpmG_1XzjCWiCo7v5MGZIjtpRFwPKwPXmzrrOP0dNDYZsIE3DEpARa6RdpwR-JguXLg3clyWtGwtMmfiPx6NzNdakzBNo6nNda7e30AuD0Ck6Tt7bnxTnOFpp7NTsLjgoXwILtft4YjS5wjxVrCjerq9-v1Pda1oHD4Yo3H_Ko31qIpDDxrUxM-l2p6yRtSCEyOb5MPVyj6KnAIAH4FCJvA_cX3ibg_bzXcVsjfFMqNPk94Gm15A3QDHDa0s2ED7TRA-ZyhLlkl7DrFr2JNhUM8epNJdc5m4M8-Tcc5V2QYUnaygOidyR7DuVdXPsRefO1HGz44OyzjgwlIP91Y40rNf29BbQeeNHaSmSdO6UUzfBmE10OKhuc2jt5lxrDSh0pxmbIlMFzvPQ-ywVna_Yy1eknUK9jY-AN8=w370-h495-no" alt="DW Clockwork" title="DW Clockwork">
<div class="watch-info">
<h3>DW Clockwork</h3>
<p>$5995</p>
</div>
</div>
<div class="watch">
<img class="watch-image" src="https://lh3.googleusercontent.com/yTg1TRtBljthw-yMr5mOMzma_H7bI-xoUD62PFPspRFO6uy-hX0i8nE7De36-vxVWptf3hXLbuwhHYzI1NoTcGOG63LXy8wXcUi3LUWdfNbraBfKe4N98lyTQ-UuDU9WnBbyT5rRJK5fytRwRBh4tcaTJRetRHY1CzJGH7vvkqPM_cOmr6TPyjm2tA59GQl7XzSlTQmwwjW8dFkBJ3YvELR8UgLaqrrpvXCnHo1b9S-jY_MO5_nb6zid9QYn2wlcr4iO21s-2tI2IMJc3Hc_8UyjnLNyojbjEGY48DdgAXZyxxA2udPzJ-Mwrv1RA-xNolMZyvgcaw4TgJL0M1mpAkICmIdad6w2VjuKNZrD3kd_SKZPsMLT4rMfcz9pdy8_1BIVc8-dimFmsZ1Z9t90hp0iqJCetfyrm1QC5HIJ_q8YJOleaFqbekzZETEc3prOzkMu3LLXkIuSh2a1_2Oywc89i9cQUCSni64D7zyPCuBixgkEE1sZq4wPscEtV69kdByqza2D6JD-mVglNVNaRNl_Goe7helXsPPFOikWqBN6Da37BYkcvhaw1l_5q95BA5_icDr0VIhYEegYuGw8UwRo09lwe7EHi4e8-oQ=w370-h495-no" alt="Curren Day-Date" title="Curren Day-Date">
<div class="watch-info">
<h3>Curren Day-Date</h3>
<p>$9995</p>
</div>
</div>
</section>
</main>
<footer>
<img src="https://lh3.googleusercontent.com/fY0uMdLbV5cD7sMTeUm2STVV4nw4wFMkfvL-Fi2JUBFaFJvxc1W-3D-H87zk4KLTung4OevFNQB5zr8RojiO3JBikab7wRCV2yp2SIECMlHSj1DlQS1KZX6s23B7-yRABkF_vt0Lc9FITtOAYHNfgfY5rXKWIZ0vai8fwXY-KnVR4c6T3ABUedZgc0XiZ6azC4XdWa3zDu_Zb1KYJLvmkRSUsd2e6G8AdZwkSb88m3mvaVf3lL9pysiZDyCh794T2zLCyvwQYCcJXUUC12aF_Xp5UUV1xQXZq1gb2eRLEnl2s5bvCU2s_-inuLNH_ItMUl5iaFvk-pDipYzewI-NHyGrRPjHPiJOM7YkMph6qZyk44UwPATU_SaR0igFpkIDy0z3pXoU6y8TkU6OhTTnYGDZXwoUFX2TpQfsnWoOb-QHxWULJcluba8N0-iLhj16mXI3p8NSoBEfJy2GR3IY-blq5zvC64YwwXHZGj132IOO6VL8a6MCzkiZiIxBBRHPpNwKOgpTzUsakottHOgSqaoylMYEHISLdimeqtHbDybGU58i7jp3r1kZ2NfQyxmBrr1x4E6E6naEYhmpsxUPkmrO7T8z4iLzYr6DClg=w534-h99-no" width="72">
<p>Copyright 2018 Henne Watches Ltd. - All Rights Reserved</p>
<p>Legal Disclaimer and Terms & Conditions</p>
</footer>
</body>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #F2F2F2;
}
body {
font-family: Saira, sans-serif;
font-size: 1em;
color: #000000;
max-width: 1200px;
background: white;
margin: auto;
}
h1 {
font-family: "Avenir Next", sans-serif;
font-size: 1.4em;
font-weight: 200;
color: #7D7C7D;
padding-top: 1.5em;
text-align: center;
}
h3 {
font-family: "Avenir Next", sans-serif;
font-size: 1.1em;
font-weight: 500;
}
p {
font-family: "Avenir Next", sans-serif;
font-size: 0.85em;
}
/*Header*/
.header-container {
display: flex;
flex-direction: column;
border-bottom: 1px solid #F2F2F2;
padding: 2.3em 0;
}
.logo {
margin-left: 5%;
}
.logo img {
display: block;
}
nav {
margin: 1.5em 0 0 5%;
}
header ul li {
display: inline-block;
padding: 0 1.4em 0 0;
font-size: 0.9em;
}
header ul li a {
text-decoration: none;
color: #7D7C7D;
}
li a.active {
color: #000000;
border-bottom: 2px solid #000000;
font-weight: 300;
}
li a:hover {
color: #B6B6B6;
}
/*CSS Grid on watch-grid container*/
.watch-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
margin-top: 30px;
justify-content: center;
}
.watch {
width: 47vw;
margin: 0 auto 30px;
}
.watch-image {
display: block;
width: 47vw;
}
.watch-info {
margin-top: 13px;
}
.watch-info p {
font-size: 0.85em;
font-weight: 500;
margin-top: 2px;
}
/*Media Query - screen larger then 600px*/
@media screen and (min-width : 600px) {
.watch-grid {
grid-template-columns: 33.33% 33.33% 33.33%;
margin-top: 54px;
}
.watch {
width: 31vw;
margin: 0 auto 45px;
}
.watch-image {
width: 31vw;
}
h1 {
padding-top: 3em;
}
.header-container {
flex-direction: row;
justify-content: space-between;
}
.logo {
margin-left: 2.3em;
}
nav {
align-self: center;
margin: 0 0.8em 0 0;
}
}
@media screen and (min-width : 1200px) {
body {
max-width: 1200px;
margin: auto;
}
.watch {
width: 370px;
}
.watch-image {
width: 370px;
}
}
/*Footer*/
footer {
background: #867154;
padding: 3.3em;
text-align: center;
}
footer p {
font-family: Roboto, sans-serif;
font-size: 0.7em;
font-weight: 300;
color: #A4A4A4;
line-height: 130%;
}
footer p a {
text-decoration:none;
color: #A4A4A4;
}
footer img {
padding: 0.4em 0 1.3em 0;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.